Question

我知道之前已经问过类似的问题，但我是Javascript的新手，没有一个答案可以帮助我解决我的问题。

我正在尝试做什么：打开模态的四个按钮

但是就像标题已经说过的那样，在点击按钮两次之前没有任何反应。

这是我的html：

>>> xpms1 = xpms; xpms2 = xpms;
>>> xpms1.next()
13
>>> xpms1.next()
17
>>> xpms1.next()
19
>>> xpms2.next()
13

这是Javascript：

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

提前谢谢肯

Answer 1

单击按钮时已触发termsFct方法。所以不需要在这个方法中使用onclick。

使用以下代码替换btn.onclick部分并添加更多案例。

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

Javascript按钮onclick在第一次单击时不起作用

1 个答案: