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