正文 

当前位置： 首页 > 问答 >

为啥我的函数在每次页面加载时只运行一次？

     2023-02-22     117

关键词：

【中文标题】为啥我的函数在每次页面加载时只运行一次？【英文标题】：Why does my function only run once per page load?为什么我的函数在每次页面加载时只运行一次？ 【发布时间】：2012-08-13 01:45:28 【问题描述】：

我正在编写一个脚本，该脚本使用表单中的文本输入进行计算。出于某种原因，我的计算在每次页面加载时只执行一次。当我按下“计算”按钮时，我必须刷新页面才能再次运行该功能。

这是我的按钮的 HTML：

<input type="button" value="Calculate" onclick="calculate(high, low, common);" />
<input type="reset" />
<div id="result"></div>

这里是计算函数（变量在别处定义）：

var calculate = function (high, low, common) 
   if (high.length < 1 || low.length < 1 || common.length <1) 
       document.getElementById('result').innerHTML="Please enter a number for all fields.";
    else 
       if ((high - common) > (common - low)) 
           document.getElementById('result').innerHTML="Result 1.";
         else if ((common - low) > (high - common)) 
        document.getElementById('result').innerHTML="Result 2.";
         else if ((common - low) === (high - common)) 
        document.getElementById('result').innerHTML="Result 3.";
        
      
   ;

我是否正在做一些事情来阻止函数在每次页面加载时运行多次？

【问题讨论】：

high, low, common 来自哪里？ 如果我们更改这三个值的值，代码工作正常。输出正在改变。你能创建一个你的代码的jsfiddle吗？ @Abhishek，这是整页的小提琴。由于某种原因，我的程序现在也不会超过第一个 if/else 语句。 jsfiddle.net/vdrwh 【参考方案1】：

您的代码的问题是您只是在第一次加载页面时设置了高、低、常见。 这些值始终保持不变。

您应该在 onclick 事件中传递您的值。

更新了你的 - jsfiddle

<!DOCTYPE html>
<html>
<head>
    <title>Calculator</title>
    <meta charset = "UTF-8" />
</head>
<body>

<h1>Calculator</h1>

<!--Form forvalue inputs-->

<form>
    <label for="highRi">Highest:</label><input type ="text" id="highRi" />
    <label for="lowRi">Lowest:</label><input type="text" id="lowRi" />
    <label for="comm">Common Point:</label><input type ="text" id="comm" />

<!--Clicking the button should run the calculate() function-->

    <input type="button" value="Calculate" onclick="calculate(document.getElementById('highRi').value, document.getElementById('lowRi').value, document.getElementById('comm').value);" />
    <input type="reset" />

<!--Div will populate with result after calculation is performed-->

    <div id="result"></div> 
</form>

<script type="text/javascript">


var calculate = function (high, low, common) 
   if (high.length < 1 || low.length < 1 || common.length <1) 
       document.getElementById('result').innerHTML="Please enter a number for all fields.";
    else 
       if ((high - common) > (common - low)) 
           document.getElementById('result').innerHTML="Result 1.";
         else if ((common - low) > (high - common)) 
        document.getElementById('result').innerHTML="Result 2.";
         else if ((common - low) === (high - common)) 
        document.getElementById('result').innerHTML="Result 3.";
    


; 

</script>

</body>
</html>

或者您可以在函数调用中简单地获取这些元素值。

<!DOCTYPE html>
<html>
<head>
<title>Calculator</title>
<meta charset = "UTF-8" />
</head>
<body>

<h1>Calculator</h1>

<!--Form forvalue inputs-->

<form>
    <label for="highRi">Highest:</label><input type ="text" id="highRi" />
    <label for="lowRi">Lowest:</label><input type="text" id="lowRi" />
    <label for="comm">Common Point:</label><input type ="text" id="comm" />

<!--Clicking the button should run the calculate() function-->

    <input type="button" value="Calculate" onclick="calculate();" />
    <input type="reset" />

