У меня проблема с добавлением элементов на мою страницу после нажатия кнопки - "Не определено", что мне нужно сделать?

#javascript #html #css

#javascript #HTML #css

Вопрос:

Я изучаю JS и не знаю, что делать с этой проблемой. Функция должна что-то возвращать? Если да, что ему нужно вернуть?

Это часть моего js:

 const workExamplesAdding = (htmlFirstText, htmlSecondText) => {
htmlFirstText  = '<img src="/images/your_img_here1.png" alt="Example of our work" class="work-examples__item-img"><div class="work-examples__item-img--overlay"><a href="#" class="work-examples__item-link"><i class="far fa-eye"></i></a></div>';
htmlSecondText  = '<img src="/images/your_img_here2.png" alt="Example of our work" class="work-examples__item-img"><div class="work-examples__item-img--overlay"><a href="#" class="work-examples__item-link"><i class="far fa-eye"></i></a></div>';

document.getElementById("work-examples__item--afterClick").innerHTML = htmlFirstText;
document.getElementById("work-examples__item--afterClick2").innerHTML = htmlSecondText;
document.getElementById("work-examples__item--afterClick3").innerHTML = htmlFirstText;
document.getElementById("work-examples__item--afterClick4").innerHTML = htmlSecondText;
document.getElementById("work-examples__item--afterClick5").innerHTML = htmlFirstText;
document.getElementById("work-examples__item--afterClick6").innerHTML = htmlSecondText;
document.getElementById("work-examples__item--afterClick7").innerHTML = htmlFirstText;
document.getElementById("work-examples__item--afterClick8").innerHTML = htmlSecondText;};

Это должно выглядеть следующим образом (без undefined):

screenshotOfGoodVariant

Но это выглядит ужасно с undefined:

screenshotOfBadVariant

Я не могу предоставить вам html-код, потому что Stack Overflow предупреждает, что кода слишком много.

Вызов функции:

 const btnClick = (elementIsClicked, element) => {
  elementIsClicked = false;

  function clickHandler() {
    if (elementIsClicked = true) {
      showText();
      workExamplesAdding();
    } else {
      alert("Error");
    };
  };

  // grab a reference to your element
  element = document.getElementById('load-work-examples-btn'); 
  // associate the function above with the click event
  element.addEventListener('click', clickHandler); 
}

1. Привет, добро пожаловать в stack overflow. Вам следует научиться использовать инструменты F12 и как отлаживать ваш код JavaScript

2. Как вызвать workExamplesAdding функцию? Кажется, что вы не передаете никаких аргументов…

3. Если вы не передадите значение параметру, это будет undefined . Итак, вам просто нужно проверить, так ли это, и в этом случае установить его в пустую строку. Или вы можете добавить значение параметра по умолчанию .

Ответ №1:

Вау, проблема была только в «htmlFirstText = …», я сделал «htmlFirstText = …», и это работает!