Develop Reference

Javascript - div innerHTML does not change

var score = 0, time = 1, heart = 3;
window.onload = function() {
var input = document.getElementById("wordTyped");
var timeLeft = document.getElementById("time");
var life = document.getElementById("life");
input.addEventListener("click", timer, false);
function timer() {
var id = setInterval(countdown, 10);
function countdown() {
input.removeEventListener("click", timer, false);
timeLeft.innerHTML = "Time left: " + (time - 0.01).toFixed(2) + "s";
time = 1 * (time - 0.01).toFixed(2);
if (time == 0 && life.innerHTML == "") {
clearInterval(id);
} else if (time == 0) {
--heart;
time = 1;
life(heart);
}
}
function life(heart) {
heart *= 1; // To make sure it is a number type
console.log(heart);
switch (heart) {
case 2:
life.innerHTML = "❤️❤️";
console.log(life.innerHTML);
break;
case 1:
life.innerHTML = "❤️";
console.log(life.innerHTML);
break;
case 0:
default:
life.innerHTML = "";
console.log(life.innerHTML);
break;
}
/*if(heart === 2) {
life.innerHTML = "❤️❤️";
}
else if(heart == 1) {
life.innerHTML = "❤️";
}
else {
life.innerHTML = "";
}*/
}
}
}
<div id="wordGenerated">illustration</div>
<input id="wordTyped" type="text" />
<div id="time">Time left: 1.00s</div>
<div id="score">Score: 0</div>
<div id="life">❤️❤️❤️</div>
I'm not sure what is wrong within the function life(heart).
I'm trying to decrease the amount of '❤️' by one as the time hit 0 and reset back to its original value, repeating until heart equals to 0.
If I use life.innerHTML = " example " outside the function timer() scope, it will work.
Using console.log(), it shows that life.innerHTML has changed, however, the display of HTML document stays the same and I don't understand why.
I've tried .nodeValue, .innerText, and .textContent, and all still gave the same result

There is a conflict usage with life variable and life() function. Change life() function name to something else like updateLife() and your code works,
Note: You can't have the same name for variable or function or Objects within the scopes.
Demo
var score = 0, time = 1, heart = 3;
window.onload = function() {
var input = document.getElementById("wordTyped");
var timeLeft = document.getElementById("time");
var life = document.getElementById("life");
input.addEventListener("click", timer, false);
function timer() {
var id = setInterval(countdown, 10);
function countdown() {
input.removeEventListener("click", timer, false);
timeLeft.innerHTML = "Time left: " + (time - 0.01).toFixed(2) + "s";
time = 1 * (time - 0.01).toFixed(2);
if (time == 0 && life.innerHTML == "") {
clearInterval(id);
} else if (time == 0) {
--heart;
time = 1;
updateLife(heart);
}
}
function updateLife(heart) {
heart *= 1; // To make sure it is a number type
console.log(heart);
switch (heart) {
case 2:
life.innerHTML = "❤️❤️";
console.log(life.innerHTML);
break;
case 1:
life.innerHTML = "❤️";
console.log(life.innerHTML);
break;
case 0:
default:
life.innerHTML = "";
console.log(life.innerHTML);
break;
}
/*if(heart === 2) {
life.innerHTML = "❤️❤️";
}
else if(heart == 1) {
life.innerHTML = "❤️";
}
else {
life.innerHTML = "";
}*/
}
}
}
<div id="wordGenerated">illustration</div>
<input id="wordTyped" type="text" />
<div id="time">Time left: 1.00s</div>
<div id="score">Score: 0</div>
<div id="life">❤️❤️❤️</div>

there is a conflict between life and life function so you can go like $("#life").innerHTML="" or any thing else

if conditional for background color?

