Javascriptのボタンはonclickのが、私はJavaScriptに新たなんだと回答のどれもが、私は私の問題を解決することができなかったの前に私が尋ねてきた同様の質問を知っている

Question

最初のクリックでは動作しません。私がやろうとしている何

：オープンモーダル

4つのボタンが、タイトルのように、すでにボタンを二回クリックされるまで、そこには反応しません、と言います。ここで

は私の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; 
    }