我有一个HTML页面，其中包含一个简单的表单，用于计算两个输入字段的乘积，并在div中显示结果。它调用点击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
从第二次迭代开始，它似乎失败了
我会这样做：
document.getElementById("compute").addEventListener('click', result);
function result(e) {
// Since its a form, you need to use preventDefault()
e.preventDefault();
// Define input variables
var weight = document.getElementById("weight").value;
var cost = document.getElementById("cost").value;
// Result variable
var result = document.getElementById("result");
// Check if the value is a number
if( isNaN(weight) || isNaN(cost) ) {
result.innerHTML = "Please enter a Valid Number!";
}
// Final result
else {
result.innerHTML = "The Total Shipment charge is " + (weight * cost);
}
}
document.getElementById("resetForm").addEventListener('click', resultReset);
function resultReset(e) {
// prevent submit
e.preventDefault();
// Reset form
document.getElementById("controls").reset();
}#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">Compute</button>
<button id="resetForm">Reset</button>
<div id="result"></div>
</form>你正在覆盖函数内的变量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>这是因为您使用相同的名称（结果）作为变量，并再次作为函数名称作为相同的范围。你需要改变它们。您可以将函数名称更改为（getResult）。