I've been trying to make a tic-tac-toe game but for some reason, the conditional isn't working..
I tried to target the first three elements on the first row and if they all were the same color, I wanted to browser to alert a "win" pop-up, but it doesn't happen.
Does anyone have an idea why?
Here's my code:
var one = document.getElementById("one");
var two = document.getElementById("two");
var three = document.getElementById("three");
var four = document.getElementById("four");
var five = document.getElementById("five");
var six = document.getElementById("six");
var seven = document.getElementById("seven");
var eight = document.getElementById("eight");
var nine = document.getElementById("nine");
var counter = 1;
//code that changes the box color
one.addEventListener("click", function() {
if (counter < 10 && counter % 2 === 0) {
one.style.backgroundColor = "yellow";
} else if (counter < 10 && counter % 2 != 0) {
one.style.backgroundColor = "red";
}
counter++;
console.log(counter);
});
two.addEventListener("click", function() {
if (counter < 10 && counter % 2 === 0) {
two.style.backgroundColor = "yellow";
} else if (counter < 10 && counter % 2 != 0) {
two.style.backgroundColor = "red";
}
counter++;
console.log(counter);
});
three.addEventListener("click", function() {
if (counter < 10 && counter % 2 === 0) {
three.style.backgroundColor = "yellow";
} else if (counter < 10 && counter % 2 != 0) {
three.style.backgroundColor = "red";
}
counter++;
console.log(counter);
});
four.addEventListener("click", function() {
if (counter < 10 && counter % 2 === 0) {
four.style.backgroundColor = "yellow";
} else if (counter < 10 && counter % 2 != 0) {
four.style.backgroundColor = "red";
}
counter++;
console.log(counter);
});
five.addEventListener("click", function() {
if (counter < 10 && counter % 2 === 0) {
five.style.backgroundColor = "yellow";
} else if (counter < 10 && counter % 2 != 0) {
five.style.backgroundColor = "red";
}
counter++;
console.log(counter);
});
six.addEventListener("click", function() {
if (counter < 10 && counter % 2 === 0) {
six.style.backgroundColor = "yellow";
} else if (counter < 10 && counter % 2 != 0) {
six.style.backgroundColor = "red";
}
counter++;
console.log(counter);
});
seven.addEventListener("click", function() {
if (counter < 10 && counter % 2 === 0) {
seven.style.backgroundColor = "yellow";
} else if (counter < 10 && counter % 2 != 0) {
seven.style.backgroundColor = "red";
}
counter++;
console.log(counter);
});
eight.addEventListener("click", function() {
if (counter < 10 && counter % 2 === 0) {
eight.style.backgroundColor = "yellow";
} else if (counter < 10 && counter % 2 != 0) {
eight.style.backgroundColor = "red";
}
counter++;
console.log(counter);
});
nine.addEventListener("click", function() {
if (counter < 10 && counter % 2 === 0) {
nine.style.backgroundColor = "yellow";
} else if (counter < 10 && counter % 2 != 0) {
nine.style.backgroundColor = "red";
}
counter++;
console.log(counter);
});
//logic for winning
if (one.style.backgroundColor == "red" && two.style.backgroundColor == "red" && three.style.backgroundColor == "red") {
console.log("red wins");
}
.knobs {
background-color: blue;
border: none;
padding: 50px;
margin: 10px;
}
.knobs:focus {
outline: none;
}
#total {
text-align: center;
}
<!DOCTYPE html>
<div id="total">
<button id="one" class="knobs"></button>
<button id="two" class="knobs"></button>
<button id="three" class="knobs"></button>
<br>
<button id="four" class="knobs"></button>
<button id="five" class="knobs"></button>
<button id="six" class="knobs"></button>
<br>
<button id="seven" class="knobs"></button>
<button id="eight" class="knobs"></button>
<button id="nine" class="knobs"></button>
</div>
Your help will be much appreciated!

