时间戳

首页 > 解决方案 > 如何使两个按钮在 Javascript 中工作？

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

问题描述

我正在尝试学习 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>

标签： javascriptfunctionbutton

解决方案

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

function C2F(btn) {
  console.log(btn.id);
}
<button onclick="C2F(this)" id="F2C">Fahrenheit2Celcius</button>
<button onclick="C2F(this)" id="C2F">Celcius2Fahrenheit</button>

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

推荐阅读