Develop Reference

JS Alert when items collected?

I have created a maze game where the user must collect all the coins in the maze, however I am trying to make an alert appear once the user has collected all the coins, not in any particular order just in general. The alert is being very troublesome at the moment and not working correctly and I'm not sure where I am going wrong based off my research into the matter. I am new to JavaScript so apologies for any clear mistakes.
EDIT I GOT TOLD TO REPHRASE MY QUESTION MORE DIRECTLY - SO THIS ISN'T A DUPLICATE QUESTION. I ALSO HAVE A MAP DECLARDED BUT CANNOT UPLOAD AS IT'S TOO MUCH CODE.
Also, when I say not working correctly, it will appear at random counts as supposed to when the last reward has been collected.
var el = document.getElementById('game');
function drawWorld(){
el.innerHTML = '';
for(var y = 0; y < map.length ; y = y + 1) {
for(var x = 0; x < map[y].length ; x = x + 1) {
if (map[y][x] === 1) {
el.innerHTML += "<div class='borders'></div>";
} else if (map[y][x] === 2) {
el.innerHTML += "<div class='reward'></div>";
} else if (map[y][x] === 3) {
el.innerHTML += "<div class='ground'></div>";
} else if (map[y][x] === 5) {
el.innerHTML += "<div class='character'></div>";
} else if (map[y][x] === 4) {
el.innerHTML += "<div class='ship'></div>";
}
}
el.innerHTML += "<br>";
}
winGame();
}
function restartGame(){
window.location.reload();
}
function winGame(){
if (!map[5].includes(2) && !map[2].includes(2) &&
!map[3].includes(2) && !map[2].includes(2) && !map[4].includes(2)
&& !map[2].includes(2))
alert("Well done!");
}
drawWorld();
document.onkeydown = function(event){
if (event.keyCode === 37){
if ( map[character.y][character.x-1] !== 1){
map[character.y][character.x] = 3;
character.x = character.x - 1;
map[character.y][character.x] = 5;
drawWorld();
}
} else if (event.keyCode === 38){
if ( map[character.y-1][character.x] !== 1){
map[character.y][character.x] = 3;
character.y = character.y - 1;
map[character.y][character.x] = 5;
drawWorld();
}
} else if (event.keyCode === 39){
if ( map[character.y][character.x+1] !== 1){
map[character.y][character.x] = 3;
character.x = character.x + 1;
map[character.y][character.x] = 5;
drawWorld();
}
} else if (event.keyCode === 40){
if ( map[character.y+1][character.x] !== 1){
map[character.y][character.x] = 3;
character.y = character.y + 1;
map[character.y][character.x] = 5;
drawWorld();
}
}
console.log(map)
}

Variable only works locally

I wrote some functions involving prime factorization and I noticed that when I identified my test paragraph (for testing the results of functions and such) as document.getElementById("text"), it worked fine. However, when I declared a global variable text as var text = document.getElementById("text"), and then substituted in text for the longer version, it no longer worked. I did, however, notice that it worked when I locally declared text. Why is this and how can I fix it? My JSFiddle is here: https://jsfiddle.net/MCBlastoise/3ehcz214/
And this is my code:
var text = document.getElementById("text");
function isPrime(num) {
var lastDigit = parseInt((num + "").split("").reverse()[0]);
if (typeof num !== "number" || num <= 1 || num % 1 !== 0) {
return undefined;
}
else if (num === 2) {
return true;
}
else if (lastDigit === 0 || lastDigit === 2 || lastDigit === 4 || lastDigit === 5 || lastDigit === 6 || lastDigit === 8) {
return false;
}
else {
for (var i = 2; i < num; i++) {
if (num % i === 0) {
return false;
}
}
return true;
}
}
function factorSplit(dig) {
if (typeof dig !== "number" || dig <= 1 || dig % 1 !== 0) {
return undefined;
}
else if (dig === 2) {
return undefined;
}
else {
var factor;
for (var i = 2; i < dig; i++) {
if (dig % i === 0) {
factor = i;
break;
}
}
if (factor === undefined) {
return undefined;
}
else {
return [factor, (dig / factor)];
}
}
}
function allPrimes(arr) {
if (Array.isArray(arr) === false || arr.length < 1) {
return undefined;
}
else {
for (var i = 0; i < arr.length; i++) {
if (isPrime(arr[i]) !== true) {
return false;
}
}
return true;
}
}
function primeFactors(int) {
if (typeof int !== "number" || int <= 1) {
return undefined;
}
else if (isPrime(int) === true) {
return false;
}
else {
var initFactors = factorSplit(int);
while (allPrimes(initFactors) !== true) {
initFactors = initFactors.concat(factorSplit(initFactors[initFactors.length - 1]));
initFactors.splice((initFactors.length - 3), 1);
}
return initFactors;
}
}
function listPrimes() {
repeat = setInterval(findPrime, 1);
}
var primeInts = [2];
var check;
function findPrime() {
var i = primeInts[primeInts.length - 1] + 1;
if (check === undefined) {
check = true;
text.innerHTML = primeInts[0];
}
else {
while (isPrime(i) !== true) {
i++;
}
primeInts.push(i);
text.innerHTML += ", " + primeInts[primeInts.length - 1];
}
}
//text.innerHTML = isPrime(6);
<div onclick="listPrimes()" style="cursor:pointer; background-color:black; width:30px; height:30px"></div>
<p id="text"></p>

