Блог

Итак, я тоже хочу начать с того, что я новичок в веб-разработке, в частности в javascript. Я пытаюсь создать простую программу, в которой вы выбираете определенные элементы из списка определенных ингредиентов из видеоигры, а затем вам сообщают, какие рецепты вы можете приготовить. Я борюсь с тем, чтобы текст отображался в html, когда установлен флажок.

Это мой html-код для одного из ингредиентов, из которых готовят рецепт только из одного элемента:

 <div>
    <input type="checkbox" id="egg" name="egg">
  <label for="egg">Egg</label>
    </div>
  

Это javascript, с помощью которого я пытаюсь заставить рецепт отображаться под флажками в абзаце с идентификатором «make»:

 if (document.getElementById("egg").checked === true) {
    document.getElementById("make").innerHTML = "You can make a fried egg with egg!";
}
  

Добро пожаловать в Stack Overflow! Я надеюсь, что вы найдете здесь несколько полезных ответов!

Похоже, вы пытаетесь изменить отображаемый HTML-код на странице при нажатии на флажок.

Проблема с приведенным выше фрагментом заключается в том, что он запускается только один раз, и вам, вероятно, нужно прослушать события.

События — это совершенно новый мир для нового разработчика, но не волнуйтесь, у вас все получится!

По сути, события — это сигналы о том, что что-то произошло. Итак, вам нужен фрагмент кода, который срабатывал бы при нажатии на флажок. Если вы используете собственный JavaScript, это может быть что-то вроде этого:

 const el = document.getElementById("egg");
el.addEventListener("click", ev => {
  const message = el.checked
    ? "You can make a fried egg with egg!"
    : "You can't make fried eggs at all!";
  document.getElementById("make").innerHTML = message;
});
  

Теперь, каждый раз, когда нажимается элемент «egg», запускается приведенный выше код, обновляющий внутренний HTML-код элемента «make».

Чтобы это заработало, вам нужно было бы установить прослушиватель событий (просто обычную функцию) на ваш флажок, который обрабатывал бы каждое изменение входного значения и, в зависимости от того, является ли это значение true или false , вы можете обновить значение вашего вывода.

Вы можете запустить фрагмент кода и посмотреть детали реализации.

 function updateResult(checkbox) {
  const make = document.getElementById("make");
  make.innerHTML = checkbox.checked === true 
    ? "You can make a fried egg with egg!"
    : "";
}  

 <div>
  <input type="checkbox" id="egg" name="egg" onchange="updateResult(this);">
  <label for="egg">Egg</label>
</div>
<div id="make"></div>  

Вы почти на правильном пути. Однако, будет выполняться только один раз (и немедленно), тем самым не давая результатов. Для этого « bind » используется прослушиватель событий. Это гарантирует, что при каждом нажатии флажка выполняется определенная вами функция. Вот так —

 const check_box = document.getElementById("egg");

// this function decides what message to set and shows it
function cbClicked(event){
  let message = "";
  //check if box checked
  if(check_box.checked) {
    message = "You can make a fried egg with egg!";
  }
  //box not checked
  else {
    message = "You can't make fried eggs at all!";
  }
  //set message
  document.getElementById("make").innerHTML = message;
}

//add an eventlistener by telling what 'even' to listen for
// and what function to run
check_box.addEventListener("click", cbClicked);  

 <div>
  <input type="checkbox" id="egg" name="egg">
  <label for="egg">Egg</label>
</div>
<div id="make"></div>  

Обратите внимание, как я передал функцию в качестве аргумента .addEventListener() , это возможно и также совершенно нормально. Переданная функция вызывается функцией обратного вызова. Вы даже можете определить это полностью внутри .addEventListener() , и в этом случае вам даже не нужно задавать имя для этой функции следующим образом-

 .addEventListener('event_name',function(event){
//body of function
})
  

Первый аргумент event — это произошедшее событие, которое автоматически передается обработчиком события. Но здесь я им не пользовался.