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

Question

我知道以前有類似的問題，但我是Javascript新手，沒有任何答案可以幫助我解決問題。

我想要做的事： 四個按鈕可打開模態

但像標題已經說明了，有沒有反應，直到按鈕已被點擊了兩次。

這裏是我的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; 
    }