如何使两个按钮在Javascript中工作？

Question

I am trying to learn javascript and I am making a simple Fahrenheit Celsius application. The problem that I currently have is only one of two buttons work. in case there are 2 if statements , only button Fahrenheit2Celcius button works, in case there is an if... else if statement then only button Celcius2Fahrenheit works, but they never work both. Would you please explain what I am doing wrong? Here is my code:

 function C2F() { var Stoinost = document.getElementById('Stoinost').value; var Fahrenheit = (Stoinost * 1.8) + 32; var fahrenheit2 = Math.round(Fahrenheit*100)/100; var C2F_but = document.getElementById("C2F"); var Celcius = (Stoinost - 32) * (5/9); var Celcius2 = Math.round(Celcius*100)/100; var F2C_but = document.getElementById("F2C"); if (C2F_but){ document.getElementById("result").innerHTML = fahrenheit2; } if (F2C_but){ document.getElementById("result").innerHTML = Celcius2; } } 

 <table id="myTable"> <tr> <tr><td><p> Input Value: <input type="number" id="Stoinost" size="20" ></p></td></tr> <td> <button onclick="C2F()" id="F2C">Fahrenheit2Celcius</button> <button onclick="C2F()" id="C2F">Celcius2Fahrenheit</button> </td> <tr><td><p> <div id="result">Result is displayed here.</div> </p></td></tr> </tr> </table> 

Answer 1

You can use this when calling a function in an onclick handler and detect which element is clicked by checking for attributes on it like the id:

 function C2F(btn) { console.log(btn.id); } 

 <button onclick="C2F(this)" id="F2C">Fahrenheit2Celcius</button> <button onclick="C2F(this)" id="C2F">Celcius2Fahrenheit</button> 

But a much simpler and possible better solution would be to just use two functions.

Answer 2

You're using the wrong condition in your if statement. When you check if (c2f_but), it will always return true, because the button exists. You're not actually asking something about it.

What you want to know is if the button clicked is c2f_button. In that case, you would have to pass the click event as a parameter, and check if its target matches the button, or at least check some property of that button.

However, I don't think you need that kind of checking in this case. You can simply pass the calculation you want to make as a parameter of your function, like in the example below:

 function C2F(option) { var Stoinost = document.getElementById('Stoinost').value; var Fahrenheit = (Stoinost * 1.8) + 32; var fahrenheit2 = Math.round(Fahrenheit*100)/100; /*var C2F_but = document.getElementById("C2F");*/ var Celcius = (Stoinost - 32) * (5/9); var Celcius2 = Math.round(Celcius*100)/100; /*var F2C_but = document.getElementById("F2C");*/ if (option == 'c2f'){ document.getElementById("result").innerHTML = fahrenheit2; } if (option == 'f2c'){ document.getElementById("result").innerHTML = Celcius2; } } 

 <table id="myTable"> <tr> <tr><td><p> Input Value: <input type="number" id="Stoinost" size="20" ></p></td></tr> <td> <button onclick="C2F('f2c')" id="F2C">Fahrenheit2Celcius</button> <button onclick="C2F('c2f')" id="C2F">Celcius2Fahrenheit</button> </td> <tr><td><p> <div id="result">Result is displayed here.</div> </p></td></tr> </tr> 

Answer 3

Why don't you make two functions for different functionalities?

 function C2F() { var Stoinost = document.getElementById('Stoinost').value; var Fahrenheit = (Stoinost * 1.8) + 32; var fahrenheit2 = Math.round(Fahrenheit*100)/100; document.getElementById("result").innerHTML = fahrenheit2; } function F2C() { var Stoinost = document.getElementById('Stoinost').value; var Celcius = (Stoinost - 32) * (5/9); var Celcius2 = Math.round(Celcius*100)/100; document.getElementById("result").innerHTML = Celcius2; } 

 <table id="myTable"> <tr> <tr><td><p> Input Value: <input type="number" id="Stoinost" size="20" ></p></td></tr> <td> <button onclick="F2C()" id="F2C">Fahrenheit2Celcius</button> <button onclick="C2F()" id="C2F">Celcius2Fahrenheit</button> </td> <tr><td><p> <div id="result">Result is displayed here.</div> </p></td></tr> </tr> </table> 

I would also suggest you to check your HTML, you have a <tr> directly inside another <tr> . It should be only <td> 's inside <tr> 's.

Answer 4

the problem you are having is that C2F_but is a reference to the DOMNode, which is always truthy. So both conditionals will always evaluate to true . To do what you are wanting to do you need to get the Event object that is being submitted by the click event and then check to see which of those two DOMNodes was the triggering element.

 function C2F(event) { var Stoinost = document.getElementById('Stoinost').value; var Fahrenheit = (Stoinost * 1.8) + 32; var fahrenheit2 = Math.round(Fahrenheit*100)/100; var C2F_but = document.getElementById("C2F"); var Celcius = (Stoinost - 32) * (5/9); var Celcius2 = Math.round(Celcius*100)/100; var F2C_but = document.getElementById("F2C"); if (event.target == C2F_but){ document.getElementById("result").innerHTML = fahrenheit2; } if (event.target == F2C_but){ document.getElementById("result").innerHTML = Celcius2; } } 

 <table id="myTable"> <tr> <td><p> Input Value: <input type="number" id="Stoinost" size="20" ></p></td> <td> <button onclick="C2F(event)" id="F2C">Fahrenheit2Celcius</button> <button onclick="C2F(event)" id="C2F">Celcius2Fahrenheit</button> </td> </tr> <tr><td><p> <div id="result">Result is displayed here.</div> </p></td></tr> </table> 

Answer 5

You are over writing results. Instead, set a parameter in your function to know which button was press

 function C2F(type) { var Stoinost = document.getElementById('Stoinost').value; var Fahrenheit = (Stoinost * 1.8) + 32; var fahrenheit2 = Math.round(Fahrenheit*100)/100; var C2F_but = document.getElementById("C2F"); var Celcius = (Stoinost - 32) * (5/9); var Celcius2 = Math.round(Celcius*100)/100; var F2C_but = document.getElementById("F2C"); if (type == 'cf'){ document.getElementById("result").innerHTML = fahrenheit2; }else{ document.getElementById("result").innerHTML = Celcius2; } } 

 <table id="myTable"> <tr> <tr><td><p> Input Value: <input type="number" id="Stoinost" size="20" ></p></td></tr> <td> <button onclick="C2F('fc')" id="F2C">Fahrenheit2Celcius</button> <button onclick="C2F('cf')" id="C2F">Celcius2Fahrenheit</button> </td> <tr><td><p> <div id="result">Result is displayed here.</div> </p></td></tr> </tr> 

Answer 6

You need to tell the function the action (button) you want to perform.

In this case you can pass the action as a parameter when calling the function C2F

<button onclick="C2F('f2c');" id="F2C">Fahrenheit2Celcius</button>
<button onclick="C2F('c2f');" id="C2F">Celcius2Fahrenheit</button>

And catching that action in the function:

if (action == 'c2f'){
    document.getElementById("result").innerHTML = fahrenheit2;
}

if (action == 'f2c'){
    document.getElementById("result").innerHTML = Celcius2;
}

I've created a working example here: Demo