The text is global, you just need to make sure the whole script file is included in the html. Here's an example of what I mean
Here in code snippets stackoverflow does this for us already.
var text = document.getElementById("text");
function isPrime(num) {
var lastDigit = parseInt((num + "").split("").reverse()[0]);
if (typeof num !== "number" || num <= 1 || num % 1 !== 0) {
return undefined;
} else if (num === 2) {
return true;
} else if (lastDigit === 0 || lastDigit === 2 || lastDigit === 4 || lastDigit === 5 || lastDigit === 6 || lastDigit === 8) {
return false;
} else {
for (var i = 2; i < num; i++) {
if (num % i === 0) {
return false;
}
}
return true;
}
}
function factorSplit(dig) {
if (typeof dig !== "number" || dig <= 1 || dig % 1 !== 0) {
return undefined;
} else if (dig === 2) {
return undefined;
} else {
var factor;
for (var i = 2; i < dig; i++) {
if (dig % i === 0) {
factor = i;
break;
}
}
if (factor === undefined) {
return undefined;
} else {
return [factor, (dig / factor)];
}
}
}
function allPrimes(arr) {
if (Array.isArray(arr) === false || arr.length < 1) {
return undefined;
} else {
for (var i = 0; i < arr.length; i++) {
if (isPrime(arr[i]) !== true) {
return false;
}
}
return true;
}
}
function primeFactors(int) {
if (typeof int !== "number" || int <= 1) {
return undefined;
} else if (isPrime(int) === true) {
return false;
} else {
var initFactors = factorSplit(int);
while (allPrimes(initFactors) !== true) {
initFactors = initFactors.concat(factorSplit(initFactors[initFactors.length - 1]));
initFactors.splice((initFactors.length - 3), 1);
}
return initFactors;
}
}
function listPrimes() {
repeat = setInterval(findPrime, 1);
}
var primeInts = [2];
var check;
function findPrime() {
var i = primeInts[primeInts.length - 1] + 1;
if (check === undefined) {
check = true;
text.innerHTML = primeInts[0];
} else {
while (isPrime(i) !== true) {
i++;
}
primeInts.push(i);
text.innerHTML += ", " + primeInts[primeInts.length - 1];
}
}
function test() {
console.log("inside test1")
console.log(text);
text.innerHTML = "testtt"
}
function test2() {
console.log("inside test2")
console.log(text);
text.innerHTML = "testtt2"
}
text.innerHTML = isPrime(6);
<div onclick="test()" style="cursor:pointer; background-color:black; width:30px; height:30px"></div>
<p id="text"></p>
<div onclick="test2()" style="cursor:pointer; background-color:black; width:30px; height:30px"></div>
In the head the script runs/loads first and because you don't have the var's in a function they are never re-used they remain with the original value which is null since the document didn't exist at that time, then when the page loads all it has is access to the functions a call to the global var is null. This is why the code previously only worked when text = document.getElementById('text') was in a function.

Change this a function so I can pass a id into it- javascript

