Question

我需要一些关于javascript小错误的帮助。我是js的菜鸟，所以我不知道怎么做......

我想通过点击不同的按钮在同一页面上显示不同的内容。我已经使用了showDiv（）函数，但是所有的butons都使用相同的函数，因此不起作用，我不知道如何将函数归属于每个函数。

这是我的代码：https://codepen.io/pjberot/pen/RyOJBO

＆＃13;

function showDiv() {
document.getElementById('txt1').style.display = "block";
document.getElementById('nxt1').style.display = "inline";
}

function showDiv() {
document.getElementById('txt2').style.display = "block";
document.getElementById('nxt2').style.display = "inline";
}

function showDiv() {
document.getElementById('txt3').style.display = "block";
document.getElementById('nxt3').style.display = "inline";
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="button" name="answer" value="BOUTON 1" onclick="showDiv()" class="btninfo" /><div id="txt1"  style="display:none;" class="answer_list slideDown" >
<br>
Le texte 1 ici
</div>
<div class="nxt" id="nxt1" style="display:none;"> NEXT (1) </div> 

<input type="button" name="answer" value="BOUTON 2" onclick="showDiv()" class="btninfo" /><div id="txt2"  style="display:none;" class="answer_list slideDown" >
<br>
Le texte 2 ici
</div>
<div class="nxt" id="nxt2" style="display:none;"> NEXT (2) </div> 

<input type="button" name="answer" value="BOUTON 3" onclick="showDiv()" class="btninfo" /><div id="txt3"  style="display:none;" class="answer_list slideDown" >
<br>
Le texte 3 ici
</div>
<div class="nxt" id="nxt3" style="display:none;"> NEXT (3) </div>

＆＃13;

非常感谢你的帮助！

Answer 1

当您声明具有相同名称的多个函数时，使用新的函数覆盖上一个声明。因此，当您声明showDiv三次时，只有最后一个有效：）

最简单（尽管不是最干净）的方法是给你的函数命名：

function showDiv1() {
document.getElementById('txt1').style.display = "block";
document.getElementById('nxt1').style.display = "inline";
}

function showDiv2() {
document.getElementById('txt2').style.display = "block";
document.getElementById('nxt2').style.display = "inline";
}

function showDiv3() {
document.getElementById('txt3').style.display = "block";
document.getElementById('nxt3').style.display = "inline";
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="button" name="answer" value="BOUTON 1" onclick="showDiv1()" class="btninfo" /><div id="txt1"  style="display:none;" class="answer_list slideDown" >
<br>
Le texte 1 ici
</div>
<div class="nxt" id="nxt1" style="display:none;"> NEXT (1) </div> 

<input type="button" name="answer" value="BOUTON 2" onclick="showDiv2()" class="btninfo" /><div id="txt2"  style="display:none;" class="answer_list slideDown" >
<br>
Le texte 2 ici
</div>
<div class="nxt" id="nxt2" style="display:none;"> NEXT (2) </div> 

<input type="button" name="answer" value="BOUTON 3" onclick="showDiv3()" class="btninfo" /><div id="txt3"  style="display:none;" class="answer_list slideDown" >
<br>
Le texte 3 ici
</div>
<div class="nxt" id="nxt3" style="display:none;"> NEXT (3) </div>

由于函数本质上非常相似，您可以通过使用函数参数使其更简洁

function showDiv(blockId, inlineId) {
document.getElementById(blockId).style.display = "block";
document.getElementById(inlineId).style.display = "inline";
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="button" name="answer" value="BOUTON 1" onclick="showDiv('txt1','nxt1')" class="btninfo" /><div id="txt1"  style="display:none;" class="answer_list slideDown" >
<br>
Le texte 1 ici
</div>
<div class="nxt" id="nxt1" style="display:none;"> NEXT (1) </div> 

<input type="button" name="answer" value="BOUTON 2" onclick="showDiv('txt2','nxt2')" class="btninfo" /><div id="txt2"  style="display:none;" class="answer_list slideDown" >
<br>
Le texte 2 ici
</div>
<div class="nxt" id="nxt2" style="display:none;"> NEXT (2) </div> 

<input type="button" name="answer" value="BOUTON 3" onclick="showDiv('txt3','nxt3')" class="btninfo" /><div id="txt3"  style="display:none;" class="answer_list slideDown" >
<br>
Le texte 3 ici
</div>
<div class="nxt" id="nxt3" style="display:none;"> NEXT (3) </div>

还有其他更好的方法来处理Javascript中的事件（例如点击）..我建议您阅读MDN上的Introduction to Events页面，以便对此有一个很好的概述。

showDiv函数js的小bug

1 个答案: