маленькая ошибка с функцией showDiv js

Question

Мне нужна помощь для небольшой ошибки с JavaScript.Я новичок с JS, поэтому я не знаю, как это сделать ...

Я бы хотел показывать различное содержимое на одной странице, нажимая на разные кнопки.Я использовал функцию showDiv (), но все кнопки используют одну и ту же функцию, так что она не работает, и я не знаю, как приписать функцию каждой из них.

Вот мой код: https://codepen.io/pjberot/pen/RyOJBO

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";
}

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

Большое спасибо за вашу помощь!

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, чтобы получить хороший обзор этого.