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

Question

I am a beginner to Javascript and am trying to perform arithmetic functions.

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

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

j.f. · Accepted Answer · 2014-08-18 13:19:24Z

0

What you could do is also pass the button that was clicked, using 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; from your JavaScript call to prevent it from posting back and clearing your <p> tag.

<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);
}

answered Aug 18, 2014 at 13:19

j.f.

3,9492 gold badges33 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 11:57:12Z

0

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.

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

edited May 23, 2017 at 11:57

CommunityBot

11 silver badge

answered Aug 18, 2014 at 10:49

Peter Ittner

5512 silver badges13 bronze badges

1 Comment

senthil Over a year ago

i cant view the output in the window. could please help in that. i want to print output in the <p> tag in aspx.

user3947014 · Accepted Answer · 2014-08-19 05:47:58Z

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. directly access the textbox inside the script as follows:

<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

Kaushal Khamar · Accepted Answer · 2014-08-19 06:59:45Z

0

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

Or if you want to reduce your code then use this code

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

answered Aug 19, 2014 at 6:59

Kaushal Khamar

2,1231 gold badge18 silver badges23 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related