Javascript按鈕onclick在首次點擊時不起作用

Question

我知道以前曾問過類似的問題，但是我是Java語言的新手，沒有一個答案可以幫助我解決問題。

我正在嘗試做的事情：四個打開模態的按鈕

但是就像標題已經說過的那樣，在兩次單擊按鈕之前，沒有任何反應。

這是我的html：

<a id="myBtn" class="btn" href="javascript:void();" onclick="termsFct(this)">View full terms</a>
<div id="myModal" class="modal">
<div class="modal-content">
<span id="x" class="close">&times;</span>
<h1 class="contract">sample heading</h1>
<h2 class="contract">sample heading</h2>
<p class="fullContract">sample text</p>
</div>
</div>
</td>
<a id="myBtn2" class="btn" href="javascript:void();" onclick="termsFct(this)">View full terms</a>
<div id="myModal2" class="modal">
<div class="modal-content">
<span id="x2" class="close">&times;</span>
<h1 class="contract">sample heading</h1>
<h2 class="sample heading</h2>
<p class="fullContract">sample text</p>
</div>
</div>
</td>
<a id="myBtn3" class="btn" href="javascript:void();" onclick="termsFct(this)">View full terms</a>
<div id="myModal3" class="modal">
<div class="modal-content">
<span id="x3" class="close">&times;</span>
<h1 class="contract">sample heading</h1>
<h2 class="contract">sample heading</h2>
<p class="fullContract">sample text</p>
</div>
</div>
</td>
<a id="myBtn4" class="btn" href="javascript:void();" onclick="termsFct(this)">View full terms</a>
<div id="myModal4" class="modal">
<div class="modal-content">
<span id="x4" class="close">&times;</span>
<h1 class="contract">sample heading</h1>
<h2 class="contract">sample heading</h2>
<p class="fullContract">sample text</p>
</div>
</div>
</td>

這是Javascript：

/*------------------------modal------------------------*/
function termsFct(buttonElement) {
var modal = document.getElementById('myModal');
var modal2 = document.getElementById('myModal2');
var modal3 = document.getElementById('myModal3');
var modal4 = document.getElementById('myModal4');

var btn = document.getElementById("myBtn");
var btn2 = document.getElementById("myBtn2");
var btn3 = document.getElementById("myBtn3");
var btn4 = document.getElementById("myBtn4");

var span = document.getElementById("x");
var span2 = document.getElementById("x2");
var span3 = document.getElementById("x3");
var span4 = document.getElementById("x4");
/*------------------------contract visibility------------------------*/
btn.onclick = function() {
modal.style.display = "block";
}
btn2.onclick = function() {
modal2.style.display = "block";
}
btn3.onclick = function() {
modal3.style.display = "block";
}
btn4.onclick = function() {
modal4.style.display = "block";
}
/*------------------------close if x was clicked------------------------*/
span.onclick = function() {
modal.style.display = "none";
}
span2.onclick = function() {
modal2.style.display = "none";
}
span3.onclick = function() {
modal3.style.display = "none";
}
span4.onclick = function() {
modal4.style.display = "none";
}
/*------------------------close if clicked outside------------------------*/
window.onclick = function(event) {
if (event.target == modal) {
    modal.scrollTop = 0;
    modal.style.display = "none";
}
else if (event.target == modal2) {
    modal2.scrollTop = 0;
    modal2.style.display = "none";
}
else if (event.target == modal3) {
    modal3.scrollTop = 0;
    modal3.style.display = "none";
}
else if (event.target == modal4) {
    modal4.scrollTop = 0;
    modal4.style.display = "none";
}
}
}

如果有人可以幫助我解決這個問題，甚至更好地幫助我縮短Javascript，我將不勝感激。

預先感謝肯

Answer 1

單擊該按鈕時，已經觸發termsFct方法。 因此無需在此方法內使用onclick。

用下面的代碼替換btn.onclick部分，並添加更多案例。

Switch(buttonelement.id){
    Case btn1:
           Modal.style.display="block";
    Break;
    }