Untitled

mail@pastecode.io avatar
unknown
javascript
7 months ago
1.9 kB
1
Indexable
Never
document.addEventListener("DOMContentLoaded", function () {
    /*Here we create variables so we don't have to write document."..." each time we want to call on the HTML element*/
    const selectNumber = document.querySelector('.box-options'); /*making a variable called selectNumber, which calls on the class box-options (which contains all the numbers in the drowdown menu)*/
    const boxWrapper = document.querySelector('.box-wrapper'); /*making a variable called boxWrapper, which calls on the class box-wrapper (which is the area where all the yellow boxes will be)*/

    selectNumber.addEventListener('change', function () { /*Making an EventListener, using change so that when we select one of the values in the dropdown menu, it will react*/
        const selectValue = parseInt(selectNumber.value); /*Since the numbers in the dropdown menu are strings and not int yet, we convert them to int by using parseInt. Using selectNumber (see above) lets us reach the numbers from box-options class*/
        boxWrapper.innerHTML = '';  /*Clears every element inside boxWrapper before creating new ones. This way we will always create the right amount of boxes, instead of adding on new ones on the exisiting ones*/

        for (let i = 0; i < selectValue; i++) { /*A for-loop, basically creating how many boxes depending on what you chose in the dropdown menu, which is represented by selectValue here*/
            const box = document.createElement('div'); /*Making a constant box, which when called on will create a div element with no particular details yet*/
            box.className = 'boxes'; /*Telling box above to be created based on the class boxes (which lies in the CSS part, and it is there it will get the yellow color, size, etc)*/
            boxWrapper.appendChild(box); /*This line puts all of the boxes you wanted to create inside the boxWrapper, until the loop is done*/
        }
    });
}); 
Leave a Comment