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

Question

我正在尝试学习javascript，我正在制作一个简单的Fahrenheit Celsius应用程序。我目前遇到的问题只有两个按钮中的一个工作。如果有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上的属性来检测单击的元素：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

但更简单，更好的解决方案就是使用两个函数。

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

为什么不为不同的功能制作两个功能？

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我还建议您查看HTML，直接在另一个<tr>内有<tr>。它应该只在<td>内<tr>。

Answer 4

你遇到的问题是C2F_but是对DOMNode的引用，它始终是真的。因此，两个条件都将始终评估为true。要执行您想要执行的操作，您需要获取click事件提交的Event对象，然后检查这两个DOMNode中的哪一个是触发元素。

＆＃13;

＆＃13;

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

}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

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