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

Question

我正在尝试学习JavaScript，并且正在制作一个简单的华氏摄氏温度应用程序。 我目前遇到的问题只是两个按钮之一起作用。 如果有2条if语句，则只有按钮Fahrenheit2Celcius按钮起作用，如果有if ... else if语句，则只有按钮Celcius2Fahrenheit起作用，但它们两者都不起作用。 您能解释我做错了吗？ 这是我的代码：

 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

您可以在onclick处理程序中调用函数时使用this函数，并通过检查其上的属性（例如ID）来检测单击了哪个元素：

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

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

但是，一个更简单，可能更好的解决方案是仅使用两个函数。

Answer 2

您在if语句中使用了错误的条件。 当您检查（c2f_but）是否存在时，它将始终返回true，因为该按钮存在。 您实际上并没有对此提出任何疑问。

您想知道的是单击的按钮是否为c2f_button。 在这种情况下，您将必须将click事件作为参数传递，并检查其目标是否与按钮匹配，或者至少检查该按钮的某些属性。

但是，在这种情况下，我认为您不需要这种检查。 您可以简单地将要进行的计算作为函数的参数传递，如以下示例所示：

 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

为什么不为不同的功能创建两个功能？

 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> 

我也建议你检查你的HTML，你有一个<tr>直接在另一<tr> 它应该是唯一<td>的内部<tr>的。

Answer 4

您遇到的问题是C2F_but是对DOMNode的引用，这始终是事实。 因此，两个条件都将始终为true 。 要执行您想做的事情，您需要获取click事件正在提交的Event对象，然后检查一下这两个DOMNodes中的哪一个是触发元素。

 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

您正在写结果。 而是在函数中设置参数以知道按下了哪个按钮

 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

您需要告诉该功能要执行的操作（按钮）。

在这种情况下，可以在调用函数C2F时将操作作为参数传递

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

并在函数中捕获该动作：

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

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

我在这里创建了一个工作示例： 演示