Question

我刚刚开始使用Javascript，我正试图弄清楚如何在同一页面上区分两个showDiv（）函数。

我希望能够点击“购买”按钮并显示一个div或点击“捐赠”按钮并显示另一个div。总体目标是在单击“购买”按钮时显示购买产品的表单，但单击“捐赠”按钮时将显示捐赠表单。

据我所知，目前它只是运行第二个函数而忽略了第一个函数，那么将按钮链接到各自函数的最佳方法是什么，这样两个函数都能正常工作？

以下是代码：

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

input.buy {
  color: white; 
  background:#a50b0b;
  padding: 10px 30px 10px 30px; 
  font-family: 'Cairo',Helvetica,Arial,Lucida,sans-serif;
  font-size: 30px; 
  box-shadow: none;
  border: none;
}

input.buy:hover {
  background-color: rgb(74, 109, 130) !important;
}

input.donate {
  color: white; 
  background:#a50b0b;
  padding: 10px 30px 10px 30px; 
  font-family: 'Cairo',Helvetica,Arial,Lucida,sans-serif;
  font-size: 30px; 
  box-shadow: none;
  border: none;
}

input.donate:hover {
  background-color: rgb(74, 109, 130) !important;
}

<input class="buy" type="button" name="answer" value="Buy" onclick="showDiv()" />
<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()" />
<div id="donate-form"  style="display:none;" class="answer_list" > DONATE </div>

谢谢！

Answer 1

另一个解决方案是保留一个函数并将元素id作为参数传递

＆＃13;

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

＆＃13;

input.buy {
  color: white; 
  background:#a50b0b;
  padding: 10px 30px 10px 30px; 
  font-family: 'Cairo',Helvetica,Arial,Lucida,sans-serif;
  font-size: 30px; 
  box-shadow: none;
  border: none;
}

input.buy:hover {
  background-color: rgb(74, 109, 130) !important;
}

input.donate {
  color: white; 
  background:#a50b0b;
  padding: 10px 30px 10px 30px; 
  font-family: 'Cairo',Helvetica,Arial,Lucida,sans-serif;
  font-size: 30px; 
  box-shadow: none;
  border: none;
}

input.donate:hover {
  background-color: rgb(74, 109, 130) !important;
}

＆＃13;

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

＆＃13;

Answer 2

您不需要多个功能。只需将相应的id传递给函数调用：

＆＃13;

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

＆＃13;

input.buy {
  color: white; 
  background:#a50b0b;
  padding: 10px 30px 10px 30px; 
  font-family: 'Cairo',Helvetica,Arial,Lucida,sans-serif;
  font-size: 30px; 
  box-shadow: none;
  border: none;
}

input.buy:hover {
  background-color: rgb(74, 109, 130) !important;
}

input.donate {
  color: white; 
  background:#a50b0b;
  padding: 10px 30px 10px 30px; 
  font-family: 'Cairo',Helvetica,Arial,Lucida,sans-serif;
  font-size: 30px; 
  box-shadow: none;
  border: none;
}

input.donate:hover {
  background-color: rgb(74, 109, 130) !important;
}

＆＃13;

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

＆＃13;

Answer 3

更改其中一个函数名称，它们的名称应不同，因此底部函数名称不会覆盖顶部函数定义。

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

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

Answer 4

您必须提供两个不同的功能名称。

＆＃13;

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

＆＃13;

input.buy {
  color: white; 
  background:#a50b0b;
  padding: 10px 30px 10px 30px; 
  font-family: 'Cairo',Helvetica,Arial,Lucida,sans-serif;
  font-size: 30px; 
  box-shadow: none;
  border: none;
}

input.buy:hover {
  background-color: rgb(74, 109, 130) !important;
}

input.donate {
  color: white; 
  background:#a50b0b;
  padding: 10px 30px 10px 30px; 
  font-family: 'Cairo',Helvetica,Arial,Lucida,sans-serif;
  font-size: 30px; 
  box-shadow: none;
  border: none;
}

input.donate:hover {
  background-color: rgb(74, 109, 130) !important;
}

＆＃13;

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

＆＃13;

在同一页面上运行两个showDiv（）函数

4 个答案: