Блог

Я столкнулся с проблемой в своем проекте для всплывающего окна, которое я создаю. Цель состоит в том, чтобы создать функцию, которая вызовет всплывающее окно html. Эта функция Javascript принимает 5 аргументов: текст, текст кнопки 1, текст кнопки 2, действие кнопки 1 и действие кнопки 2. Для действий с кнопками я хочу передавать функции для аргументов, хотя, хоть убей, я не могу понять, почему это не работает. Вот весь код.

Index.html

 <div class="overlay" id = "popup2" style = "display: none;">
    <div class = "popup">
        <div id = "popup_text_box">
            <h id = "popup_text2"></h>
        </div><br><br>
        <div class = "btn" id = "popup_btn1" style="background-color:#D90505;"></div><br><br>
        <div class = "btn" id = "popup_btn2" style="background-color:#BD51FF;" ></div><br><br>
    </div>
</div>
 

Play.js

 function popUp2(text, btn1, btn2, action1, action2){
        document.getElementById("popup2").style.display = "block";
        document.getElementById("popup_text2").innerHTML = text;
        document.getElementById("popup_btn1").innerHTML = btn1;    
        document.getElementById("popup_btn2").innerHTML = btn2;  
        document.getElementById("popup_btn1").onclick = action1();    
        document.getElementById("popup_btn2").onclick = action2();    
}

popUp2("You have been invited to join this club", "Accept", "Decline", joinClub, closePopUp);
 

Аргументы joinClub и closePopUp на самом деле являются аргументами. Но, к сожалению, они вообще не работают. Кроме того, я удалил функции, и всплывающее окно работало нормально, поэтому я знаю, что проблема заключается в том, что функции передаются в качестве аргументов. Любое решение было бы потрясающим, потому что этот небольшой сбой мешает мне завершить мой проект. Спасибо!

Удалите () из action1 и action2 в вашей функции. Вы хотите назначить обработчику щелчка ссылку на функцию, а не возвращаемое значение функции.

Вот рабочий пример:

 function popUp2(text, btn1, btn2, action1, action2) {
  document.getElementById("popup2").style.display = "block";
  document.getElementById("popup_text2").innerHTML = text;
  document.getElementById("popup_btn1").innerHTML = btn1;
  document.getElementById("popup_btn2").innerHTML = btn2;
  document.getElementById("popup_btn1").onclick = action1;
  document.getElementById("popup_btn2").onclick = action2;
}

let joinClub = function() {
  console.log("joinClub called");
}

let closePopUp = function() {
  console.log("closePopUp called");
}

popUp2("You have been invited to join this club", "Accept", "Decline", joinClub, closePopUp); 

 <div class="overlay" id="popup2" style="display: none;">
  <div class="popup">
    <div id="popup_text_box">
      <h id="popup_text2"></h>
    </div><br><br>
    <div class="btn" id="popup_btn1" style="background-color:#D90505;"></div><br><br>
    <div class="btn" id="popup_btn2" style="background-color:#BD51FF;"></div><br><br>
  </div>
</div> 

 function popUp2(text, btn1, btn2, action1, action2){
        document.getElementById("popup2").style.display = "block";
        document.getElementById("popup_text2").innerHTML = text;
        document.getElementById("popup_btn1").innerHTML = btn1;    
        document.getElementById("popup_btn2").innerHTML = btn2;  
        document.getElementById("popup_btn1").onclick = action1;    
        document.getElementById("popup_btn2").onclick = action2;    
}
 

Назначение onclick с помощью action2() заставляет его запускать функцию и закрывает всплывающее окно при присвоении всплывающим кнопкам null, поскольку они являются недействительными функциями.