<!--Div will populate with result after calculation is performed-->

    <div id="result"></div> 
</form>

<script type="text/javascript">


var calculate = function () 
    var high = document.getElementById('highRi').value;
    var low = document.getElementById('lowRi').value
    var common = document.getElementById('comm').value
   if (high.length < 1 || low.length < 1 || common.length <1) 
       document.getElementById('result').innerHTML="Please enter a number for all fields.";
    else 
       if ((high - common) > (common - low)) 
           document.getElementById('result').innerHTML="Result 1.";
         else if ((common - low) > (high - common)) 
        document.getElementById('result').innerHTML="Result 2.";
         else if ((common - low) === (high - common)) 
        document.getElementById('result').innerHTML="Result 3.";
    


; 

</script>

​​​ jsfiddleSee it working ​​​ 或许这会对你有所帮助。

【讨论】：

【参考方案2】：

对我来说，如果我更改值 high、low 和 common，你的代码也可以工作，试试这个方法，它可能对你有用

<input type="button" id="button" value="Calculate" />

var button = document.getElementById("button");
var high = document.getElementById("high").value;
var low = document.getElementById("low").value;
var common = document.getElementById("common").value;
button.addEventListener(onclick, calculate(high, low, common));

【讨论】：

为啥我的点击事件在生成 HTML 时只工作一次，但在 console.logging 时工作正常？

】为啥我的点击事件在生成HTML时只工作一次，但在console.logging时工作正常？【英文标题】：WhydoesmyclickeventonlyworkoncewhengeneratingHTML,butworkscorrectlywhenconsole.logging?为什么我的点击事件在生成HTML时只工作一次，但在console.logging时工作... 查看详情

为啥 JavaScript 加载函数没有加载？

】为啥JavaScript加载函数没有加载？【英文标题】：WhytheJavaScriptloadfunctionisnotloaded?为什么JavaScript加载函数没有加载？【发布时间】：2022-01-1906:06:39【问题描述】：我使用Asp.netcoreRazorPage。我希望JavaScript在页面加载时加载，在页面... 查看详情

为啥每次将新条目提交到表单时我的 HTML 页面都会重新加载？

】为啥每次将新条目提交到表单时我的HTML页面都会重新加载？【英文标题】：WhyismyHTMLpagereloadingeverytimeanewentryissubmittedintoaform?为什么每次将新条目提交到表单时我的HTML页面都会重新加载？【发布时间】：2019-10-2212:23:11【问题描... 查看详情

为啥下一个 js 在我构建时会在第一次加载时加载所有页面

】为啥下一个js在我构建时会在第一次加载时加载所有页面【英文标题】：whynextjsloadsallpagesatfirstloadwhenibuild为什么下一个js在我构建时会在第一次加载时加载所有页面【发布时间】：2020-04-1019:17:12【问题描述】：我正在为我的新... 查看详情

如何防止在页面加载时执行 javascript 函数？

...：2016-03-1315:06:08【问题描述】：我有一个本地网页来管理我的路由器上的ssh隧道，我正在尝试对我的ssh隧道发出实时声音通知。当它连接/断开时，它会播放声音。到目前为止它运行良好，但问题是每次我加载我的网页时它都会... 查看详情

每次加载页面时运行 javascript

...ageisloading【发布时间】：2017-01-2021:06:54【问题描述】：在我的Web应用程序中，我有一个包含加载栏的模式弹出窗口。我让它出现在任何我知道需要几秒钟才能执行的命令上，点击按钮等。这目前运行良好，除了一个复杂的问题，... 查看详情

为啥每次单元测试后我的数据库都没有被清除？

】为啥每次单元测试后我的数据库都没有被清除？【英文标题】：Whyismydatabasenotbeingclearedaftereachunittest?为什么每次单元测试后我的数据库都没有被清除？【发布时间】：2021-12-2819:59:59【问题描述】：我正在尝试在没有创建用户并... 查看详情

