如何从不同的按钮调用函数？答案

【问题标题】：How can I call a function from different buttons?如何从不同的按钮调用函数？
【发布时间】：2021-05-27 17:52:52
【问题描述】：

我试图在 switch 语句中放置具有相同功能的不同按钮。每个按钮都需要调用相同的函数，但开关参数不同。

    <button type="submit" onclick="myFunction()" class="dugme1" id="btnSQRT">
    SQRT    
    </button>
    <button type="submit" onclick="myFunction()" class="dugme1" id="btnSIN" style="margin-left: 
     100px;">
    SIN
    </button>
    <button type="submit" onclick="myFunction()" class="dugme1" id="btnCOS" style="margin-left: 
     100px;">
    COS
    </button>
    <button type="submit" onclick="myFunction()" class="dugme1" id="btnROUND" style="margin-left: 
    100px;">
    ROUND
    </button>

这里是JS代码，

    <script>
    function myFunction(){
    var x = prompt("Input number beteen 1 i 999");
    if(x > 0 && x < 1000){
    switch(x){
        case 0:
            document.getElementById("btnSQRT");
            document.write("nesta");
            break;
            case 1:
                document.getElementById("btnSIN");
                document.write("nesta");
                break;
                case 2:
                    document.getElementById("btnCOS");
                    document.write("nesta");
                    break;
                    case 3:
                        document.getElementById("btnROUND");
                        document.write("nesta");
                        break;
      }
      }
       else{
       alert("Thats not a wanted number");
      }
      }
      </script>

【问题讨论】：

你想用这些 switch 语句做什么？

标签： javascript switch-statement

【解决方案1】：

将您的所有 onclick="myFunction()" 更改为 onclick="myFunction(this)" - 这将允许您测试 myFunction 中的开关 - 在这种情况下，您希望打开按钮 ID 而不是提示值。

function myFunction(el){ // el will be the button that called the function
    var x = prompt("Input number between 1 i 999");
    if(x > 0 && x < 1000){
    switch(el.id){ // switching on the ID of the button which tells us which math to use
        case 'btnSQRT':
            alert('The square root is ' + Math.sqrt(x));
            break;

         .....

我不确定 'nesta' 和 document.write 是干什么用的，所以我在这里删除了它们。

【讨论】：

【解决方案2】：

您正在尝试在 INT 数字之间切换，并且“提示”返回一个 STRING。所以，它永远不会出现在任何 switch 语句中。为了解决这个问题，我只是在您的提示变量中添加了一个“parseInt()”。

我用 inner.HTML('nesta') 更改了“document.write('nesta')”，因此，它更改了按钮中的文本。但是，要更改按钮内的文本，您必须为每个按钮设置一个变量。

HTML：

<button type="submit" onclick="myFunction()" class="dugme1" id="btnSQRT">SQRT</button>
<button type="submit" onclick="myFunction()" class="dugme1" id="btnSIN" style="margin-left: 100px;">SIN</button>
<button type="submit" onclick="myFunction()" class="dugme1" id="btnCOS" style="margin-left: 100px;">COS</button>
<button type="submit" onclick="myFunction()" class="dugme1" id="btnROUND" style="margin-left: 100px;">ROUND</button>

JS：

function myFunction(){
    var x = prompt("Input number beteen 1 i 999");
    var x = parseInt(x);

    if(x > 0 && x < 1000) {
        switch(x){
            case 1:
                var nesta = document.getElementById("btnSQRT");
                nesta.innerHTML = 'nesta';
                break;
            case 2:
                var nesta =document.getElementById("btnSIN");
                nesta.innerHTML = 'nesta';
                break;
            case 3:                    
                var nesta = document.getElementById("btnCOS");
                nesta.innerHTML = 'nesta';
                break;
            case 4:
                var nesta =document.getElementById("btnROUND");
                nesta.innerHTML = 'nesta';
                break;
        }
    } else {
        alert("Thats not a wanted number");
    }
}

【讨论】：

【解决方案3】：

这里有：

所有按钮的一个事件监听器。
使用属性id 从按钮获取“值”。另一种方法是使用数据属性（就像我使用 2ed 按钮所做的那样）。
switch 语句用于处理下一步操作。

我还不清楚switch 语句是否是正确的方法。如果您有任何问题，请发表评论。

document.addEventListener('DOMContentLoaded', e => {
  let buttons = document.getElementById('buttons');
  let output = document.getElementById('output');
  
  buttons.addEventListener('click', e => {
    if (e.target.nodeName == 'BUTTON') {
      switch (e.target.id) {
        case 'btnSQRT':
          output.innerHTML = 'You clicked SQRT';
          break;
        case 'btnSIN':
          output.innerHTML = 'You clicked SIN';
          break;
        case 'btnCOS':
          output.innerHTML = 'You clicked COS';
          break;
        case 'btnROUND':
          output.innerHTML = 'You clicked ROUND';
          break;
      }
    }
  });
});

div#buttons {
  display: flex;
  justify-content: space-between;
}

<div id="buttons">
  <button id="btnSQRT">SQRT</button>
  <button data-func="SIN" id="btnSIN">SIN</button>
  <button id="btnCOS">COS</button>
  <button id="btnROUND">ROUND</button>
</div>
<div id="output"></div>

【讨论】：