Question

我正在尝试将click事件添加到具有动态更改ID的按钮元素。然而，为了实际显示弹出窗口，我必须单击按钮两次...我知道它发生了这样，因为我在点击事件时做错了。但我无法弄清楚如何解决这个问题。你能？我把头发拉过来......

非常感谢

// Get the modal
function getPopup(venue_id){
	var modal = document.getElementById('myModal');
	var btn = document.getElementById("myBtn"+venue_id);
	var venue = document.getElementById("title"+venue_id).innerHTML;
	document.getElementById("eventTitle").innerHTML = "<h3>"+venue+"</h3>";
	var span = document.getElementsByClassName("close")[0];



	btn.onclick = function() {
		modal.style.display = "block";
	}
	span.onclick = function() {
		modal.style.display = "none";
	}
	window.onclick = function(event) {
		if (event.target == modal) {
			modal.style.display = "none";
		}
	}
}


function sentPopup(){
	document.getElementById('myModal').style.display ="none";
	var modal = document.getElementById('thanksMessage');
	var span = document.getElementById("close");
	modal.style.display = "block";
	span.onclick = function() {
		modal.style.display = "none";
	}
	window.onclick = function(event) {
		if (event.target == modal) {
			modal.style.display = "none";
		}
	}
}

<?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

Saskia，你需要点击两次的原因是：

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

在getPopUp函数内部，只有在单击按钮时才会调用该函数。因此，当您单击一次时，它会将onclick函数设置为按钮。

您需要更改此行以立即执行操作，因此在getPopUp中，您需要执行以下操作：

modal.style.display = "block";

没有btn.onclick。

对于sentPopUp中的其他按钮也是如此，因为你会遇到同样的问题。

我建议您在HTML中删除内联的onclick属性，并使用不引人注目的javascript格式来避免错误。

JavaScript onClick：我必须单击两次才能显示模态

1 个答案: