我可以'不要让这几行简单的代码正常工作，也不知道为什么

I can't make these few simple line of code work correctly and have no idea why

本文关键字：常工作 代码 工作 为什么 不知道 简单 几行 我可以      更新时间：2023-09-26

我尝试了这个简单的练习，我确实做到了，但没有正确。它应该在你点击按钮时给你一个介于0到1000之间的随机数。当你再次点击按钮时，它会创建另一个随机数，如果它比上一个大，它会显示它。如果不是，它什么也不做。当它这样做的时候，它会计算它运行该函数的次数。我做的那个确实给了我随机数字，但有时，它显示的数字比上一个小，有时没有。我不明白为什么。我怀疑这可能是因为我试图更改按钮功能的代码行。

<!DOCTYPE html>
<html>
<head>
<input id="btn" type="button" onclick="initiate(1)" value="Click me!"><br>
<script>
function geid(id) {
    return document.getElementById(id);
}
var count = 0;
function initiate(n) {
    var x = n;
    n = Math.floor(Math.random() * 1000);
    document.getElementById("btn").onclick = function () {
        initiate(n);
    }
    if (n > x) {
        geid("fid").innerHTML = n;
        count += 1;
        geid("fid2").innerHTML = count + " times";
    } else {
        count += 1;
        geid("fid2").innerHTML = count + " times";
    }
}
</script>
</head>
<body>
Number : <div id="fid">0</div>
Tried <div id="fid2">0</div>
</body>
</html>

问题是，无论新选择的n值是否大于前一个值（x），您总是在更改onclick函数。

举个例子：假设语句Math.floor(Math.random()*1000);在多次运行时生成以下值序列：100、500、200、300。

第一次单击时，函数被调用为initiate(1)，点fid1被设置为保持100，onclick处理程序被设置为调用initiate(100)。

第二次单击时，函数被调用为initiate(100)，点fid1被设置为保持500，onclick处理程序被设置为调用initiate(500)。到目前为止还不错。

第三次单击时，函数被调用为initiate(500)，点fid1保持不变为500，onclick处理程序被设置为调用initiate(200)。嗯…

第四次单击时，函数被调用为initiate(200)，点fid1被设置为保持300，onclick处理程序被设置为调用initiate(300)。

因此，问题是，如果您想更改处理程序以始终保持fid1中的当前值，那么除非n > x，否则不应该更改处理程序。

这里有一个干净的版本

<!DOCTYPE html>
<html>
  <head>
    <script>
      (function(){
        var count = 0, lastRandom = 0, click;
        click = function () {
          var random;
          random = Math.floor(Math.random()*1000);
          if (random > lastRandom) {
            document.getElementById("fid").innerHTML = random;
          }
          count += 1;
          document.getElementById("fid2").innerHTML = count+" times";
        };
        window.addEventListener('load',function(){
          document.getElementById('btn').addEventListener('click',click,false);
        },false);
      });
    </script>
  </head>
  <body>
    <input id="btn" type="button" value="Click me!"><br>
    Number : <div id="fid">0</div>
    Tried <div id="fid2">0</div>
  </body>
</html>

不要只是复制粘贴这个。如果它有效（我现在无法测试），那么试着了解它在做什么。如果你不能，请问，如果你需要，我可以添加一些评论。

在放置东西的方式上，这里似乎有几个错误。这种重新安排应该有效：

function geid(id){return document.getElementById(id);}
var count = 0;
    var x = 0;
function initiate(){
    n =  Math.floor(Math.random()*1000);
    if(n>x){
        x = n;
        geid("fid").innerHTML = n;
        count +=1;
        geid("fid2").innerHTML = count + " times";
    }else{
        count +=1;
        geid("fid2").innerHTML = count + " times";
    }
}
document.getElementById("btn").onclick = function(){
    initiate();
}

优化空间很大，但这一点应该很清楚。

更新

这是一个我认为相对干净的版本：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input id="btn" type="button" value="Click me!"><br>
<p>Number : <span id="number">0</span></p>
<p>Tried <span id="tried">0</span></p>
<script>
    function geid(id){return document.getElementById(id);}
    var count = 0, highest = 0, number = geid("number"), tried = geid("tried");
    geid("btn").onclick = function(){
        var random =  Math.floor(Math.random() * 1000);
        count += 1;
        tried.innerHTML = count + " times";
        if (random > highest){
            highest = random;
            number.innerHTML = random;
        }
    }
</script>
</body>
</html>

为了不在全局范围内公开任何内容，我可能仍然会将整个内容封装在IIFE中，但除此之外，我相信，这段代码现在可读性相当高，效率也相当高。

如果您快速单击按钮，此更改将不会生效。。。。

document.getElementById("btn").onclick = function(){ // right here
  initiate(n);                                       // so not a good idea.
}

只需输入以下内容：

document.getElementById("btn").onclick = function(){
    initiate(n);
}

在您的启动功能之外

类似：

function geid(id){return document.getElementById(id);}
var count = 0;
function initiate(n){
    var x = n;
    n =  Math.floor(Math.random()*1000);

if(n>x){
    geid("fid").innerHTML = n;
    count +=1;
    geid("fid2").innerHTML = count + " times";
}else{
    count +=1;
    geid("fid2").innerHTML = count + " times";
}

}
window.onload = function() {

    document.getElementById("btn").onclick = function(){
      var n = 10; // some number    
      initiate(n);
    }
}
相关文章：