单个表单按钮错误地触发两个事件侦听器和警报框

Single form button incorrectly triggering two event listeners and alert boxes

本文关键字：事件 两个 侦听器 错误 按钮 表单 单个      更新时间：2023-09-26

最初我设置了多个按钮，如下所示:

<button id="plus" type="button" onclick=assignVarAddition()>+</button>
<button id="minus"  type="button" onclick=assignVarSubtraction()>-</button>

这些按钮链接到单独的javascript函数，其中变量firstNumb和secondNumb是从表单输入生成的。如果每个按钮都链接到它自己的函数，alert()只会被调用一次，并带有求和的结果。函数如下

function assignVarAddition() {
var firstNumb = +document.getElementById("Numb1").value;
var secondNumb = +document.getElementById("Numb2").value;
var total = firstNumb + secondNumb;
alert("You added " + firstNumb + " and " + secondNumb +  ". The total of these two numbers is " + total);
}
function assignVarSubtraction() {
var firstNumb = +document.getElementById("Numb1").value;
var secondNumb = +document.getElementById("Numb2").value;
var total = firstNumb - secondNumb;
alert("You subtracted " + secondNumb + " from " +  firstNumb + " and got " + total);
}

我试图清理和缩短js成一个函数，所以现在我试图在一个函数中使用事件监听器，其中一个单独的事件事件监听器与单独的alert()设置为每个按钮的单击。但当我点击其中一个时，两个警报都会被触发，分别是加法和减法，总和一个接一个地显示在不同的警报框中。现在按钮和功能设置如下:

<button id="plus" type="button" onclick=assignVarAddition()>+</button>
<button id="minus"  type="button" onclick=assignVarSubtraction()>-</button>
function assignVarCalc() {
var firstNumb = +document.getElementById("Numb1").value;
var secondNumb = +document.getElementById("Numb2").value;
document.getElementById("plus").addEventListener("click", alert(firstNumb+secondNumb));
document.getElementById("minus").addEventListener("click", alert(firstNumb-secondNumb));
}

我需要做些什么来阻止两个警报同时被调用-以便当"+"按钮被按下时，警报框中只显示Numb1和Numb2的添加?不是加法，然后是减法在它自己的警报。

请注意，我为html和javascript设置了单独的文件，并在html文件中设置了标签

您可以共享相同的函数，每次发送不同的参数'+'或'-'

function assignVarCalc(operation) {
  var firstNumb = +document.getElementById("Numb1").value;
  var secondNumb = +document.getElementById("Numb2").value;
  
  if(operation=='+'){
    alert(firstNumb + secondNumb);
  } else{ 
    alert(firstNumb - secondNumb);
  }
}
<button id="plus" type="button" onclick="assignVarCalc('+')">+</button>
<button id="minus"  type="button" onclick="assignVarCalc('-')">-</button>
<input id="Numb1">
<input id="Numb2">

您还没有删除html中的onclick属性。以及你打算如何触发对assignVarCalc()方法的调用。

您的问题的一个可能的解决方案张贴在这里:https://jsfiddle.net/9f7q8d9u/

document.getElementById("plus").addEventListener("click",
    function() { assignVarCalc('plus'); }
);
document.getElementById("minus").addEventListener("click",
     function() { assignVarCalc('minus');}
);
function assignVarCalc(operation) {
  var firstNumb = +document.getElementById("Numb1").value;
  var secondNumb = +document.getElementById("Numb2").value; 
  if(operation === 'plus') {
   return alert(firstNumb+secondNumb);
  }
  if(operation === 'minus') {
   return alert(firstNumb-secondNumb);
  }
}

我已经复制了您的代码，并将其放入我的HTML文件中。我只是提醒了"测试"这个词来测试这种情况。看看我的代码:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="Style.css"/>
</head>
<body>
    <button id="plus" type="button" onclick=assignVarAddition()>+</button>
<button id="minus"  type="button" onclick=assignVarSubtraction()>-</button>
<script>
    
document.getElementById("plus").addEventListener("click", function(){
    alert("Hello World");
});
document.getElementById("minus").addEventListener("click", function(){
    alert("Hello World");
});
    
</script>
</body>
</html>

如您所见，我删除了警报周围的功能。当我这样做时，它对我有效，看看这个例子。我希望这是有效的，这是你正在寻找的。如果它有效，请告诉我，我很乐意听到。

相关文章：