Блог

Главная - Вопросы по программированию - не могу передать переменную в javascript, она передает html-элемент вместо переменной, на которую ссылается?

не могу передать переменную в javascript, она передает html-элемент вместо переменной, на которую ссылается?

#javascript #html

#javascript #HTML

Вопрос:

это мой код: 

 function newTodo() {
  const text = prompt('What needs to be done?').trim();
  if (!!text) {
    id  = 1;
    const todoId = 'todo'   id;
    // checkbox
    const todoCheckbox = document.createElement('input');
    todoCheckbox.type = 'checkbox';
    todoCheckbox.id = todoId;
    todoCheckbox.classname = classNames.TODO_CHECKBOX;
    todoCheckbox.setAttribute('onclick', `handleCheck(${todoId})`);
   ...
  } else {
    alert('Please enter a valid todo');
  }
}

function handleCheck(todoId) {
  console.log('checked!', todoId);
}

но handleClick регистрирует html-элемент, к которому прикреплена функция: 

 <input type="checkbox" id="todo2" onclick="handleCheck(todo2)">

Я хотел зарегистрировать только идентификатор, поэтому я ожидаю, что это будет:

 todo2

что я делаю не так?

Комментарии:

1. handleClick ты имеешь в виду handleCheck ?

2. не уверен, что вы передаете своей функции строку. попробуйте заключить ее в одинарные кавычки <input type="checkbox" id="todo2" onclick="handleCheck('todo2')">

Ответ №1:

Ваш обработчик:

 onclick="handleCheck(todo2)"

пытается сослаться на глобальную переменную с именем «todo2» и передать ее handleCheck функции. Поскольку (что приводит к путанице) идентификаторы элементов автоматически добавляются к глобальному объекту, это приводит к передаче функции только что созданного вами элемента.

Вместо этого заключите todoId в кавычки, чтобы убедиться, что она передается в виде строки:

 todoCheckbox.setAttribute('onclick', `handleCheck('${todoId}')`);

Но было бы значительно элегантнее добавить обработчик должным образом, используя Javascript вместо встроенного атрибута HTML:

 todoCheckbox.onclick = () => handleCheck(todoId);

Однако динамические идентификаторы — это запах кода — они редко бывают необходимы. Если вам нужны уникальные данные для каждого элемента, вы можете рассмотреть возможность использования data- атрибутов или Map .

Ответ №2:

Это должно быть <input type="checkbox" id="todo2" onchange="handleCheck(todo2)">