如何使这些按钮正常工作

时间:2018-05-03 14:34:21

标签: javascript

我希望我的HTML按钮每次点击都会添加一个,但由于某些我无法找到的原因,按钮都会添加到框....为什么?

<h3>Did this Help?</h3>
<br>
<form>
   <input type="text" id="Yes" value="0"/>
   <input type="button" onclick="incrementValue()" value="Yes" />
</form>

<br>
<br>

<form>
   <input type="text" id="No" value="0"/>
   <input type="button" onclick="incrementValue()" value="No" />
</form>

<script>


function incrementValue(yes)
{
    var value = parseInt(document.getElementById('Yes').value, 10);
    value = isNaN(value) ? 0 : value;
    value++;
    document.getElementById('Yes').value = value;
}

function incrementValue(No)
{
    var value = parseInt(document.getElementById('No').value, 10);
    value = isNaN(value) ? 0 : value;
    value++;
    document.getElementById('No').value = value;
}

2 个答案:

答案 0 :(得分:1)

  

按钮都会添加到框....为什么?

这是因为函数名称相同,第二个函数覆盖了第一个函数。

您不需要两次编写相同的功能。只需将id传递给button中的函数,如下所示:

function incrementValue(id){
    var value = parseInt(document.getElementById(id).value);
    value = isNaN(value) ? 0 : value;
    value++;
    document.getElementById(id).value = value;
}
<h3>Did this Help?</h3>
<br>
<form>
   <input type="text" id="Yes" value="0"/>
   <input type="button" onclick="incrementValue('Yes')" value="Yes" />
</form>

<br>
<br>

<form>
   <input type="text" id="No" value="0"/>
   <input type="button" onclick="incrementValue('No')" value="No" />
</form>

答案 1 :(得分:1)

事实是你使用的功能是incrementValue的两倍,所以它将使用最后定义的一个:更新“No&#39;字段。

我更新了你的函数,以便它接收一个参数:按钮的id。所以你可以用它来增加正确的值。

&#13;
&#13;
function incrementValue(buttonId)
{
    var value = parseInt(document.getElementById(buttonId).value, 10);
    value = isNaN(value) ? 0 : value;
    value++;
    document.getElementById(buttonId).value = value;
}
&#13;
<h3>Did this Help?</h3>
<br>
<form>
   <input type="text" id="Yes" value="0"/>
   <input type="button" onclick="incrementValue('Yes')" value="Yes" />
</form>

<br>
<br>

<form>
   <input type="text" id="No" value="0"/>
   <input type="button" onclick="incrementValue('No')" value="No" />
</form>
&#13;
&#13;
&#13;

相关问题