At the moment I am creating a Hangman Game and I have 26 different functions for each button on the web page. When a button is clicked its function works. What I want to do is change this so all I need is one function for all 26 buttons. Here is my HTML at the moment:
A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T
U
V
W
X
Y
Z
Here is my Javascript:
function A(event) {
if (event.target.classList.contains("disabled")) {
event.preventDefault();
}
document.getElementById("A").style.opacity = "0.5";
event.target.classList.add("disabled");
for (var letter = 0; letter <= randomWord.length - 1; letter++) {
if (randomWord[letter] === "a") {
document.getElementById("letter_" + letter).innerHTML = "A";
if (oneClick === true) {
score = score + 1;
oneClick = false;
}
document.getElementById("Score").innerHTML = score;
} else if (randomWord.indexOf("a") == -1 && hasLooped === true) {
if (oneClick === true) {
score = score + 1;
oneClick = false;
}
document.getElementById("Score").innerHTML = score;
hasLooped = false;
mistakesLeft = mistakesLeft - 1;
document.getElementById("attempsLeft").innerHTML = mistakesLeft;
console.log(mistakesLeft);
if (mistakesLeft == 7) {
document.getElementById("part-1").style.display = "block";
}
else if (mistakesLeft == 6) {
document.getElementById("part-2").style.display = "block";
} else if (mistakesLeft == 5) {
document.getElementById("part-3").style.display = "block";
} else if (mistakesLeft == 4) {
document.getElementById("part-4").style.display = "block";
} else if (mistakesLeft == 3) {
document.getElementById("part-5").style.display = "block";
} else if (mistakesLeft == 2) {
document.getElementById("part-6").style.display = "block";
} else if (mistakesLeft == 1) {
document.getElementById("part-7").style.display = "block";
} else {
document.getElementById("part-8").style.display = "block";
}
}
}
}
What changes will I need to make to my HTML and Javascript so I no longer need to have 26 different functions? The stuff with in my javascript will also need to change.
Thanks

Change this a function so I can pass a id into it
Like you said, "pass an id into it"
onclick="oneFunction(event, this.id)"
function oneFunction(event, id){
// one code
}
You don't even need id. Just pass in this and you've got your element.

You can also attach the function by addEventListener something like
HTML
A
B
C
JS
var allButtons = document.getElementsByClassName('gamebutton');
//-------------as given in a tag as class----------^^^^
for(var i=0; i<allButtons.length; i++;){
allButtons[i].addEventListener('click', function (event){
//the single function by which your game would be executed
executeFunction(event, this.id);
//the id(eg:- A, B, C)----^^^-- depends
// on click is passing
})
}

Javascript Check variable.Then gain ++ per second

I have a problem i want to check a variable.If its 0 then gain ++ after 1.5s.If its 10 then gain ++ after .4s.Its complicated.It doesnt really work.My code so far:
if(road == 1){setInterval(function(){stamina = stamina+1;document.getElementById("stamina").innerHTML = stamina;},1400);}
else if(road == 2){setInterval(function(){stamina = stamina+1;document.getElementById("stamina").innerHTML = stamina;},1300);}
else if(road == 3){setInterval(function(){stamina = stamina+1;document.getElementById("stamina").innerHTML = stamina;},1200);}
else if(road == 4){setInterval(function(){stamina = stamina+1;document.getElementById("stamina").innerHTML = stamina;},1100);}
else if(road == 5){setInterval(function(){stamina = stamina+1;document.getElementById("stamina").innerHTML = stamina;},1000);}
else if(road == 6){setInterval(function(){stamina = stamina+1;document.getElementById("stamina").innerHTML = stamina;},900);}
else if(road == 7){setInterval(function(){stamina = stamina+1;document.getElementById("stamina").innerHTML = stamina;},800);}
else if(road == 8){setInterval(function(){stamina = stamina+1;document.getElementById("stamina").innerHTML = stamina;},600);}
else if(road == 9){setInterval(function(){stamina = stamina+1;document.getElementById("stamina").innerHTML = stamina;},400);}
else if(road == 10){setInterval(function(){stamina = stamina+1;document.getElementById("stamina").innerHTML = stamina;},200);}
else{setInterval(function(){stamina++;document.getElementById("stamina").innerHTML = stamina;},1500);}
And the code to build a road is this:
function build_road() {
if ((wood + tavern) >= 29 && stone > 4 && road < 10) {
road++;
document.getElementById("road_count").innerHTML = road;
wood = (wood + tavern) - 20;
stone = stone - 5;
document.getElementById("wood").innerHTML = wood;
document.getElementById("stone").innerHTML = stone;
exp = exp + 20;
var x = document.getElementById("PROGRESS");
x.setAttribute("value", exp);
x.setAttribute("max", max);
if (exp == 100) {
exp = 0;
level++;
document.getElementById("level").innerHTML = level;
}
alert("Congratulations,You've create a Road,Now you gain stamina slightly faster.");
}
else {
alert("You need: 30Wood,5Stone .Maximum 10 Roads.")
}
}

