计数器值没有增加，值在 javascript 内保持不变

Question

为什么我的变量pc_score和my_score不增加？输出为 0。我在代码中省略了另外两个 eventListener 格式的函数，但应该不会影响结果。 . 我为可运行代码编辑了 post。谢谢你。感谢您查看我的问题。



<script>

    var options = ['rock','paper','scissors']
    let my_score = 0; 
    var pc_score = 0; 

    let computerChoice ;


    function computerSelection() {

         computerChoice = options[Math.floor(Math.random()*options.length)]
         return computerChoice;

    }


    var results = document.getElementById("result")
    document.getElementById("rock").addEventListener("click", ()=> {
        playerChoice=rock;
        computerSelection();
        if (computerChoice=='rock'){
             results.innerHTML="It is a tie";
        } else if (computerChoice=='paper'){
            results.innerHTML="It is a loss";
                 pc_score += 1;
        }else if (computerChoice=='scissors'){
            results.innerHTML="It is a win";
            my_score+= 1
        }

})

     const you = document.getElementById("You")
        you.innerHTML= my_score
    const computer = document.getElementById("Computer")
        computer.innerHTML=pc_score

  </script>

Answer 1

由于您在事件处理程序函数之外分配值，因此当点击发生时代码不会执行（而是这些代码在页面加载时使用初始值执行）。您必须更新事件处理函数中的 HTML。

此外，如果文本是纯文本（不是 htmlString），我建议您使用 innerText 或 textContent。

尝试以下操作：

var my_score = 0; 
var pc_score = 0;
const you = document.getElementById("You");
const computer = document.getElementById("Computer");
document.getElementById("scissors").addEventListener("click", ()=> {
    playerChoice=scissors;
    computerSelection();
    if (computerChoice == "rock"){
        results.textContent = "It is a loss";
        pc_score++;
    } else if (computerChoice == "paper"){
        results.textContent = "It is a win";
        my_score++;
    }else if (computerChoice=="scissors"){
        results.textContent = "It is a tie";
    }
    you.textContent = my_score;
    computer.textContent = pc_score;
});

Answer 2

您更新的是分数变量，而不是显示该分数的元素的 innerHTML。确实有一种 better/cleaner 方法可以做到这一点，但只需在更改值

后再次调用 computer.innerHTML=pc_score 和 you.innerHTML= my_score

计数器值没有增加，值在 javascript 内保持不变

Counter value is not increasing, value remains constant in javascript

javascript

counter

loops

increment