如何使兩個按鈕在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;
}

我在這里創建了一個工作示例： 演示