如何使javascript函数始终如一

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何使javascript函数始终如一相关的知识，希望对你有一定的参考价值。

我有一个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）。

以上是关于如何使javascript函数始终如一的主要内容，如果未能解决你的问题，请参考以下文章

如何将此 JavaScript 代码片段翻译成 Parenscript？

php 一个自定义的try..catch包装器代码片段，用于执行模型函数，使其成为一个单行函数调用

sql将字符串拆分为始终相同数量的片段

如何使变量的第一个字母始终大写？ [复制]

Python 自动化 - 浏览器chrome打开F12开发者工具自动Paused in debugger调试导致无法查看网站资源问题原因及解决方法，javascript反调试问题处理实例演示(代码片段

如何在 JavaScript 中为私有变量使用与函数参数相同的名称？ （使代码看起来更好）