Как заставить работать две кнопки в 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

Вам необходимо сообщить функции действие (кнопка), которое вы хотите выполнить.

В этом случае вы можете передать действие в качестве параметра при вызове функции 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;
}

Я создал рабочий пример здесь: Демо

Answer 2

Вы переписываете результаты.Вместо этого установите параметр в своей функции, чтобы узнать, какая кнопка была нажата

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 3

Ваша проблема в том, что C2F_but является ссылкой на DOMNode, что всегда верно.Таким образом, оба условия всегда будут равны true.Чтобы сделать то, что вы хотите, вам нужно получить объект Event, который отправляется событием click, а затем проверить, какой из этих двух 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 4

Почему бы вам не сделать две функции для разных функций?

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 5

Вы используете неправильное условие в своем операторе 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 6

Вы можете использовать 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>

Но гораздо более простым и возможным лучшим решением было бы просто использовать две функции.