如何使用 JavaScript 在 if 语句中使用按钮的 ID

how to use id of a button in if statement using javascript

本文关键字:按钮 ID 语句 何使用 JavaScript if      更新时间:2023-09-26

我是Javascript的初学者,正在尝试执行算术函数。

这是我下面的代码:

脚本

<script language="javascript" type="text/javascript">
   function func(a,b) 
     {
        var a = document.getElementById("a");
        var b = document.getElementById("b");
        if (document.getElementById("btnadd").Text == 'Add') 
          {
              var c = a + b;
              document.getElementById("rslt").innerHTML =c;           
          }    
     }
</script>

.aspx

<asp:Button ID="btnadd" Text="Add" runat="server" OnClientClick="func(txtn1,txtn2)" />
<p id="rslt"></p>

我的想法是,当我单击说"添加">按钮时,两个文本框的值应该传递给脚本并分配给两个变量。

使用这两个变量,应该完成所有算术(加,子,除,穆尔(。

您还可以使用 this 传递单击的按钮。这样,您就知道单击的按钮的文本。由于您使用的是服务器端按钮,因此请确保包含 JavaScript 调用中的return false;,以防止它回发并清除您的<p>标记。

<asp:Button ID="btnadd" runat="server" Text="Add"
    OnClientClick="func('txtn1', 'txtn2', this); return false;" />
function func(a, b, btn) {
    var txtn1 = document.getElementById(a);
    var txtn2 = document.getElementById(b);
    var rslt = document.getElementById('rslt');
    if(btn.value == 'Add')
        rslt.innerHTML = parseInt(txtn1.value) + parseInt(txtn2.value);
}

根据这里:

您必须使用匿名函数/处理程序来响应此类用户交互,而无需重新加载页面。另请查看jquery(http://api.jquery.com/click/(,它为您提供了更简单的API来编写这些内容。

<script language="javascript" type="text/javascript">
    function func(a,b) {
        var a = document.getElementById("a");
        var b = document.getElementById("b");
        var btn = document.getElementsById("btnadd"); 
        btn.onclick = function() { 
          var c = a + b;
          // alert("Result = " + c ); 
          document.getElementById("rslt").innerHTML =c;     
        }
    }
</script>

希望您的要求是使用文本框中的两个数字执行算术运算。为此,您无需将text boxes作为参数传递给脚本,因为它使用 document.getElementById .直接访问脚本中的textbox,如下所示:

<head><script>
      function myFunction(a) {
        var y = document.getElementById("txt1").value;
        var z = document.getElementById("txt2").value;
        var x;
        if(a==1)
         x = +y + +z;
        else if(a==2)
         x=+y - +z;
         else
         x=0;
        document.getElementById("demo").innerHTML = x;
      }
    </script></head>
<body>
    <p>Click the button to calculate x.</p>       
    <br/>
    <br/>Enter first number:
    <input type="text" id="txt1" name="text1">Enter second number:
    <input type="text" id="txt2" name="text2">
     <button onclick="myFunction(1)">Addition</button>
      <button onclick="myFunction(2)">Subtraction</button>
    <p id="demo"></p>        
  </body>

上面的代码将根据按钮单击执行加法和减法

function func(a,b) {
        var a,b; 
        a=$("#a").val();
        b=$("#b").val();
        if ($("#btnAdd").val() == 'Add') {    
             $("#a").val(+(a) + +(b));
        }
    }

并将按钮值设置为添加

或者,如果您想减少代码,请使用此代码

       if ($("#btnAdd").val() == 'Add') {    
             $("#a").val( +($("#a").val()) + +($("#b").val() ));
        }