lundi 30 octobre 2017

JavaScript: Why am I getting an undefined value while using random numbers from an array? [on hold]

I am using Javascript to set a element's background image in from a class. The code works for the most part, but I get a undefined variable when I run the code. I am using Math.Random() to get the numbers for the variables. Here is ALL of my Javascript code:

/*
 Name: Bradley [Insert Last Name]
 Date: 10/29/2017
 Prog: JavaScript / Brackets
 File: halloween.js
 Desc: Halloween Javascript code.
*/

// Loaded
function Loaded(){
    var MainDiv = document.getElementsByClassName("main-div")[0];
    var ContentDivs = document.getElementsByClassName("middle-content");
    var BC = document.getElementById("bottom-content-div");
    var BlContent = document.getElementById("bottom-left-content");
    var BrContent = document.getElementById("bottom-right-content");
    var StartDiv = document.getElementById("start-div");
    var MiddleContentDiv = document.getElementById("middle-content-div");
    var PlayButton = document.getElementById("play-button");
    var CountdownDiv = document.getElementById("countdown-div");
    var CountdownNumbers = document.getElementById("countdown-numbers");
    var HalfScreenWidth = (screen.availWidth / 2);
    var HalfScreenHeight = (screen.availHeight / 2);
    var Numbers = 3;
    var Timer = 60;
    var Score = 0;
    var RandomContentDiv = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15];

    PlayButton.addEventListener("mousedown", ClickedPlayButton);
    CountdownNumbers.innerHTML = Numbers;
    window.addEventListener("resize", Resized);
    window.addEventListener("contextmenu", ContextMenu);


    // Width
    if(window.innerWidth <= HalfScreenWidth){
        MainDiv.style.width = HalfScreenWidth + "px";
    } else {
        MainDiv.style.width = "100%";
    }

    // Height
    if(window.innerHeight <= HalfScreenHeight){
        MainDiv.style.height = HalfScreenHeight + "px";
    } else {
        MainDiv.style.height = "100%";
    }

    // Sets StartDiv dimensions.
    StartDiv.style.width = HalfScreenWidth + "px";
    StartDiv.style.height = HalfScreenHeight + "px";
    StartDiv.style.left = "calc(50% - " + (HalfScreenWidth / 2) + "px)";
    StartDiv.style.top = "calc(50% - " + (HalfScreenHeight /  2) + "px)";

    // Sets PlayButton dimensions.
    PlayButton.style.top = "calc(" + (HalfScreenHeight /  2) + "px - 50" + "px)";

    // When CountdownNumbers Loads.
    CountdownNumbers.style.top = "calc(50% - 50px)";

    // Clicked the play button.
    function ClickedPlayButton(e){
        if(e.which == 1 || e.button == 1){
            PlayButton.style.color = "white";
            // Button
            var a = window.setInterval(function ColorIndication(){
                StartDiv.style.display = "none";
                window.clearInterval(a);
                // Delay
                var b = window.setInterval(function StartCountdown(){
                    window.clearInterval(b);
                    CountdownDiv.style.display = "block";
                    // Countdown
                    var c = window.setInterval(function Countdown(){
                        if(Numbers > 1){
                            Numbers--;
                            CountdownNumbers.innerHTML = Numbers;
                        } else if (Numbers == 1){
                            Numbers--;
                            CountdownNumbers.style.color = "orange";
                            CountdownNumbers.innerHTML = "GO!";
                        } else if (Numbers < 1){
                            CountdownNumbers.innerHTML = "";
                            CountdownDiv.style.display = "none";
                            window.clearInterval(c);
                            JackOLantern();
                        }
                    }, 1000);
                    function JackOLantern(){   
                        MiddleContentDiv.style.display = "block";
                        BC.style.display = "block";
                        BlContent.style.display = "block";
                        BrContent.style.display = "block";
                        var cd = RandomContentDiv[Math.round(Math.random()*RandomContentDiv.length)];
                        var storecd = cd;
                        ContentDivs[cd].setAttribute("style", "background-image: url('./Images/JackLantern.png'); cursor: pointer;");
                        ContentDivs[cd].addEventListener("mousedown", ClickedJOL);
                        var d = window.setInterval(function GameTime(){
                            if(Timer > 0){
                                Timer--;   
                            } else if (Timer == 0){
                                window.clearInterval(d);
                            }
                        }, 1000);
                        function ClickedJOL(){
                            Score++;
                            ContentDivs[cd].setAttribute("style", "background-image:none; cursor: default;");
                            ContentDivs[cd].removeEventListener("mousedown", ClickedJOL);
                            while(cd == storecd){
                                cd = RandomContentDiv[Math.round(Math.random()*RandomContentDiv.length-1)];
                                console.log("Number: " + cd);
                            }
                            ContentDivs[cd].setAttribute("style", "background-image: url('./Images/JackLantern.png'); cursor: pointer;");
                            ContentDivs[cd].addEventListener("mousedown", ClickedJOL);
                            storecd = cd;
                        }
                    }
                }, 200);
            }, 100);
        }
    }

    function ContextMenu(e){
        e.preventDefault();
    }
}