The problem is that your if statement only runs once in the beginning. You need to turn it into a function and then call it after each event. Something like
function check() {
if (one.style.backgroundColor == "red" && two.style.backgroundColor == "red" && three.style.backgroundColor == "red"){
console.log("red wins");
}
}
At the end of the event listener you would call it like so:
check();
(Like Xufox said above, you should really look into delegation so that this is more manageable and you don't have to repeat everything.)

In your code:
var one = document.getElementById("one");
var two = document.getElementById("two");
var three = document.getElementById("three");
var four = document.getElementById("four");
var five = document.getElementById("five");
var six = document.getElementById("six");
var seven = document.getElementById("seven");
var eight = document.getElementById("eight");
var nine = document.getElementById("nine");
You don't need to declare each of your buttons like this. You can optimize it using an array and a loop like for or forEach. Like this:
var knobs = [
'one',
'two',
'three',
'four',
'five',
'six',
'seven',
'eight',
'nine'
];
knobs.forEach(function(id) {
var element = document.getElementById(id);
element.addEventListener('click', function() {
...
}
}
You are adding a listener to each button with addEventListener. This can be optimized as I mention in my point number 1. You get the button element with var element = document.getElementById(id); and the you cand add the listener in the same forEach.
I also used the same forEach to initialize my board array with -1 for each element. This mean it is empty.
Now you need to add a method to verify is there is a winner after each click. In this code sample I used verifyWinner(index); and I passed the index of the button;
Also, in this line one.style.backgroundColor == 'red' only == is not enough so I suggest you to use === for compare strings.
The problem to use this method based on CSS is that what happens if you click two or more times in the same knob? The counter will increase and the knob will change the color from red to yellow for example. That is why I recommend you to use a board array to map the "game status".
Finally, I created a board as an array and I put 1 if is red and 2 if is yellow. This will help you to simplify the verification process.
Here is the code sample. Happy coding.
Note: I reduced the knob size for better visualization in the snippet runner.
var knobs = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine'];
var board = [];
var isRed = true;
var isEndGame = false;
var counter = 0;
knobs.forEach(function(id) {
var element = document.getElementById(id);
board.push(-1);
element.addEventListener('click', function() {
var index = knobs.indexOf(id);
if (!isEndGame && board[index] == -1) {
if (isRed) {
element.style.backgroundColor = 'red';
board[index] = 1;
} else {
element.style.backgroundColor = 'yellow';
board[index] = 2;
}
verifyWinner(index);
isRed = !isRed;
counter++;
//console.log(counter)
}
if (counter == 9) {
isEndGame = true;
console.log('End of game.');
}
});
});
function verifyWinner(index) {
//logic for winning
var player = isRed ? 1 : 2;
switch (index) {
case 0:
case 2:
case 6:
case 8:
case 4:
verifyVertial(index);
verifyHorizontal(index);
verifyDiagonal(index);
break;
case 1:
case 3:
case 5:
case 7:
verifyVertial(index);
verifyHorizontal(index);
break;
}
if (isEndGame) {
console.log((isRed ? 'Red' : 'Yellow') + ' has won.');
console.log('End of game.');
}
}
function verifyVertial(index) {
//logic for winning
if (!isEndGame) {
var player = isRed ? 1 : 2;
switch (index) {
case 0:
case 3:
case 6:
if (board[0] == player && board[3] == player && board[6] == player) {
isEndGame = true;
}
break;
case 1:
case 4:
case 7:
if (board[1] == player && board[4] == player && board[7] == player) {
isEndGame = true;
}
break;
case 2:
case 5:
case 8: // edges
if (board[2] == player && board[5] == player && board[8] == player) {
isEndGame = true;
}
break;
}
}
}
function verifyHorizontal(index) {
//logic for winning
if (!isEndGame) {
var player = isRed ? 1 : 2;
switch (index) {
case 0:
case 1:
case 2: // edges
if (board[0] == player && board[1] == player && board[2] == player) {
isEndGame = true;
}
break;
case 3:
case 4:
case 5:
if (board[3] == player && board[4] == player && board[5] == player) {
isEndGame = true;
}
break;
case 6:
case 7:
case 8: // edges
if (board[6] == player && board[7] == player && board[8] == player) {
isEndGame = true;
}
break;
}
}
}
function verifyDiagonal(index) {
//logic for winning
if (!isEndGame) {
var player = isRed ? 1 : 2;
switch (index) {
case 0:
case 4:
case 8: // edges
if (board[0] == player && board[4] == player && board[8] == player) {
isEndGame = true;
}
break;
case 2:
case 4:
case 6: // edges
if (board[2] == player && board[4] == player && board[6] == player) {
isEndGame = true;
}
break;
}
}
}
.knobs {
background-color: blue;
border: none;
padding: 25px;
margin: 3px;
}
.knobs:focus .clear:focus {
outline: none;
}
#total {
text-align: center;
}
.clear {
clear: both;
}
<!DOCTYPE html>
<div id="total">
<button id="one" class="knobs"></button>
<button id="two" class="knobs"></button>
<button id="three" class="knobs"></button>
<div class="clearfix"></div>
<button id="four" class="knobs"></button>
<button id="five" class="knobs"></button>
<button id="six" class="knobs"></button>
<div class="clearfix"></div>
<button id="seven" class="knobs"></button>
<button id="eight" class="knobs"></button>
<button id="nine" class="knobs"></button>
</div>

I have a "onclick" that runs 3 functions but only runs one?

So I have a button with onclick that runs 3 functions and each function is to display a random symbol. So when I press the button, it should output 3 random symbols, but only one symbol it outputted when I click the button.
<!DOCTYPE html>
<html>
<head>
<title>MyFirstJavaScript</title>
</head>
<body>
<script>
function slots1()
{
var slot1 = Math.floor(Math.random()*4);
if (slot1 == 0) {
document.getElementById('value').innerHTML = "\u2663";
}
if (slot1 == 1) {
document.getElementById('value').innerHTML = "\u2665";
}
if (slot1 == 2) {
document.getElementById('value').innerHTML = "\u2666";
}
if (slot1 == 3) {
document.getElementById('value').innerHTML = "\u2660";
}
}
function slots2()
{
var slot2 = Math.floor(Math.random()*4);
if (slot2 == 0) {
document.getElementById('value').innerHTML = "\u2663";
}
if (slot2 == 1) {
document.getElementById('value').innerHTML = "\u2665";
}
if (slot2 == 2) {
document.getElementById('value').innerHTML = "\u2666";
}
if (slot2 == 3) {
document.getElementById('value').innerHTML = "\u2660";
}
}
function slots3()
{
var slot3 = Math.floor(Math.random()*4);
if (slot3 == 0) {
document.getElementById('value').innerHTML = "\u2663";
}
if (slot3 == 1) {
document.getElementById('value').innerHTML = "\u2665";
}
if (slot3 == 2) {
document.getElementById('value').innerHTML = "\u2666";
}
if (slot3 == 3) {
document.getElementById('value').innerHTML = "\u2660";
}
}
</script>
<button type="button" value="Spin" name="SPIN" onClick="slots1();slots2();slots3();">Spin</button>
<span id="value"></span>
</body>
</html>

Each function basically overrides the value that's changed by the previous one, so the only value you see is the result of slots3(). This following line is common to all your functions and it's your override:
document.getElementById('value').innerHTML = //some value;

How to move an element in javascript automatically with while loop?

I am making a Snake game so I'm trying to move my snake. It is moving with keys but it should move automatically on the screen. I tried doing that with while loops like in the code below but because of break; I have to press a key every time I want it to move. How can I make it move automatically? I tried removing break; an using an if statement but I didn't succeed.
Any other solutions or something else?
I'm new to programming so any advices would be helpful.
var main = function() {
var i = 0;
var j = 0;
$(document).keyup(function(event) {
var e = event.which;
while(i == 1) {
$('.snake').animate({left: '+=10px'}, 10);
break;
}
while(i == 2) {
$('.snake').animate({left: '-=10px'}, 10);
break;
}
while(i == 3) {
$('.snake').animate({top: '-=10px'}, 10);
break;
}
while(i == 4) {
$('.snake').animate({top: '+=10px'}, 10);
break;
}
//Which key is preesed
//D
if(e == 68) {
i = 1;
}
//A
else if(e == 65) {
i = 2;
}
//W
else if(e == 87) {
i = 3;
}
//S
else if(e == 83) {
i = 4;
}
//Any other key
else {
i = 0;
}
});
};
$(document).ready(main);

I think you just have to organize a little bit your code.
First. You must put your code inside a function. You really don't need a while. You can use a simple if.
function move(i) {
if(i == 1) {
$('.snake').animate({left: '+=10px'}, 10);
break;
}
if(i == 2) {
$('.snake').animate({left: '-=10px'}, 10);
break;
}
if(i == 3) {
$('.snake').animate({top: '-=10px'}, 10);
break;
}
if(i == 4) {
$('.snake').animate({top: '+=10px'}, 10);
break;
}
}
Now you have to change the event, using keydown instead of keyup
function main() {
var interval;
$(document).keydown(function(event) {
if(interval) clearInterval(interval); // Clear the previous interval
var e = event.which;
var i;
//Which key is pressed
//D
if(e == 68) {
i = 1;
}
//A
else if(e == 65) {
i = 2;
}
//W
else if(e == 87) {
i = 3;
}
//S
else if(e == 83) {
i = 4;
}
//Any other key
else {
i = 0;
}
interval = setInterval(function() {
move(i)
},1000); // repeat every 1 second
});
}
$(document).ready(main);

Passing string to javascript function results in value

Something really odd going on here, and I have gone round in circles trying to figure out what is going on...I have a couple of input boxes, with onchange events firing for them, the event being loaded with a JS function that takes the value ( name of another item ) and actions the function accordingly. Only thing is, when the value of the string arrives at the other function, it has somehow been assigned a numeric value, specifically that of the input box.
My php that helps build the form:
$filterfield = '"p_delweek"';
print "<span class='filter'>Del Week<input class='menulink spin-button' id='weekno' type='text' value='".$weekno."' onKeyUp='doFilter($filterfield)' onChange='doFilter($filterfield)' data-filtered='0'/><input type='button' value='Clear' onClick='doUnfilter()'></span>";
$filterfield = '"p_seedweek"';
print "<span class='filter'>Sow Week<input class='menulink spin-button' id='sowweekno' type='text' value='".$weekno."' onKeyUp='doFilter($filterfield)' onChange='doFilter($filterfield)' data-filtered='0'/><input type='button' value='Clear' onClick='doUnfilter()'></span>";
Resulting HTML in source:
<span class="filter">Del Week<input style="width: 50px; height: 22px;" class="menulink spin-button smartspinner" id="weekno" value="26" onkeyup='doFilter("p_delweek")' onchange='doFilter("p_delweek")' data-filtered="0" type="text"><input value="Clear" onclick="doUnfilter()" type="button"></span><span class="filter">Sow Week<input style="width: 50px; height: 22px;" class="menulink spin-button smartspinner" id="sowweekno" value="26" onkeyup='doFilter("p_seedweek")' onchange='doFilter("p_seedweek")' data-filtered="0" type="text"><input value="Clear" onclick="doUnfilter()" type="button"></span>
Javascript function that is called:
function doFilter(filterfield) {
console.log("DoFilter:"+filterfield);
var filterInfo=[
{
fieldName : filterfield,
logic : "equal",
value : Sigma.Util.getValue("weekno")
}
]
// the next lines action the filtering
var grid=Sigma.$grid("myGrid1");
console.log("filterinfo="+filterInfo);
var rowNOs=grid.applyFilter(filterInfo);
}
It all goes fine until we get to the console.log("DoFilter:"+filterfield) , which results in DoFilter:25; 25 happens to be the value of the input box.
How is it grabbing that value? How to pass the real one?

TBH — I'm not sure if I got what you're after. However, if you must call a function inline (I recommend that you don’t), you can pass a reference to the input field as parameter and make it available in the methods’s body:
<input onchange="doFilter('p_delweek', this)" type="text">
​
function doFilter(filterfield, field) {
console.log(filterfield);
// field is a reference to the input field, hence
console.log(field.value);
// will print the current value for this field
}

This is not the answer, this file is the problem:
(function($) {
$.fn.extend({
spinit: function(options) {
var settings = $.extend({ min: 0, max: 100, initValue: 0, callback: doFilter, stepInc: 1, pageInc: 10, width: 50, height: 15, btnWidth: 10, mask: '' }, options);
return this.each(function() {
var UP = 38;
var DOWN = 40;
var PAGEUP = 33;
var PAGEDOWN = 34;
var mouseCaptured = false;
var mouseIn = false;
var interval;
var direction = 'none';
var isPgeInc = false;
var value = Math.max(settings.initValue, settings.min);
var el = $(this).val(value).css('width', (settings.width) + 'px').css('height', settings.height + 'px').addClass('smartspinner');
raiseCallback(value);
if (settings.mask != '') el.val(settings.mask);
$.fn.reset = function(val) {
if (isNaN(val)) val = 0;
value = Math.max(val, settings.min);
$(this).val(value);
raiseCallback(value);
};
function setDirection(dir) {
direction = dir;
isPgeInc = false;
switch (dir) {
case 'up':
setClass('up');
break;
case 'down':
setClass('down');
break;
case 'pup':
isPgeInc = true;
setClass('up');
break;
case 'pdown':
isPgeInc = true;
setClass('down');
break;
case 'none':
setClass('');
break;
}
}
el.focusin(function() {
el.val(value);
});
el.click(function(e) {
mouseCaptured = true;
isPgeInc = false;
clearInterval(interval);
onValueChange();
});
el.mouseenter(function(e) {
el.val(value);
});
el.mousemove(function(e) {
if (e.pageX > (el.offset().left + settings.width) - settings.btnWidth - 4) {
if (e.pageY < el.offset().top + settings.height / 2)
setDirection('up');
else
setDirection('down');
}
else
setDirection('none');
});
el.mousedown(function(e) {
isPgeInc = false;
clearInterval(interval);
interval = setTimeout(onValueChange, 250);
});
el.mouseup(function(e) {
mouseCaptured = false;
isPgeInc = false;
clearInterval(interval);
});
el.mouseleave(function(e) {
setDirection('none');
if (settings.mask != '') el.val(settings.mask);
}); el.keydown(function(e) {
switch (e.which) {
case UP:
setDirection('up');
onValueChange();
break; // Arrow Up
case DOWN:
setDirection('down');
onValueChange();
break; // Arrow Down
case PAGEUP:
setDirection('pup');
onValueChange();
break; // Page Up
case PAGEDOWN:
setDirection('pdown');
onValueChange();
break; // Page Down
default:
setDirection('none');
break;
}
});
el.keyup(function(e) {
setDirection('none');
});
el.keypress(function(e) {
if (el.val() == settings.mask) el.val(value);
var sText = getSelectedText();
if (sText != '') {
sText = el.val().replace(sText, '');
el.val(sText);
}
if (e.which >= 48 && e.which <= 57) {
var temp = parseFloat(el.val() + (e.which - 48));
if (temp >= settings.min && temp <= settings.max) {
value = temp;
raiseCallback(value);
}
else {
e.preventDefault();
}
}
});
el.blur(function() {
if (settings.mask == '') {
if (el.val() == '')
el.val(settings.min);
}
else {
el.val(settings.mask);
}
});
el.bind("mousewheel", function(e) {
if (e.wheelDelta >= 120) {
setDirection('down');
onValueChange();
}
else if (e.wheelDelta <= -120) {
setDirection('up');
onValueChange();
}
e.preventDefault();
});
if (this.addEventListener) {
this.addEventListener('DOMMouseScroll', function(e) {
if (e.detail > 0) {
setDirection('down');
onValueChange();
}
else if (e.detail < 0) {
setDirection('up');
onValueChange();
}
e.preventDefault();
}, false);
}
function raiseCallback(val) {
if (settings.callback != null) settings.callback(val);
}
function getSelectedText() {
var startPos = el.get(0).selectionStart;
var endPos = el.get(0).selectionEnd;
var doc = document.selection;
if (doc && doc.createRange().text.length != 0) {
return doc.createRange().text;
} else if (!doc && el.val().substring(startPos, endPos).length != 0) {
return el.val().substring(startPos, endPos);
}
return '';
}
function setValue(a, b) {
if (a >= settings.min && a <= settings.max) {
value = b;
} el.val(value);
}
function onValueChange() {
if (direction == 'up') {
value += settings.stepInc;
if (value > settings.max) value = settings.max;
setValue(parseFloat(el.val()), value);
}
if (direction == 'down') {
value -= settings.stepInc;
if (value < settings.min) value = settings.min;
setValue(parseFloat(el.val()), value);
}
if (direction == 'pup') {
value += settings.pageInc;
if (value > settings.max) value = settings.max;
setValue(parseFloat(el.val()), value);
}
if (direction == 'pdown') {
value -= settings.pageInc;
if (value < settings.min) value = settings.min;
setValue(parseFloat(el.val()), value);
}
raiseCallback(value);
}
function setClass(name) {
el.removeClass('up').removeClass('down');
if (name != '') el.addClass(name);
}
});
}
});
})(jQuery);
Why and where does this alter the passing value of a function attached to the < INPUT > ?