按下按钮时 JavaScript 函数似乎没有执行

问题描述 投票：0回答：1

我正在 Android Studio 中开发一个应用程序。我在 HTML 中制作了一些按钮，并根据需要将 'onclick=""' 值作为每个按钮的功能。

页面加载时，JavaScript 加载函数“gameStarter();”自动生成 2 个数字，将它们打印到屏幕上并询问用户“num1 x num2”是多少。然后，计算机答案和三个随机生成的错误答案被输出到4个不同的按钮上。该函数还可以执行其他操作，但与本文无关。

另一个正在使用的函数是“userAnswerFunction（按钮）”。这会获取按下的按钮之一的值，并将该按钮的值与当前计算机答案进行比较，然后编辑屏幕上的文本以显示答案是否正确。然后，它运行一个名为 “checkingLOL()” 的函数来检查问题编号是否低于 11，如果是，则运行“gameStarter();”生成另一个问题供用户回答。我附上了整个事情的图片。

问题是“userAnswerFunction(button)”和“checkingLOL();”都不起作用，因此程序无法进行。除了按钮之外，一切正常。

这是 JavaScript 的参考代码：

var time = 999;
var scoreValue = 0;
var questionNumber = 1;
var question = "";
var answerOutput = "";
var randomNum1 = 0;
var randomNum2 = 0;
var computerAnswer = 0;
var waitForInput = false;

var printedTime = document.getElementById("levelTimeId");
var printedScore = document.getElementById("scoreId");
var printedQuestionNumber = document.getElementById("levelQuestionNumberId");
var printedQuestion = document.getElementById("levelQuestionId");
var printedAnswerOutput = document.getElementById("answerOutputId");
var printedNum1 = document.getElementById('button1');
var printedNum2 = document.getElementById('button2');
var printedNum3 = document.getElementById('button3');
var printedNum4 = document.getElementById('button4');

function gameStarter(){
    randomNum1 = getRandomInt(12);
    randomNum2 = getRandomInt(12);
    computerAnswer = randomNum1 * randomNum2;

    function levelTimer(){
        printedTime.innerHTML = "Time: No Limit";
    }

    setInterval(levelTimer, 1000);

    function getRandomInt(max){
        return Math.floor(Math.random() * max);
    }

    const buttonArray = [1, 2, 3, 4];
    const randomButton = Math.floor(Math.random() * buttonArray.length);

    printedQuestionNumber.innerHTML = "Question " + questionNumber;
    printedQuestion.innerHTML = "What is " + randomNum1 + " x " + randomNum2 + " ?";

    if (randomButton == 1){
        printedNum1.innerHTML = computerAnswer;
        printedNum2.innerHTML = getRandomInt(144)
        printedNum3.innerHTML = getRandomInt(144)
        printedNum4.innerHTML = getRandomInt(144)
    }
    else if (randomButton == 2){
        printedNum2.innerHTML = computerAnswer;
        printedNum1.innerHTML = getRandomInt(144)
        printedNum3.innerHTML = getRandomInt(144)
        printedNum4.innerHTML = getRandomInt(144)
    }
    else if (randomButton == 3){
        printedNum3.innerHTML = computerAnswer;
        printedNum2.innerHTML = getRandomInt(144)
        printedNum1.innerHTML = getRandomInt(144)
        printedNum4.innerHTML = getRandomInt(144)
    }
    else{
        printedNum4.innerHTML = computerAnswer;
        printedNum2.innerHTML = getRandomInt(144)
        printedNum3.innerHTML = getRandomInt(144)
        printedNum1.innerHTML = getRandomInt(144)
    }

    questionNumber++
    printedScore.innerHTML = "Score: " + scoreValue
}

gameStarter();

function userAnswerFunction(button){
    var buttonValue = document.getElementById(button);
    if (buttonValue == computerAnswer){
        printedAnswerOutput.innerHTML = "Correct!";
        printedAnswerOutput.style.color="green";
        scoreValue++;
    }
    else{
        printedAnswerOutput.innerHTML = "Incorrect!";
        printedAnswerOutput.style.color="red";
    }
    checkingLOL();
}

function checkingLOL(){
    if (questionNumber < 11){
        gameStarter();
    }
    else{
        console.log("skibidi");
    }
}

这是 HTML 的参考代码：