每次刷新页面时重新加载数据表

...问题描述】：我要做的就是在重新加载/刷新页面时刷新我的DataTable。现在在刷新页面时，它会保留其数据。我的应用程序使用ASP.NetMVC技术。这是我的数据表和相关函数：$(document).ready(function()//debugger;vartable=$(\ 查看详情

如何仅在代码第一次运行时在 python 中运行函数？

...描述】：我编写了一个函数来安装运行脚本所需的模块。我的问题是每次脚本运行时都会运行该函数。我只需要在脚本第一次运行时运行该函数，这样在安装模块后，该函数就不会在每次脚本运行时运行。我的代码是importimp 查看详情

为啥我的代码中没有运行 jQuery 文档就绪函数？ [复制]

】为啥我的代码中没有运行jQuery文档就绪函数？[复制]【英文标题】：Whydoesn\'tjQuerydocumentreadyfunctionruninmycode?[duplicate]为什么我的代码中没有运行jQuery文档就绪函数？[复制]【发布时间】：2020-10-2004:32:51【问题描述】：我第一次使... 查看详情

为啥单击事件处理程序会在页面加载后立即触发？

】为啥单击事件处理程序会在页面加载后立即触发？【英文标题】：Whydoesclickeventhandlerfireimmediatelyuponpageload?为什么单击事件处理程序会在页面加载后立即触发？【发布时间】：2011-10-2911:11:54【问题描述】：我在玩一个我想绑定... 查看详情

使 jquery 函数在页面加载时运行

...即脉动，删除鼠标悬停元素鼠标悬停然后鼠标移开。这是我的代码(function($)$(document).ready(function()window.puls 查看详情

为啥每次都加载新的 xib 文件？为啥不替换前一个？

】为啥每次都加载新的xib文件？为啥不替换前一个？【英文标题】：whyeverytimenewxibfileisloading?whyitisnotreplacethepreviousone?为什么每次都加载新的xib文件？为什么不替换前一个？【发布时间】：2017-09-0707:22:07【问题描述】：我的vc代码... 查看详情

在我的 Flutter 应用中，只有当我们触摸屏幕时才会加载页面内容。为啥？

...lutter应用中，只有当我们触摸屏幕时才会加载页面内容。为啥？【英文标题】：Inmyflutterapp,thecontentofthepageisloadedonlywhenwetouchthescreen.Why?在我的Flutter应用中，只有当我们触摸屏幕时才会加载页面内容。为什么？【发布时间】：2021-0... 查看详情

Android：第一次运行时只显示一些行

...，它运行良好，数据库中的所有项目都填满了屏幕。我在我的线性布局xml文件和wrap_content高度中放置了 查看详情

为啥 Web 部件在第一次添加到页面时会在构造函数上失败？

】为啥Web部件在第一次添加到页面时会在构造函数上失败？【英文标题】：Whywouldawebpartfailonconstructorthefirsttimeit\'sbeingaddedtoapage?为什么Web部件在第一次添加到页面时会在构造函数上失败？【发布时间】：2010-10-1323:04:44【问题描述... 查看详情

为啥在初始页面加载时多次调用 React Ref 回调（作为箭头函数或内联函数）？

】为啥在初始页面加载时多次调用ReactRef回调（作为箭头函数或内联函数）？【英文标题】：WhyisaReactRefcallback(asanarrowfunctionorinlinefunction)calledmultipletimesoninitialpageload?为什么在初始页面加载时多次调用ReactRef回调（作为箭头函数或... 查看详情

为啥我的 TabBar 按钮在我第一次加载视图控制器时被禁用？

】为啥我的TabBar按钮在我第一次加载视图控制器时被禁用？【英文标题】：WhyaremyTabBarbuttonsdisabledthefirsttimeIloadmyviewcontroller?为什么我的TabBar按钮在我第一次加载视图控制器时被禁用？【发布时间】：2011-06-1412:31:34【问题描述】：... 查看详情