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

时间：2017-11-09 12:01:52

标签： javascript html input calculator

所以我在玩一些数学函数，我遇到了一个问题。我有几个输入“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>

5 个答案:

答案 0 :(得分：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>
	
	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>

答案 1 :(得分：0)

这是我的方法：

	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>

答案 2 :(得分：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>

答案 3 :(得分：0)

代码的主要问题是，您将函数声明为“a”，“b”和“c”，并将返回值存储在同一个变量中。重命名变量或函数名称。它将解决问题。或者您可以使用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;
}

答案 4 :(得分：0)

由于您正在重新定义自己的函数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只是为了返回一个值，您可以使用这样的简化：

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

并像这样使用它：

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

完整的代码片段是：

＆＃13;
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题