2017-11-09 13 views
0

私はいくつかの数学関数を知っているので、問題はありました。私は "onClick"でいくつかの入力を持っていますが、私の問題は次のとおりです: 私はcalcutationsを一度行うことができますが、私は再び試してみるとうまくいきません。新しい値を試す前に、ページを更新する必要があります。誰でもこれを修正する方法を知っていますか?ここでページを更新しなくても機能をリセットする

<!doctype html> 
 
<html> 
 
<head> 
 
</head> 
 
<body> 
 
<h1>Quadratic equation Calculator</h1> 
 
</br> 
 
</br> 
 
<p>Select A value</p> <input id="a"></input> 
 
<p>Select B value</p> <input id="b"></input> 
 
<p>Select C value</p> <input id="c"></input></br> 
 
<button class="knapp" onClick="a();b();c();abc(a,b,c)">Calculate</button> 
 
<button class="knapp" onClick="location.href=location.href">Refresh</button> 
 

 
<h1 id="svar"></h1> 
 
<h1 id="svar2"></h1> 
 
    
 

 
<script> 
 
\t 
 
\t function a() { 
 
\t \t a = document.getElementById("a").value; 
 
\t \t return a; 
 
\t } 
 
\t function b() { 
 
\t \t b = document.getElementById("b").value; 
 
\t \t return b; 
 
\t } 
 
\t function c() { 
 
\t \t c = document.getElementById("c").value; 
 
\t \t return c; 
 
\t } 
 
\t 
 
\t 
 
\t 
 
\t 
 
\t function abc(a,b,c) { 
 
\t 
 
\t \t var minB = -b; 
 
\t \t var underRot = Math.pow(b,2)-(4*a*c); 
 
\t \t var rot = Math.sqrt(underRot); 
 
\t \t var formelPluss = (minB + rot)/(2*a); 
 
\t \t var formelMinus = (minB - rot)/(2*a); 
 
\t \t 
 
\t \t document.getElementById("svar").innerHTML = "X1 = " + formelPluss; 
 
\t \t document.getElementById("svar2").innerHTML = "X2 = " + formelMinus; 
 
\t \t 
 
\t } 
 
\t 
 
</script> 
 

 

 

 

 

 
</body> 
 
</html>

答えて

0

は、ここでのコード変更されました

:その後、代わりに古いの計算機能で新たに作成した変数を使用

var valueOfA, valueOfB, valueOfC; 
function a() { 
    valueOfA = document.getElementById("a").value; 
    return valueOfA; 
} 
function b() { 
    valueOfB = document.getElementById("b").value; 
    return valueOfB; 
} 
function c() { 
    valueOfC = document.getElementById("c").value; 
    return valueOfC; 
} 

:ちょうどこのようにその名前を変更する必要がありますまた

<button class="knapp" onClick="a();b();c(); abc(valueOfA, valueOfB, valueOfC)">Calculate</button> 

、あなたはちょうどあなたがそうのように簡略化して、それを作ることができる値を返すためにab、およびcを使用している場合:

function getInputValue(id) { 
    return document.getElementById(id).value; 
} 

そして、このようにそれを使用します。

<button class="knapp" onClick="abc(getInputValue('a'), getInputValue('b'), getInputValue('c'));">Calculate</button> 

フルスニペットは、次のようになります。

<!doctype html> 
 
<html> 
 
<head> 
 
</head> 
 
<body> 
 
<h1>Quadratic equation Calculator</h1> 
 
</br> 
 
</br> 
 
<p>Select A value</p> <input id="a" /> 
 
<p>Select B value</p> <input id="b" /> 
 
<p>Select C value</p> <input id="c" /><br /> 
 
<button class="knapp" onClick="abc(getInputValue('a'), getInputValue('b'), getInputValue('c'))">Calculate</button> 
 
<button class="knapp" onClick="location.href=location.href">Refresh</button> 
 

 
<h1 id="svar"></h1> 
 
<h1 id="svar2"></h1> 
 
    
 

 
<script> 
 
    function getInputValue(id) { 
 
     return document.getElementById(id).value; 
 
    } 
 
\t 
 
    function abc(a, b, c) { 
 
     //console.log(a, b, c); 
 
\t 
 
     var minB = -b; 
 
     var underRot = Math.pow(b,2)-(4*a*c); 
 
     var rot = Math.sqrt(underRot); 
 
     var formelPluss = (minB + rot)/(2*a); 
 
     var formelMinus = (minB - rot)/(2*a); 
 
\t \t 
 
     document.getElementById("svar").innerHTML = "X1 = " + formelPluss; 
 
     document.getElementById("svar2").innerHTML = "X2 = " + formelMinus; 
 
\t \t 
 
    } 
 
</script> 
 
</body>

+0

ありがとう!これは本当に私を助けました! – Benjamhw

+0

もちろん、これがあなたが探していた答えだと思うなら、それをマークしてください。 @Benjamhw – adielhercules

0

は私のアプローチです:

