Javascript 我有两个功能，当我运行程序时，只有按钮点击计数器功能似乎在运行。他们都各自工作
基本上，我正在寻找一种使这两个函数同时运行的方法。这个想法是点击按钮会产生一个介于1-20之间的随机数。然后将其发送到if语句，该语句根据文本是否低于或等于10或高于10显示不同的文本段。这本身就可以很好地工作。然后我添加了我为代码创建的按钮点击计数器（它本身也可以正常工作），以计算在为用户生成新数字时按钮被点击的次数。现在，这只会导致按钮点击次数被计数，而不再显示生成的随机数或与之相关的文本。我相信这是一个简单的解决办法。有人能帮我解释一下我哪里出错了吗？感谢所有帮助过你的人 首先，我将显示一个带有注释的版本，所有这些都是为任何初学者提供的，他们希望得到更多的解释。然后是一个赤裸裸的代码版本，任何人都可以找到一些不那么混乱的东西Javascript 我有两个功能，当我运行程序时，只有按钮点击计数器功能似乎在运行。他们都各自工作,javascript,html,Javascript,Html,基本上，我正在寻找一种使这两个函数同时运行的方法。这个想法是点击按钮会产生一个介于1-20之间的随机数。然后将其发送到if语句，该语句根据文本是否低于或等于10或高于10显示不同的文本段。这本身就可以很好地工作。然后我添加了我为代码创建的按钮点击计数器（它本身也可以正常工作），以计算在为用户生成新数字时按钮被点击的次数。现在，这只会导致按钮点击次数被计数，而不再显示生成的随机数或与之相关的文本。我相信这是一个简单的解决办法。有人能帮我解释一下我哪里出错了吗？感谢所有帮助过你的人 首先，我将显示一
//Commented Version:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Random Number Generator with Button Counter</title>
</head>
<body>
<!--This is the button that calls the function ranNum()-->
<input type="button" onClick="ranNum()" id="btn" value="Generate Random
Number Between 1 and 20" />
<!--Here is where the Randomly Generated Number is stored in numText
and the text to go with it.-->
<p id="numText"></p>
<!--Here is where the number of times the button has been clicked is
stored.-->
<p>The button was pressed <span id="displayCount">0</span> times.</p>
<script>
window.onload = function () {
/*Generates a random number from 1 to 20. this number is carried
into the IF statement using the variable name GenerateNumber. The
if statement checks if the number is less than or equal to 10 and
gives out an appropriate response if so. If it dosen't meet the
criteria, it will call the else statement.
*/
function ranNum() {
var GeneratedNumber = Math.floor(Math.random() * 20) + 1;
var conclusion
if (GeneratedNumber <= 10) {
conclusion = `The number generated ${GeneratedNumber} is
less than or equal to 10`;
} else {
conclusion = `The number generated ${GeneratedNumber} is
greater than 10`;
} //END of if statement
//The given conclusion is taken here and stored/displayed on
the page using the id numText.
document.getElementById("numText").innerHTML = conclusion;
} //END of ranNum
//Global variable set to store the count.
var count = 0;
//Global variable set to store button count.
var button = document.getElementById("btn");
/*This is where the stored count is moved to be dispayed on the page
through the p tag with
the id of displayCount.*/
var display = document.getElementById("displayCount");
/*This is the function which has been to set to count on button
clicks and increment by 1 every time.*/
button.onclick = function storeClickCount() {
count++;
display.innerHTML = count;
}//END of storeClickCount
}//END of window.onload
</script>
</body>
</html>
//Version with no comments:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Random Number Generator with Button Counter</title>
</head>
<body>
<input type="button" onClick="ranNum()" id="btn" value="Generate Random
Number Between 1 and 20" />
<p id="numText"></p>
<p>The button was pressed <span id="displayCount">0</span> times.</p>
<script>
window.onload = function () {
function ranNum() {
var GeneratedNumber = Math.floor(Math.random() * 20) + 1;
var conclusion
if (GeneratedNumber <= 10) {
conclusion = `The number generated ${GeneratedNumber} is
less than or equal to 10`;
} else {
conclusion = `The number generated ${GeneratedNumber} is
greater than 10`;
}
document.getElementById("numText").innerHTML = conclusion;
}
var count = 0;
var button = document.getElementById("btn");
var display = document.getElementById("displayCount");
button.onclick = function storeClickCount() {
count++;
display.innerHTML = count;
}
}
</script>
</body>
</html>
//注释版本：
带按钮计数器的随机数发生器
按钮按了0次
window.onload=函数（）{
/*生成一个从1到20的随机数。此数字被携带
使用变量名GenerateEnumber插入IF语句
if语句检查数字是否小于或等于10，以及
如果是，则给出适当的响应。如果不符合
条件，它将调用else语句。
*/
函数ranNum（）{
var GeneratedNumber=Math.floor（Math.random（）*20）+1；
var结论
if（GeneratedNumber问题在于ranNum
不是一个全局函数，因为它隐藏在窗口中。onload
回调中，因此HTMLonclick
属性的值在其上不可见
解决方案：
将ranNum
移到回调之外的全局范围。此解决方案的缺点是，您一直使用两种方法来处理单击事件：（1）通过HTMLonclick
属性值，以及（2）通过JS代码中的onclick=
处理程序分配。这对于任何试图理解或管理代码的人来说都是令人困惑的
替代解决方案：
不要在HTML中使用onclick
属性，而是从已有的用于按钮的单击处理程序中调用ranNum
：
button.onclick = function storeClickCount() {
ranNum(); // <<-------
count++;
display.innerHTML = count;
}
button.onclick=函数存储ClickCount（）{
ranNum（）；//使用addEventListener（）
可以从窗口中绑定多个函数。onload
范围。请参见我的示例
window.onload=function（）{
函数ranNum（）{
var GeneratedNumber=Math.floor（Math.random（）*20）+1；
var结论；
if（GeneratedNumber稍微更改了您的代码。整个过程包含在一个函数（）
中，而不是两个单独的函数（）
带按钮计数器的随机数发生器
按钮按了0次
var numText=document.getElementById（“numText”）；
var displayCount=document.getElementById（“displayCount”）；
var计数=0；
函数ranNum（）{
var generatedNumber=Math.floor（Math.random（）*20）+1；
计数++；
var结论=“”；
如果（generatedNumber给你！我刚刚为你创建了一个包含两个函数的功能按钮点击；）祝你好运
window.onload=function（）{
让计数=0；
const button=document.getElementById（“btn”）；
var display=document.getElementById（“displayCount”）；
函数存储ClickCount（）{
计数++；
display.innerHTML=计数；
};
函数ranNum（）{
让GeneratedNumber=Math.floor（Math.random（）*20）+1；
让我们总结一下；
if（GeneratedNumber在我看来，在window.onload事件中触发元素操作不是一个坏做法。在代码重构的情况下（例如外部js文件）你不需要更改js代码。哦，好吧，我不知道，我会用onload进行编辑。你能解释一下，如果发生折射，会出现什么问题吗？我必须说，我没有看到问题？我不是说你哪里错了，我只是不同意你的说法（你编辑掉了）将代码放在窗口.onload
事件中会造成不必要的混乱。即使他的代码不需要事件处理程序（因为脚本放在相应的html元素之后）无论如何，我不认为这样做是一种不好的做法。这对性能几乎没有影响，而且在我看来，在这个事件中放置使用这些元素的代码是一个好习惯。这也不是很复杂。只是我个人的意见。只放置函数ranNum（）
我认为，在onload处理程序之外进行操作是明智的。谢谢你，这个答案对我帮助很大，我将把它带到未来。这是一种很好的做事方式，谢谢！我也很高兴看到为同一任务编写不同的代码以获得相同的结果。谢谢你，我非常感谢你的解释。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Random Number Generator with Button Counter</title>
</head>
<body>
<input type="button" onClick="ranNum()" id="btn" value="Generate Random
Number Between 1 and 20" />
<p id="numText"></p>
<p>The button was pressed <span id="displayCount">0</span> times.</p>
<script>
var numText = document.getElementById("numText");
var displayCount = document.getElementById("displayCount");
var count = 0;
function ranNum() {
var generatedNumber = Math.floor(Math.random() * 20) + 1;
count++;
var conclusion = '';
if (generatedNumber <= 10) {
conclusion = `The number generated ${generatedNumber} is
less than or equal to 10`;
} else {
conclusion = `The number generated ${generatedNumber} is
greater than 10`;
}
numText.innerHTML = conclusion;
displayCount.innerHTML = count;
};
</script>
</body>
</html>