Квадратичное уравнение в javascript не работает

Question

Я сделал квадратичный решатель уравнений с Javascript и HTML, но когда я нажимаю кнопку «рассчитать», он просто получает значения «a» и «c» и умножается на -1.

Я начинаю с Javascript, поэтому я мало знаю об объекте.

Вот код:

var a, b, c, xone, xtwo; 
 

 
function getValues() { 
 
    function getValues() { 
 
    if (document.getElementById('signone').value == "+") { 
 
     a = document.getElementById('vara').value; 
 
    } else { 
 
     a = document.getElementById('vara').value * (-1); 
 
    } 
 
    if (document.getElementById('signtwo').value == "+") { 
 
     b = document.getElementById('varb').value; 
 
    } else { 
 
     b = document.getElementById('varb').value * (-1); 
 
    } 
 
    if (document.getElementById('signthree').value == "+") { 
 
     c = document.getElementById('varc').value; 
 
    } else { 
 
     c = document.getElementById('varc').value * (-1); 
 
    } 
 
    } 
 
} 
 

 
function getSolution() { 
 
    xone = ((-1 * b) + Math.sqrt((b * b) - 4 * a * c))/(2 * a); 
 
    xtwo = ((-1 * b) - Math.sqrt((b * b) - 4 * a * c))/(2 * a); 
 
} 
 

 
function showSolution() { 
 
    document.getElementById('showone').innerHTML = "x1 = " + xone; 
 
    document.getElementById('showtwo').innerHTML = "x2 = " + xtwo; 
 
}

<h1> Quadratic equation calculator </h1> 
 
<p>This calculator is going to find the two values of <i>x</i> of the equation typed.</br>In order to use it properly, you have to fill all of the boxes</br> 
 
    and click <q>ok</q> 
 
</p> 
 
</br> 
 
<form> 
 
    <select id="signone"> 
 
    <option value="+">+</option> 
 
    <option value="-">-</option> 
 
    </select> 
 
    <input id="vara" type="text" name="firstvar" placeholder="type the coeficient a" />x2 
 
    <select id="signtwo"> 
 
    <option value="+">+</option> 
 
    <option value="-">-</option> 
 
    </select> 
 
    <input id="varb" type="text" name="secondvar" placeholder="type the coeficient b " />x 
 
    <select id="signthree"> 
 
    <option value="+">+</option> 
 
    <option value="-">-</option> 
 
    </select> 
 
    <input id="varc" type="text" name="thirdvar" placeholder="type the coeficient c" />=0 
 
</form> 
 
</br> 
 
<button type="button" onclick="getValues();getSolution();showSolution();">Calculate</button> 
 
<p id="showone">X1 =</p> 
 
</br> 
 
<p id="showtwo">X2 =</p>

Answer 1

Когда вы получите значение из текстового ввода, это значение является строка и не число в JavaScript. Вот почему всякий раз, когда на нем делается операция, это приводит к NaN. Например, это «3» * -1, что приводит к NaN, потому что «3» не является числом. 3 - число, но «3» (как строка) - нет.

Это простое решение. Вы можете использовать parseInt(), который преобразует строковое значение в целое число. Однако, вероятно, лучше использовать parseFloat в случае ввода десятичного числа. Правильный код, например, будет выглядеть следующим образом:

a = parseFloat(document.getElementById('vara').value) * (-1) 

Вы также нарушая правила DRP во многих случаях «не повторяться», так как ваш код очень повторяющийся и может быть более легко ломается вниз цикл повторения. Всякий раз, когда у вас есть куча утверждений «если», как и у вас, его обычно можно разбить в цикле. Я дам вам вызов сделать это.

Как сказано ниже, (которое я пропустил), у вас также есть функция, которая дважды является проблемой.

Answer 2

Проблема в том, что getValues() ничего не делает. У вас есть дополнительное определение функции внутри функции, и вы никогда не вызываете внутреннюю функцию. Просто определите его один раз.

var a, b, c, xone, xtwo; 
 

 
function getValues() { 
 
    if (document.getElementById('signone').value == "+") { 
 
    a = document.getElementById('vara').value; 
 
    } else { 
 
    a = document.getElementById('vara').value * (-1); 
 
    } 
 
    if (document.getElementById('signtwo').value == "+") { 
 
    b = document.getElementById('varb').value; 
 
    } else { 
 
    b = document.getElementById('varb').value * (-1); 
 
    } 
 
    if (document.getElementById('signthree').value == "+") { 
 
    c = document.getElementById('varc').value; 
 
    } else { 
 
    c = document.getElementById('varc').value * (-1); 
 
    } 
 
} 
 

 
function getSolution() { 
 
    xone = ((-1 * b) + Math.sqrt((b * b) - 4 * a * c))/(2 * a); 
 
    xtwo = ((-1 * b) - Math.sqrt((b * b) - 4 * a * c))/(2 * a); 
 
} 
 

 
function showSolution() { 
 
    document.getElementById('showone').innerHTML = "x1 = " + xone; 
 
    document.getElementById('showtwo').innerHTML = "x2 = " + xtwo; 
 
}

<h1> Quadratic equation calculator </h1> 
 
<p>This calculator is going to find the two values of <i>x</i> of the equation typed.</br>In order to use it properly, you have to fill all of the boxes</br> 
 
    and click <q>ok</q> 
 
</p> 
 
</br> 
 
<form> 
 
    <select id="signone"> 
 
    <option value="+">+</option> 
 
    <option value="-">-</option> 
 
    </select> 
 
    <input id="vara" type="text" name="firstvar" placeholder="type the coeficient a" />x<sup>2</sup> 
 
    <select id="signtwo"> 
 
    <option value="+">+</option> 
 
    <option value="-">-</option> 
 
    </select> 
 
    <input id="varb" type="text" name="secondvar" placeholder="type the coeficient b " />x 
 
    <select id="signthree"> 
 
    <option value="+">+</option> 
 
    <option value="-">-</option> 
 
    </select> 
 
    <input id="varc" type="text" name="thirdvar" placeholder="type the coeficient c" />=0 
 
</form> 
 
</br> 
 
<button type="button" onclick="getValues();getSolution();showSolution();">Calculate</button> 
 
<p id="showone">X1 =</p> 
 
</br> 
 
<p id="showtwo">X2 =</p>