无需刷新页面即可重置功能

Question

所以我在玩一些数学函数，我遇到了一个问题。我有一些关于 "onClick" 的输入，但我的问题是：我可以计算一次，但如果我再试一次，它就不会起作用。然后我必须刷新页面才能尝试新值。有人知道如何解决这个问题吗？

<!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>
 
 function a() {
  a = document.getElementById("a").value;
  return a;
 }
 function b() {
  b = document.getElementById("b").value;
  return b;
 }
 function c() {
  c = document.getElementById("c").value;
  return c;
 }
 
 
 
 
 function abc(a,b,c) {
 
  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>

Answer 1

这是我的方法：

 function abc(a,b,c) {
 a = document.getElementById("a").value;
   b = document.getElementById("b").value;
    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;
  
 }

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

Answer 2

您打了一些不必要的电话。我已经编辑了你的代码

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

Answer 3

您需要使用 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>
 
 function a() {
  let a = document.getElementById("a").value;
  return a;
 }
 function b() {
  let b = document.getElementById("b").value;
  return b;
 }
 function c() {
  let c = document.getElementById("c").value;
  return c;
 }
 
 
 
 
 function abc(a,b,c) {
 
  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>

Answer 4

您的代码的主要问题是，您将函数声明为 "a"、"b" 和 "c"，并将 return 值存储在同一个变量中。重命名变量或函数名称。它会解决问题。或者您可以使用 let 关键字定义变量的范围。

这里是修改后的代码：

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

Answer 5

是因为函数a、b和c你重新定义了自己，因为你在输入值变量中使用了与函数相同的名称，所以你只需要像这样更改它的名称：

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>

此外，如果您使用 a、b 和 c 只是为了 return 一个值，您可以像这样简化它：

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;
    }
 
    function abc(a, b, c) {
        //console.log(a, b, c);
 
        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>

无需刷新页面即可重置功能

Reset functions without having to refresh the page

html

javascript

input

calculator