<body>
<div class="home">
    <div class="homeItem1"><p class="levelText">Level 1</p></div> <!-- "Level 1" Icon -->
    <div class="homeItem1Placeholder1"><p class="transparentPlaceholder">1</p></div>
    <div class="homeItem1levelTime"><p id="levelTimeId" class="levelTime">PlaceholderText</p></div> <!-- paragraph outputting "Time: x" where x is time based on JavaScript -->

    <div class="homeItem2"><a href="index.html"><img src="img/home4school.png" alt="Home Button" width="40" height="40"></a></div> <!-- Home Button Icon -->
    <div class="homeItem2Placeholder"><p class="transparentPlaceholder">1</p></div>
    <div class="homeItem2score"><p id="scoreId" class="score">PlaceholderText</p></div> <!-- paragraph outputting "Score: x" where x is based on JavaScript -->

    <div class="homeItem3Placeholder1"><p class="transparentPlaceholder">1</p></div>
    <div class="homeItem3levelQuestionNumber"><p id="levelQuestionNumberId" class="levelQuestionNumber">PlaceholderText</p></div> <!-- paragraph outputting "Question Number x" -->
    <div class="homeItem3Placeholder2"><p class="transparentPlaceholder">1</p></div>

    <div class="homeItem4Placeholder1"><p class="transparentPlaceholder">1</p></div>
    <div class="homeItem4levelQuestion"><p id="levelQuestionId" class="levelQuestion">PlaceholderText</p></div> <!-- paragraph outputting "What is X x X?" -->
    <div class="homeItem4Placeholder2"><p class="transparentPlaceholder">1</p></div>

    <div class="homeItem5"><p class="transparentPlaceholder">1</p></div>

    <div class="homeItem6Placeholder1"><p class="transparentPlaceholder">1</p></div>
    <div class="homeItem6a1"><button id="button1" type="button" class="button" onclick="userAnswerFunction(button1)"></button></div> <!-- button outputting 1 of 4 numbers based on JS -->
    <div class="homeItem6Placeholder2"><p class="transparentPlaceholder">1</p></div>
    <div class="homeItem6a2"><button id="button2" type="button" class="button" onclick="userAnswerFunction(button2)"></button></div> <!-- button -->
    <div class="homeItem6Placeholder3"><p class="transparentPlaceholder">1</p></div>

    <div class="homeItem7Placeholder1"><p class="transparentPlaceholder">1</p></div>
    <div class="homeItem7answerOutput"><p id="answerOutputId" class="answerOutput">PlaceholderText</p></div> <!-- text outputting "Correct!" or "Incorrect!" based on JS -->
    <div class="homeItem7Placeholder2"><p class="transparentPlaceholder">1</p></div>

    <div class="homeItem8Placeholder1"><p class="transparentPlaceholder">1</p></div>
    <div class="homeItem8a1"><button id="button3" type="button" class="button" onclick="userAnswerFunction(button3)"></button></div> <!-- button -->
    <div class="homeItem8Placeholder2"><p class="transparentPlaceholder">1</p></div>
    <div class="homeItem8a2"><button id="button4" type="button" class="button" onclick="userAnswerFunction(button4)"></button></div> <!-- button -->
    <div class="homeItem8Placeholder3"><p class="transparentPlaceholder">1</p></div>

    <div class="homeItem9"><p class="transparentPlaceholder">1</p></div>
</div>

我尝试制作一个不同的按钮来加载下一个问题，该按钮使用“checkingLOL()”函数。这也不起作用，我决定去掉该按钮，并在用户选择答案时使用“checkingLOL()”作为检查。

我尝试的第一件事是将整个事情放入一个 for 循环中，而不使用“checkingLOL()”或“userAnswerFunction()”，但我发现代码只会循环 10 次而不停止，并且没有有效的方法使用 JavaScript 中的按钮停止并等待用户输入，所以我继续采用当前行不通的想法。

我还尝试使用变量来跟踪用户何时单击按钮，完成后，将收集该值并用于检查正确性。为此，我使用了“setTimeout();”和“clearTimeout();”。这个方法不起作用，因为当我按下按钮时，什么也没做。

javascript html function button
1个回答
0
投票

不要将原始按钮值发送到似乎会导致问题的 userAnswerFunction，而是将事件对象发送到函数并从该事件对象中获取按钮 id。

最新问题
© www.soinside.com 2019 - 2025. All rights reserved.