// Resized.
function Resized(){
    var MainDiv = document.getElementsByClassName("main-div")[0];
    var CountdownNumbers = document.getElementById("countdown-numbers");
    var HalfScreenWidth = (screen.availWidth / 2);
    var HalfScreenHeight = (screen.availHeight / 2);

    // Width
    if(window.innerWidth <= HalfScreenWidth){
        MainDiv.style.width = HalfScreenWidth + "px";
    } else {
        MainDiv.style.width = "100%";
    }

    // Height
    if(window.innerHeight <= HalfScreenHeight){
        MainDiv.style.height = HalfScreenHeight + "px";
    } else {
        MainDiv.style.height = "100%";
    }

    // When CountdownNumbers Resizes.
    CountdownNumbers.style.top = "calc(50% - 50px)";
}

I put console.log(cd); to see what numbers are being outputted. I get results, but the results are not useful in solving the problem. I will test run the code 2 times to show you what I would typically get.

Test 1:

Number: 5
Number: 13
Number: 10
Number: 1
Number: 10
Number: 6
Number: 10
Number: 3
Number: 2
Number: 15
Number: 2
Number: 3
Number: 8
Number: 15
Number: 12
Number: 7
Number: 9
Number: 2
Number: 0
Number: 8
Number: 10
Number: 3
Number: 14
Number: 13
Number: 9
Number: 1
Number: 15
Number: 13
Number: 3
Number: 2
Number: 4
Number: 14
Number: 11
Number: 0
Number: 15
Number: 7
Number: 6
Number: 1
Number: 4
Number: 7
Number: 8
Number: 6
Number: 7
Number: 4
Number: 10
Number: 0
Number: 12
Number: 11
Number: 2
Number: 7
Number: 2
Number: 11
Number: 13
Number: 6
Number: 0
Number: 5
Number: 1
Number: 2
Number: 7
Number: 8
Number: 2
Number: 13
Number: 4
Number: 3
Number: 7
Number: 15
Number: 5
Number: 1
Number: 0
Number: 2
Number: 11
Number: 8
Number: 10
Number: 12
Number: 11
Number: 1
Number: 12
Number: 11
Number: 12
Number: 0
Number: 6
Number: 8
Number: 1
Number: 11
Number: 1
Number: 12
Number: undefined

Test 2:

Number: 13
Number: 2
Number: 9
Number: 0
Number: 2
Number: 0
Number: 11
Number: 3
Number: 5
Number: 3
Number: 11
Number: 3
Number: 14
Number: 15
Number: 9
Number: 8
Number: 11
Number: 12
Number: 10
Number: 3
Number: 9
Number: 0
Number: undefined

I think the problem is coming from this statement: RandomContentDiv[Math.round(Math.random()*RandomContentDiv.length-1)];, but I don't know how to fix it because I haven't dove deep enough in Math for JavaScript. All I know is that someone said something about Math.Round giving you an inaccurate number when rounded (i.e 1.5 could round to 1), but I don't think that it applies to this. Can anyone tell me if it is the statement that is causing the problem or something else?




Aucun commentaire:

Enregistrer un commentaire