同一页面中两个showDiv()函数的区分与绑定问题

嘿，这个问题太常见啦！你现在碰到的是JavaScript同名函数覆盖的问题——当你定义两个同名的showDiv()函数时，后面的函数会直接替换掉前面的，所以不管你点哪个按钮，都会执行第二个函数，只会显示捐赠表单。

这里有两种简单的解决思路，你可以按需选择：

方法1：给函数起不同的名字（最直观） #

直接把两个函数改成不同的名称，然后让对应的按钮调用各自的函数就行：

修改后的JavaScript代码 #

function showBuyForm() {
  document.getElementById('shirt-form').style.display = "block";
}

function showDonateForm() {
  document.getElementById('donate-form').style.display = "block";
}

修改后的HTML代码 #

<input class="buy" type="button" name="answer" value="Buy" onclick="showBuyForm()" />
<div id="shirt-form" style="display:none;" class="answer_list" > BUY </div>
<br><br>
<input class="donate" type="button" name="answer" value="Donate" onclick="showDonateForm()" />
<div id="donate-form" style="display:none;" class="answer_list" > DONATE </div>

CSS部分不需要修改，保持你原来的代码就好。

方法2：给函数传递参数（更简洁优雅） #

只写一个函数，通过传入不同的表单ID来控制显示对应的div，这样代码更精简，也方便后续扩展：

修改后的JavaScript代码 #

function showDiv(formId) {
  document.getElementById(formId).style.display = "block";
}

修改后的HTML代码 #

<input class="buy" type="button" name="answer" value="Buy" onclick="showDiv('shirt-form')" />
<div id="shirt-form" style="display:none;" class="answer_list" > BUY </div>
<br><br>
<input class="donate" type="button" name="answer" value="Donate" onclick="showDiv('donate-form')" />
<div id="donate-form" style="display:none;" class="answer_list" > DONATE </div>

这种方法的好处是，如果以后你要加更多按钮和表单，只需要在调用时传入新的ID就行，不用重复写新函数。

两种方法都能解决你的问题，选哪种看你自己的习惯啦～

内容的提问来源于stack exchange，提问作者Sp3ktor