简体   繁体   English

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

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

I am a beginner to Javascript and am trying to perform arithmetic functions. 我是Java语言的初学者,正在尝试执行算术功能。

Here is my code below: 这是我的代码如下:

script 脚本

<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 aspx

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

My idea is, when I click say 'add' button the value of two textbox should be passed to the script and are assigned to two variables. 我的想法是,当我单击“添加”按钮时,应将两个文本框的值传递给脚本并分配给两个变量。

With those two variables all arithmetic (add,sub,div,mul) should be done. 使用这两个变量,应完成所有算术运算(add,sub,div,mul)。

According to here : 根据这里

You have to use anonymous functions/handlers to react on such user-interactions without reloading the page. 您必须使用匿名函数/处理程序对此类用户交互做出反应,而无需重新加载页面。 Also look at jquery ( http://api.jquery.com/click/ ) which gives you a simpler api to write those things. 还要看一下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>

What you could do is also pass the button that was clicked, using this . 您还可以使用this传递通过单击的按钮。 That way you know the text of the button that was clicked. 这样,您就知道单击的按钮的文本。 And since you are using a server side button, be sure to include return false; 并且由于您使用的是服务器端按钮,因此请确保包括return false; from your JavaScript call to prevent it from posting back and clearing your <p> tag. 从您的JavaScript调用中阻止它回发并清除您的<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);
}

Hope that your requirement is to perform arithmetic operations with two numbers from the text boxes.For that you need not pass text boxes as parameters to the script since it uses document.getElementById . 希望您的要求是使用text boxes两个数字执行算术运算 。为此,您不需要将text boxes作为参数传递给脚本,因为脚本使用document.getElementById directly access the textbox inside the script as follows: 直接访问脚本内的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>

The above code will perform addition and subtraction based on button click 上面的代码将基于按钮的点击进行加减运算

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

    }

And Set button value to Add 并将按钮值设置为Add

Or if you want to reduce your code then use this code 或者,如果您想减少代码,请使用此代码

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM