JavaScript的onClick：我必须点击两次出现模式

Question

我想添加一个点击事件到一个动态变化的ID按钮元素。然而，要真正让弹出窗口出现，我必须点击两次按钮......我知道这是这样发生的，因为我在做点击事件时出错。但我无法弄清楚如何解决这个问题。 你可以吗？我出去拉我的头发在这个...

感谢这么多提前

// Get the modal 
 
function getPopup(venue_id){ 
 
\t var modal = document.getElementById('myModal'); 
 
\t var btn = document.getElementById("myBtn"+venue_id); 
 
\t var venue = document.getElementById("title"+venue_id).innerHTML; 
 
\t document.getElementById("eventTitle").innerHTML = "<h3>"+venue+"</h3>"; 
 
\t var span = document.getElementsByClassName("close")[0]; 
 

 

 

 
\t btn.onclick = function() { 
 
\t \t modal.style.display = "block"; 
 
\t } 
 
\t span.onclick = function() { 
 
\t \t modal.style.display = "none"; 
 
\t } 
 
\t window.onclick = function(event) { 
 
\t \t if (event.target == modal) { 
 
\t \t \t modal.style.display = "none"; 
 
\t \t } 
 
\t } 
 
} 
 

 

 
function sentPopup(){ 
 
\t document.getElementById('myModal').style.display ="none"; 
 
\t var modal = document.getElementById('thanksMessage'); 
 
\t var span = document.getElementById("close"); 
 
\t modal.style.display = "block"; 
 
\t span.onclick = function() { 
 
\t \t modal.style.display = "none"; 
 
\t } 
 
\t window.onclick = function(event) { 
 
\t \t if (event.target == modal) { 
 
\t \t \t modal.style.display = "none"; 
 
\t \t } 
 
\t } 
 
}

<?php /* $venue_id is being populated by a php function which doesnt matter for this click issue to solve */ 
 
<button class="btn" id="myBtn'.$venue_id.'" onclick="getPopup('.$venue_id.')">Unverbindlich anfragen</button> 
 

 
<div id="myModal" class="modal"> 
 
<div class="modal-content"> 
 
    <span class="close">x</span> 
 
    <p class="venuePopupTitle" id="eventTitle"></p> 
 
    <form>my form</form> 
 
</div> 
 
</div> 
 
?>

Answer 1

萨斯基亚，您需要点击两次的原因，是这样的：

btn.onclick = function() { 
    modal.style.display = "block"; 
} 

在getPopUp函数内部，它只在单击按钮时被调用。所以当你点击一次，只有这样，它会将onclick函数设置为按钮。

您需要更改该行立即执行的操作，所以里面getPopUp，你需要做的：

modal.style.display = "block"; 

没有btn.onclick。

sentPopUp中的其他按钮相同，因为您将遇到同样的问题。

我建议你在HTML中删除内联onclick属性，并使用不显眼的javascript风格来避免错误。