By ida nicole herbert


2020-06-30 03:10:24 8 Comments

using the code below, I've created a grid of buttons, 5x5, with random 1-25 numbers assigned to each button. They are to be clicked in numerical order, each's background turns red when clicked in the correct order. I can't use a global variable for this prompt. Without a global variable, I can't figure out how to increment the correctNumbers function which checks whether the right number is clicked each time. I think I'm missing something, a js function or something that would enable an incrementing variable declared within the incrementing function. I'm not looking for the whole explanation, just tips on functions i might not know about, and whether or not what i'm trying to do just isn't logicly possible.


<div id="numbers" class="hidden"></div>
<div id="youWon" class="hidden">You Won!</div>

The relevant JS:

...  /**
     * Gives the numbers a random order
     * the "Fisher-Yates shuffle" found at: https://www.frankmitchell.org/2015/01/fisher-yates/
     * @param {*} array 
     */
    const shuffle = (array) => {
        let i = 0,
            j = 0,
            temp = null
    
        for (i = array.length - 1; i > 0; i -= 1) {
            j = Math.floor(Math.random() * (i + 1))
            temp = array[i]
            array[i] = array[j]
            array[j] = temp
        }
    }
    /**
     * Generates an array of numbers 1-25
     */
    const generateNums = () => {
        document.getElementById("youWon").classList.toggle("hidden", "visible");
        const numberArray = [];
        for (let a = 1; a <= 25; a++) {
            numberArray.push(a);
        }
        shuffle(numberArray);
        let numEl = document.getElementById('numbers'); //write into html div id "numbers"
        for (let b = 0; b <= 24; b++) { //loop to create button array
            let newBtn = document.createElement('button'); //create buttons
            newBtn.className = 'number'; //assign newBtns 'number' class
            newBtn.innerText = numberArray[b]; //assign numbers to each button
            numEl.appendChild(newBtn); //match with number elements in "numbers" array
            newBtn.addEventListener("click", onNumberClick) //create function trigger
        }   
    }
/**
 * Creates a function to decide correct and incorrect clicks
 * When a user clicks a number, if it is the next number in order, then it turns a different color for the remainder of the test
 * If it is the wrong number, nothing happens 
 * @param {*} event 
 */
const incrementNum = (correctNumber) => {
    correctNumber++;
}
const onNumberClick = (event) => {
    let correctNumber = 1; //start at 1
    let numberVal = event.target; //apply it to clicks on the numbers
    if (Number(numberVal.innerHTML) + 1 == incrementNum(correctNumber)) {
        incrementNum(correctNumber);
        numberVal.classList.add("red");
    }
    if  (correctNumber == 26) {
        document.getElementById("youWon").classList.toggle("visible"); //show win message if 25 is the last button and gets clicked
    }
}

1 comments

@taffy chinX 2020-06-30 04:06:01

I would suggest that you count the number of elements in the DOM that have the class "red" and add 1... checking if the innerHTML is equal to that number to get the sequence right. So, instead of this:

if (Number(numberVal.innerHTML) + 1 == incrementNum(correctNumber)) {
    incrementNum(correctNumber);
    numberVal.classList.add("red");
}

You can have something like this:

if(Number(numberVal.innerHTML) == document.getElementsByClassName('red').length + 1) {
    numberVal.classList.add("red");
}

@ida nicole herbert 2020-06-30 05:13:53

thanks so much! that has indeed worked. I'm v new to this, trying a .length occurred to me but i wasn't implementing it right. i appreciate it!

Related Questions

Sponsored Content

28 Answered Questions

[SOLVED] What does "use strict" do in JavaScript, and what is the reasoning behind it?

61 Answered Questions

[SOLVED] How do I include a JavaScript file in another JavaScript file?

86 Answered Questions

[SOLVED] How do JavaScript closures work?

42 Answered Questions

[SOLVED] How do I remove a property from a JavaScript object?

39 Answered Questions

[SOLVED] Loop through an array in JavaScript

44 Answered Questions

[SOLVED] JavaScript closure inside loops – simple practical example

3 Answered Questions

40 Answered Questions

[SOLVED] For-each over an array in JavaScript

41 Answered Questions

[SOLVED] How do I loop through or enumerate a JavaScript object?

Sponsored Content