时间戳

首页 > 解决方案 > 如何从不同的按钮调用函数？

javascript - 如何从不同的按钮调用函数？

问题描述

我试图在 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>

标签： javascriptswitch-statement

解决方案

在这里你有：

  1. 所有按钮的一个事件侦听器。
  2. 使用属性从按钮获取“值” id。另一种方法是使用数据属性（就像我使用 2ed 按钮所做的那样）。
  3. 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>

推荐阅读