我有一个带有简单表单的 HTML 页面，用于计算两个输入字段的乘积并将结果显示在 div 中。它调用一个 on click javascript 函数。 然而，我第一次提交后，从第二次开始，表单就不起作用了，页面不断刷新。
<!DOCTYPE html>
<html>
<head>
<style>
#header {
border: 1px solid lightgrey;
margin : -8px -8px 0;
background-color: lightgrey;
}
#controls{
margin-left: 475px;
}
#weight{
margin-bottom:25px;
}
#cost{
margin-bottom:25px;
}
#compute{
margin-bottom:25px;
margin-left: 300x
}
#result{
margin-left: 50px
}
</style>
</head>
<body>
<div id="header">
<table style="width:100%">
<tr style="width:100%">
<td style="width:20%">
<span>
<img align="left" src="logo.jpeg" width="120px" height="120px">
</span>
</td>
<td style="width: 60%;">
<span>
<center>
<h1>DATAX Shipping Company</h1>
</center>
</span>
</td>
<td style="width: 40%; padding-bottom: 7%;padding-left:5%;">
<span>
<a href="#" id="signup">Sign up</a>
<a href="#" id="login" style="padding-left:30px">Log in</a>
</span>
</td>
</tr>
</table>
</div>
<form id="controls">
<div class="title">
<h3>Calculation of Shipping charge</h3>
</div>
<div><label> Total Product Weight <input id="weight"/></label></div>
<div><label>Shipping cost (Per Kg) <input id="cost"/></label></div>
<button id="compute" onclick="return result()"/>Compute</button>
<div id="result"></div>
</form>
<script type="text/javascript">
var weight;
var cost;
var result;
function result(){
weight=document.getElementById("weight").value;
cost=document.getElementById("cost").value;
console.log(weight);
console.log(cost);
result=weight*cost;
console.log(result);
document.getElementById("result").innerHTML="The Total Shipment charge is "+result;
return false;
}
</script>
</body>
</html>我正在测试以下场景
重量 = 4 ，距离 = 5 重量 = 10，距离 = 15
从第二次迭代开始，它似乎失败了
最佳答案
您正在覆盖函数内的变量result，您需要将其更改为其他内容:
var weight;
var cost;
var result;
function result(){
weight=document.getElementById("weight").value;
cost=document.getElementById("cost").value;
console.log(weight);
console.log(cost);
xresult=weight*cost;
console.log(xresult);
document.getElementById("result").innerHTML="The Total Shipment charge is "+xresult;
return false;
}#header {
border: 1px solid lightgrey;
margin : -8px -8px 0;
background-color: lightgrey;
}
#controls{
margin-left: 475px;
}
#weight{
margin-bottom:25px;
}
#cost{
margin-bottom:25px;
}
#compute{
margin-bottom:25px;
margin-left: 300x
}
#result{
margin-left: 50px
}<div id="header">
<table style="width:100%">
<tr style="width:100%">
<td style="width:20%">
<span>
<img align="left" src="logo.jpeg" width="120px" height="120px">
</span>
</td>
<td style="width: 60%;">
<span>
<center>
<h1>DATAX Shipping Company</h1>
</center>
</span>
</td>
<td style="width: 40%; padding-bottom: 7%;padding-left:5%;">
<span>
<a href="#" id="signup">Sign up</a>
<a href="#" id="login" style="padding-left:30px">Log in</a>
</span>
</td>
</tr>
</table>
</div>
<form id="controls">
<div class="title">
<h3>Calculation of Shipping charge</h3>
</div>
<div><label> Total Product Weight <input id="weight"/></label></div>
<div><label>Shipping cost (Per Kg) <input id="cost"/></label></div>
<button id="compute" onclick="return result()"/>Compute</button>
<div id="result"></div>
</form>关于javascript - 如何使 javascript 函数持续触发，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50119833/