Make reusable functions (it's often a good practice, when you a difficulties with a piece of code, to break it into small functions):
var staminaIncreaseTimer = null;
function configureStaminaIncrease(delay) {
if (staminaIncreaseTimer !== null)
clearInterval(staminaIncreaseTimer);
staminaIncreaseTimer = setInterval(function () {
increaseStamina();
}, delay);
}
function increaseStamina() {
stamina += 1;
document.getElementById("stamina").innerHTML = stamina;
}
Solution with an array (suggested by Jay Harris)
var roadIndex = road-1;
var ROAD_DELAYS = [1400, 1300, 1200, /*...*/];
var DEFAULT_DELAY = 1500;
if (roadIndex < ROAD_DELAYS.length) {
configureStaminaIncrease(ROAD_DELAYS[roadIndex]);
} else {
configureStaminaIncrease(DEFAULT_DELAY);
}
Solution with a switch instead of you if-elseif mess:
switch (road) {
case 1:
configureStaminaIncrease(1400);
break;
case 2:
configureStaminaIncrease(1300);
break;
case 3:
configureStaminaIncrease(1200);
break;
//and so on...
default:
configureStaminaIncrease(1500);
}

Javascript if statement inside of another if statement [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I'm trying to put an if statement inside of another if statement, and I think I did something very easy to fix, but I can't figure out what or where it is. I am stuck with this and any suggestions would be helpful. Thanks!
var player = 0;
var xvalue = 0;
var ovalue = 0;
function tic(a)
{
if(player === 0)
{
document.getElementById(a).value = 'X';
document.getElementById(a).disabled = 'true';
player = 1;
if(a === 'aa')
{
var i = 1
for(i = 1; i <= 1; i++; )
{
xvalue++;
}
}
else if(a === 'ab')
{
var i = 1
for(i = 1; i <= 2; i++; )
{
xvalue++;
}
else if(a === 'ac')
{
var i = 1
for(i = 1; i <= 4; i++; )
{
xvalue++;
}
else if(a === 'ba')
{
var i = 1
for(i = 1; i <= 8; i++; )
{
xvalue++;
}
else if(a === 'bb')
{
var i = 1
for(i = 1; i <= 16; i++; )
{
xvalue++;
}
else if(a === 'bc')
{
var i = 1
for(i = 1; i <= 32; i++; )
{
xvalue++;
}
else if(a === 'ca')
{
var i = 1
for(i = 1; i <= 64; i++; )
{
xvalue++;
}
else if(a === 'cb')
{
var i = 1
for(i = 1; i <= 128; i++; )
{
xvalue++;
}
else if(a === 'cc')
{
var i = 1
for(i = 1; i <= 256; i++; )
{
xvalue++;
}
if(xvalue === 448)
{
alert("player 1 wins!");
}
else if(xvalue === 7)
{
alert("player 1 wins!");
}
else if(xvalue === 56)
{
alert("player 1 wins!");
}
else if(xvalue === 273)
{
alert("player 1 wins!");
}
else if(xvalue === 84)
{
alert("player 1 wins!");
}
else if(xvalue === 73)
{
alert("player 1 wins!");
}
else if(xvalue === 146)
{
alert("player 1 wins!");
}
else if(xvalue === 292)
{
alert("player 1 wins!");
}
}
else
{
document.getElementById(a).value = 'O';
document.getElementById(a).disabled = 'true';
player = 0;
}
}

Your code is riddled with syntax errors:
else if(a === 'ab'){
var i = 1
for(i = 1; i <= 2; i++; ){
xvalue++;
}
You're opening the else if block, and inside, you open a for block, but only close one. It should've been:
else if(a === 'ab'){
var i = 1
for(i = 1; i <= 2; i++; ){
xvalue++;
}//<-- close for loops
}// then close else if block
To nest if's is pretty easy, and you seem to be doing it right, but perhaps you were asking if it was possible to combine the outer & inner ifs. In that case: yes:
if (player === 0 && a === 'aaa')
Works perfectly fine, too.
But to be honest you really need to practice a bit more: JS global variables should be avoided: functions should be passed parameters.