\t function abc(a,b,c) { 
 
\t a = document.getElementById("a").value; 
 
    \t b = document.getElementById("b").value; 
 
    c = document.getElementById("c").value; 
 
\t \t var minB = -b; 
 
\t \t var underRot = Math.pow(b,2)-(4*a*c); 
 
\t \t var rot = Math.sqrt(underRot); 
 
\t \t var formelPluss = (minB + rot)/(2*a); 
 
\t \t var formelMinus = (minB - rot)/(2*a); 
 
\t \t 
 
\t \t document.getElementById("svar").innerHTML = "X1 = " + formelPluss; 
 
\t \t document.getElementById("svar2").innerHTML = "X2 = " + formelMinus; 
 
\t \t 
 
\t } 
 
\t
<!doctype html> 
 
<html> 
 
<head> 
 
</head> 
 
<body> 
 
<h1>Quadratic equation Calculator</h1> 
 
</br> 
 
</br> 
 
<p>Select A value</p> <input id="a"></input> 
 
<p>Select B value</p> <input id="b"></input> 
 
<p>Select C value</p> <input id="c"></input></br> 
 
<button class="knapp" onClick="abc(a,b,c)">Calculate</button> 
 
    
 

 
<h1 id="svar"></h1> 
 
<h1 id="svar2"></h1> 
 

 

 

 

 

 

 
</body> 
 
</html>

0

あなたは、いくつかの不要な呼び出しを持っています。あなたのコードを編集しました

<!doctype html> 
<html> 
<head> 
</head> 
<body> 
<h1>Quadratic equation Calculator</h1> 
</br> 
</br> 
<p>Select A value</p> <input id="a"></input> 
<p>Select B value</p> <input id="b"></input> 
<p>Select C value</p> <input id="c"></input></br> 
<button class="knapp" onClick="abc()">Calculate</button> 
<button class="knapp" onClick="location.href=location.href">Refresh</button> 

<h1 id="svar"></h1> 
<h1 id="svar2"></h1> 


<script> 


    function abc() { 
     var a = document.getElementById("a").value; 
     var b = document.getElementById("b").value; 
     var c = document.getElementById("c").value; 
     var minB = -b; 
     var underRot = Math.pow(b,2)-(4*a*c); 
     var rot = Math.sqrt(underRot); 
     var formelPluss = (minB + rot)/(2*a); 
     var formelMinus = (minB - rot)/(2*a); 

     document.getElementById("svar").innerHTML = "X1 = " + formelPluss; 
     document.getElementById("svar2").innerHTML = "X2 = " + formelMinus; 

    } 

</script> 





</body> 
</html> 
1

letを変数として設定する必要があります。

<!doctype html> 
 
<html> 
 
<head> 
 
</head> 
 
<body> 
 
<h1>Quadratic equation Calculator</h1> 
 
</br> 
 
</br> 
 
<p>Select A value</p> <input id="a"></input> 
 
<p>Select B value</p> <input id="b"></input> 
 
<p>Select C value</p> <input id="c"></input></br> 
 
<button class="knapp" onClick="a();b();c();abc(a,b,c)">Calculate</button> 
 
<button class="knapp" onClick="location.href=location.href">Refresh</button> 
 

 
<h1 id="svar"></h1> 
 
<h1 id="svar2"></h1> 
 
    
 

 
<script> 
 
\t 
 
\t function a() { 
 
\t \t let a = document.getElementById("a").value; 
 
\t \t return a; 
 
\t } 
 
\t function b() { 
 
\t \t let b = document.getElementById("b").value; 
 
\t \t return b; 
 
\t } 
 
\t function c() { 
 
\t \t let c = document.getElementById("c").value; 
 
\t \t return c; 
 
\t } 
 
\t 
 
\t 
 
\t 
 
\t 
 
\t function abc(a,b,c) { 
 
\t 
 
\t \t var minB = -b; 
 
\t \t var underRot = Math.pow(b,2)-(4*a*c); 
 
\t \t var rot = Math.sqrt(underRot); 
 
\t \t var formelPluss = (minB + rot)/(2*a); 
 
\t \t var formelMinus = (minB - rot)/(2*a); 
 
\t \t 
 
\t \t document.getElementById("svar").innerHTML = "X1 = " + formelPluss; 
 
\t \t document.getElementById("svar2").innerHTML = "X2 = " + formelMinus; 
 
\t \t 
 
\t } 
 
\t 
 
</script> 
 

 

 

 

 

 
</body> 
 
</html>

+0

ありがとうございますが、今ではa、b、cは使用できません。私は何をしようとしても、NaNをconsole.logにしようとします。手伝ってくれますか? – Benjamhw

0

あなたのコードの主な問題は、あなたが「A」、「B」と「C」とも同じ変数に戻り値を格納するなどの機能を宣言し、です。変数または関数名の名前を変更します。問題を解決します。 letキーワードを使用して変数のスコープを定義することもできます。あなたが入力値変数、関数と同じ名前を使用するので、あなたしているので、それは理由の機能abだとcあなたが自分自身を再定義している

function a1() { 
    a = document.getElementById("a").value; 
    return a; 
} 
function b1() { 
    b = document.getElementById("b").value; 
    return b; 
} 
function c1() { 
    c = document.getElementById("c").value; 
    return c; 
} 
関連する問題