Html Question posted in
Some basic documentation can be found here.

Html – JavaScript functions don't seem to be executed when button is pressed

I am working on an app in Android Studio. I made a few buttons in my HTML and had put the ‘onclick=""’ value as my functions for each button as needed.

When the page loads, the JavaScript loads the function "gameStarter();" automatically, which generates 2 numbers, prints them onto the screen and asks the user what "num1 x num2" is. Then, the computer answer answer and three randomly generated wrong answers are output onto 4 different buttons. The function does other stuff as well but it is not relevant to this post.

Another function in use is the "userAnswerFunction(button)". This takes the value of one of the buttons pressed and compares the button’s value with the current computer answer, then edits text on the screen to show if the answer was correct or not. Then, it runs a function called "checkingLOL()" to check if the question number is below 11 and if yes, runs "gameStarter();" to generate another question for the user to answer. I’ve attached an image of what the whole thing looks like.

The problem is that neither "userAnswerFunction(button)" nor "checkingLOL();" works, so the program can not progress. Everything works except the buttons.

Here is the reference code for the 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");
    }
}

Here is the reference code for the 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>

I tried making a different button to load the next question, which used the "checkingLOL()" function. This didn’t work either and I decided to get rid of the button and use "checkingLOL()" as a check whenever the user chooses an answer.

One of the first things I tried was put the whole thing in a for loop without "checkingLOL()" or "userAnswerFunction()", but I figured out that the code would just loop 10 times without stopping and there is no effective way of stopping and waiting for user input using buttons in JavaScript, so I went ahead with my current idea that doesn’t work.

I have also tried to use a variable to keep track of when the user clicks a button, and when it is done, the value is collected and used to check against correctness. For this, I used "setTimeout();" and "clearTimeout();". This method didn’t work as when I pressed the button, nothing was done still.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I expanded on @l3l_aze's idea which led me to using .addEventListener() in the following way, providing a way for the program to stop and wait for user input before executing the previous "userAnswerFunction()" which is built inside of the .addEventListener() now. I do now believe that .addEventListener() is a good way to "pause" the application to get input even with multiple input possibilities (4 buttons not 1). Here is the code I used that made it work:

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

randomNum1 = getRandomInt(12);
randomNum2 = getRandomInt(12);
computerAnswer = randomNum1 * randomNum2;

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

setInterval(levelTimer, 1000);

const buttonArray = [1, 2, 3, 4]; // does 1,2,3 and 0 NOT 4
var randomButton = Math.floor(Math.random() * buttonArray.length);
console.log("Random button is: " + randomButton);

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++

document.addEventListener("DOMContentLoaded", (event) => {
     document.addEventListener("click", function(butt) {
        if (butt.target && butt.target.tagName === "BUTTON") {
            var buttonValue = butt.target.innerHTML;
            console.log("Computer answer is: " + computerAnswer);
            console.log("The button value is: " + buttonValue);
            if (buttonValue == computerAnswer){
                printedAnswerOutput.innerHTML = "Last correct!";
                printedAnswerOutput.style.color="green";
                scoreValue++;
                printedScore.innerHTML = "Score: " + scoreValue
                checkingLOL();
            }
            else{
                printedAnswerOutput.innerHTML = "Last incorrect!";
                printedAnswerOutput.style.color="red";
                checkingLOL();
            }
        }
    });
});
}

function checkingLOL(){
    if (questionNumber < 11){
        gameStarter();
    }
    else{
        //Redirect to a "next level" screen
    }
}

gameStarter();

  2. 0

    Instead of sending raw button values to userAnswerFunction which appears to be causing issue, send event object to the function and from that event object grab the button id.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search