Develop Reference

How to not overwrite button actions?

I have a table with random words and I want specific words to be grayed out when clicking one of the buttons. On the second press of the same button, the words that weren’t grayed on the first click are now gray, and the rest go back to being white (the second press is like inverting the output in a way). Here’s my code:
var pressCount = [0, 0, 0];
var table = document.getElementsByTagName("td");
document.body.addEventListener("click", function(event) {
var target = event.target;
var id = target.id;
var index;
if (id === "b1") {
index = 0;
} else if (id === "b2") {
index = 1;
} else if (id === "b3") {
index = 2;
} else if (id === "reset") {
reset();
return;
} else {
return;
}
pressCount[index]++;
if (pressCount[index] === 1) {
target.style.backgroundColor = "green";
var wordsToGray;
if (index === 0) {
wordsToGray = ["Behave", "Reach"];
} else if (index === 1) {
wordsToGray = ["Take", "Behave", "Utopia"];
} else if (index === 2) {
wordsToGray = ["Like", "Median"];
}
for (var i = 0; i < table.length; i++) {
if(wordsToGray.includes(table[i].innerHTML)) {
table[i].style.color = "gray";
} else {
table[i].style.color = "white";
}
}
} else if (pressCount[index] === 2) {
target.style.backgroundColor = "red";
var wordsToGray;
if (index === 0) {
wordsToGray = ["Take", "Riddle", "Like", "Move", "Median", "Utopia", "Walk"];
} else if (index === 1) {
wordsToGray = ["Riddle", "Like", "Move", "Reach", "Median", "Walk"];
} else if (index === 2) {
wordsToGray = ["Take", "Behave", "Riddle", "Move", "Reach", "Utopia", "Walk"];
}
for (var i = 0; i < table.length; i++) {
if(wordsToGray.includes(table[i].innerHTML)) {
table[i].style.color = "gray";
} else {
table[i].style.color = "white";
}
}
} else {
target.style.backgroundColor = "";
pressCount[index] = 0;
}
});
function reset() {
var table = document.getElementsByTagName("td");
for (var i = 0; i < table.length; i++) {
table[i].style.color = "white";
}
var b1Button = document.getElementById("b1");
b1Button.style.backgroundColor = "";
var b2Button = document.getElementById("b2");
b2Button.style.backgroundColor = "";
var b3Button = document.getElementById("b3");
b3Button.style.backgroundColor = "";
pressCount = [0, 0, 0];
}
table {
font-size: 30px;
width: 25%;
text-align: center;
border: none;
background-color: black;
<table>
<tr>
<td style="color:white;">Take</td>
<td style="color:white;">Behave</td>
<td style="color:white;">Riddle</td>
</tr>
<tr>
<td style="color:white;">Like</td>
<td style="color:white;">Move</td>
<td style="color:white;">Reach</td>
</tr>
<tr>
<td style="color:white;">Median</td>
<td style="color:white;">Utopia</td>
<td style="color:white;">Walk</td>
</tr>
</table>
<br>
<button id="b1">Button 1</button>
<button id="b2">Button 2</button>
<button id="b3">Button 3</button>
<button id="reset">RESET</button>
The problem is that when, for example, I press button 2 once and then button 1 once, the output shows only the words "Behave" and "Reach" grayed out (it’s the action on the first press of button 1). What I want the output to be, is the words "Take", "Behave", "Reach" and "Utopia" being grayed out. Meaning the action of button 2 isn’t overwritten.
I’m also thinking of having an action on the third button press that resets the buttons actions but I haven’t thought on how this is achievable and I’m getting ahead of myself here.

Evaluate if statements in javascript

So I'm following the modern JavaScript from the beginning by brad traversy, and in the guess number project the app ignores all the conditions in the first if statement and continue. I checked the code in the project file and it's the same, I tried switch statement, I put each condition in a separate if statement, and still doesn't work
let min = 1,
max = 10,
winningGuess = 2,
guessesNum = 3;
// Grab on UI Elements
const game = document.querySelector('#game'),
minNum = document.querySelector('.min-num'),
maxNum = document.querySelector('.max-num'),
guessInput = document.querySelector('#guess-input'),
guessBtn = document.querySelector('#guess-btn'),
message = document.querySelector('.message');
// Assign UI to min and Max
minNum.textContent = min;
maxNum.textContent = max;
// Add an EventListener
guessBtn.addEventListener('click', function() {
let guess = parseInt(guessInput.value);
if (isNaN(guess) || guess < min || guess > max) {
setMessage(`Please enter a Number between ${min} and ${max}`);
}
if (guess === winningGuess) {
gameOver(true, `Great Job ${winningGuess} is the Correct guess, You Won!`)
} else {
guessesNum -= 1;
if (guessesNum === 0) {
gameOver(false, `Sorry you lost, The correct guess was ${winningGuess}`)
} else {
guessInput.style.borderColor = 'red';
setMessage(`${guess} is not the correct number, You have ${guessesNum} guesses left. Please try again`, 'red');
guessInput = '';
}
}
});
function gameOver(won, msg) {
let color;
won === true ? color = 'green' : color = 'red';
guessInput.disabled = true;
guessInput.style.borderColor = color;
message.style.color = color;
setMessage(msg);
}
function setMessage(msg, color) {
message.textContent = msg;
message.style.color = color;
};
<div class="container">
<h1>The Number Guesser Game</h1>
<div id="game">
<p>Guess a number between <span class="min-num"></span> and <span class="max-num"></span></p>
<input type="number" id="guess-input" placeholder="Enter Your Guess">
<input type="submit" value="Submit" id="guess-btn">
<p class="message"></p>
</div>
</div>

Your if statement is absolutely fine, the reason you never see the message "Please enter a Number between ${min} and ${max}" is because you let the code continue, and almost immediately that message is overwritten by a different one. Simply adding a return statement within your if block will solve this problem.
Note I also fixed this line guessInput = ''; which should be guessInput.value = '';
let min = 1,
max = 10,
winningGuess = 2,
guessesNum = 3;
// Grab on UI Elements
const game = document.querySelector('#game'),
minNum = document.querySelector('.min-num'),
maxNum = document.querySelector('.max-num'),
guessInput = document.querySelector('#guess-input'),
guessBtn = document.querySelector('#guess-btn'),
message = document.querySelector('.message');
// Assign UI to min and Max
minNum.textContent = min;
maxNum.textContent = max;
// Add an EventListener
guessBtn.addEventListener('click', function() {
let guess = parseInt(guessInput.value);
if (isNaN(guess) || guess < min || guess > max) {
setMessage(`Please enter a Number between ${min} and ${max}`);
return; // here
}
if (guess === winningGuess) {
gameOver(true, `Great Job ${winningGuess} is the Correct guess, You Won!`)
} else {
guessesNum -= 1;
if (guessesNum === 0) {
gameOver(false, `Sorry you lost, The correct guess was ${winningGuess}`)
} else {
guessInput.style.borderColor = 'red';
setMessage(`${guess} is not the correct number, You have ${guessesNum} guesses left. Please try again`, 'red');
guessInput.value = '';
}
}
});
function gameOver(won, msg) {
let color;
won === true ? color = 'green' : color = 'red';
guessInput.disabled = true;
guessInput.style.borderColor = color;
message.style.color = color;
setMessage(msg);
}
function setMessage(msg, color) {
message.textContent = msg;
message.style.color = color;
};
<div class="container">
<h1>The Number Guesser Game</h1>
<div id="game">
<p>Guess a number between <span class="min-num"></span> and <span class="max-num"></span></p>
<input type="number" id="guess-input" placeholder="Enter Your Guess">
<input type="submit" value="Submit" id="guess-btn">
<p class="message"></p>
</div>
</div>

Try changing the const to let. You're editing all these later in your code:
let game = document.querySelector('#game'),
minNum = document.querySelector('.min-num'),
maxNum = document.querySelector('.max-num'),
guessInput = document.querySelector('#guess-input'),
guessBtn = document.querySelector('#guess-btn'),
message = document.querySelector('.message');

How to beat a JavaScript condition riddle?

I am using a foreach loop in php to load data from a mysql table. I'm using the data ID's loaded from the data base and applying it to the button values.
The buttons come in two colors, green and white. The buttons represent likes for liking comments or posts.
The total existing number of likes starts at 6 (div id="total")
white buttons
If button 1 has color of white and you click it, total likes (6) will increase by 1. If you click button 1 again, total likes (7) will decrease by 1.
If button 1, button 2, and button three are clicked, total likes (6) increases by 3 ( 1 for each button). If button 1, button 2 and button 3 are clicked again, the total likes (9) will decrease by 3.
The Puzzle
Green buttons
How do I make it so, When a green button is clicked, the total (6) decrease by 1, and if the button is clicked again, it should increase by 1. Unlike white buttons.
If Green button 3, 5 and 6 are clicked, the total (6) should decease by 3. if the same buttons are clicked again, total (6) increases by 3.
Here is my code
var colorcode = "rgb(116, 204, 49)";
var buttonid = str;
var elem = document.getElementById(buttonid);
var theCSSprop = window.getComputedStyle(elem, null).getPropertyValue("background-color");
var initialtotal = parseInt(document.getElementById("total").innerHTML, 10);
var likes = new Array();
function showUser(str) {
////// 1st condition /////
if (theCSSprop == colorcode) {
if (likes[value] == 0 || !likes[value]) {
likes[value] = 1;
} else {
likes[value] = 0;
}
var sum = 0;
for (i = 0; i < likes.length; i++) {
if (likes[i] == 1) {
sum--
}
}
}
////// 2nd condition /////
else {
if (likes[str] == 0 || !likes[str]) {
likes[str] = 1;
} else {
likes[str] = 0;
}
var sum = 0;
for (i = 0; i < likes.length; i++) {
if (likes[i] == 1) {
sum++
}
}
}
var tot = initialtotal + sum;
document.getElementById("total").innerHTML = tot;
}
<div id="total" style="width:100px;padding:50px 0px; background-color:whitesmoke;text-align:center;">6 </div>
<!---------------------------------------------------------------------------------------------------------------------->
<button id="5" value="5" onclick="showUser(this.value)">LIKE </button>
<button id="346" value="346" onclick="showUser(this.value)" style="background-color:rgb(116, 204, 49);">LIKE </button>
<button id="128" value="128" onclick="showUser(this.value)" style="background-color:rgb(116, 204, 49);">LIKE </button>
<button id="687" value="687" onclick="showUser(this.value)">LIKE </button>
<button id="183" value="183" onclick="showUser(this.value)" style="background-color:rgb(116, 204, 49);">LIKE </button>
<button id="555" value="555" onclick="showUser(this.value)">LIKE </button>
<!---------------------------------------------------------------------------------------------------------------------->

Instead of passing this.value to showUser(), just pass this. That way, the function can get the value and the style directly, without having to call getElementById() (you're not passing the ID). Then you need to set theCSSprop inside the function, so it's the property of the current button.
To make green buttons alternate direction from increment to decrement, you need a global variable that remembers what it did the last time the function was called.
Also, you don't need to write if(likes[str] == 0 || !likes[str]), since 0 is faley. Just write if(!likes[str]).
var colorcode = "rgb(116, 204, 49)";
var likes = new Array();
var greenIncr = -1;
function showUser(elem) {
var initialtotal = parseInt(document.getElementById("total").innerHTML, 10);
////// 1st condition /////
var str = elem.value;
var theCSSprop = window.getComputedStyle(elem, null).getPropertyValue("background-color");
if (theCSSprop == colorcode) {
if (!likes[str]) {
likes[str] = 1;
} else {
likes[str] = 0;
}
var sum = 0;
for (i = 0; i < likes.length; i++) {
if (likes[i] == 1) {
sum += greenIncr;
}
}
greenIncr = -greenIncr; // revese the direction of green button
}
////// 2nd condition /////
else {
if (!likes[str]) {
likes[str] = 1;
} else {
likes[str] = 0;
}
var sum = 0;
for (i = 0; i < likes.length; i++) {
if (likes[i] == 1) {
sum++
}
}
}
var tot = initialtotal + sum;
document.getElementById("total").innerHTML = tot;
}
<div id="total" style="width:100px;padding:50px 0px; background-color:whitesmoke;text-align:center;">6 </div>
<!---------------------------------------------------------------------------------------------------------------------->
<button id="5" value="5" onclick="showUser(this)">LIKE </button>
<button id="346" value="346" onclick="showUser(this)" style="background-color:rgb(116, 204, 49);">LIKE </button>
<button id="128" value="128" onclick="showUser(this)" style="background-color:rgb(116, 204, 49);">LIKE </button>
<button id="687" value="687" onclick="showUser(this)">LIKE </button>
<button id="183" value="183" onclick="showUser(this)" style="background-color:rgb(116, 204, 49);">LIKE </button>
<button id="555" value="555" onclick="showUser(this)">LIKE </button>
<!---------------------------------------------------------------------------------------------------------------------->

First naive implementation can look like this
class Counter {
constructor(initial) {
this.initial = initial
this.white = [false, false, false]
this.green = [false, false, false]
}
changeGreen(index) {
this.green[index] = !this.green[index]
}
changeWhite(index) {
this.white[index] = !this.white[index]
}
get total() {
return this.initial + this.white.reduce((total, current) => total + current, 0) + this.green.reduce((total, current) => total - current, 0)
}
}
let counter = new Counter(6)
const render = counter => {
document.querySelector('#total').innerHTML = counter.total
}
render(counter)
;['#first', '#second', '#third'].map((selector, index) => {
document.querySelector(selector).addEventListener('click', e => {
e.target.classList.toggle('pressed')
counter.changeWhite(index)
render(counter)
})
})
;['#fourth', '#fifth', '#sixth'].map((selector, index) => {
document.querySelector(selector).addEventListener('click', e => {
e.target.classList.toggle('pressed')
counter.changeGreen(index)
render(counter)
})
})
.green {
background: #00aa00
}
.pressed {
border-style: inset
}
<div id="total">0</div>
<p>
<button id="first">First</button>
<button id="second">Second</button>
<button id="third">Third</button>
<button id="fourth" class="green">Fourth</button>
<button id="fifth" class="green">Fifth</button>
<button id="sixth" class="green">Sixth</button>
</p>
But after all I've finished with something like
class Counter {
constructor(initial, strategy) {
this.initial = initial;
this.elements = [];
this.strategy = typeof strategy === 'function' ? strategy : () => {}
}
addElement(content, type, next) {
const element = {
content: content,
type: type,
state: false
};
this.elements.push(element);
return next(element, this.elements.length - 1);
}
toggleElementState(index) {
this.elements[index].state = !this.elements[index].state
}
get total() {
return this.strategy(this.initial, this.elements)
}
}
const initialize = () => {
Counter.WHITE = Symbol('white');
Counter.GREEN = Symbol('green');
const counter = new Counter(6, (initial, buttons) => {
return initial +
buttons.filter(button => button.type === Counter.WHITE).reduce((total, current) => total + Number(current.state), 0) +
buttons.filter(button => button.type === Counter.GREEN).reduce((total, current) => total - Number(current.state), 0)
});
const render = counter => {
document.querySelector('#total').innerHTML = counter.total
};
const createButton = (element, index) => {
const button = document.createElement('button');
button.setAttribute('data-id', index);
button.classList.add(element.type === Counter.GREEN ? 'green' : 'none');
button.textContent = element.content;
document.querySelector('#buttons').appendChild(button)
};
const addButton = (type, ...selectors) => {
selectors.forEach(selector => counter.addElement(selector, type, createButton));
};
render(counter);
addButton(Counter.WHITE, '#first', '#second', '#third');
addButton(Counter.GREEN, '#fourth', '#fifth', '#sixth');
addButton(Counter.WHITE, '#first', '#second', '#third');
document.querySelector('#buttons').addEventListener('click', function(e) {
e.target.classList.toggle('pressed');
counter.toggleElementState(parseInt(e.target.dataset.id));
render(counter)
})
};
document.addEventListener('DOMContentLoaded', initialize);
.green {
background: #00aa00
}
.pressed {
border-style: inset
}
<div id="total">0</div>
<p id="buttons">
</p>

what's wrong with this javascript script.?

I am trying to learn javascript by following this exercise from MDN website Learn JavaScript
here is my final code for the game.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Number guessing game</title>
<style>
html {
font-family: sans-serif;
}
body {
width: 50%;
max-width: 800px;
min-width: 480px;
margin: 0 auto;
}
.lastResult {
color: white;
padding: 3px;
}
</style>
</head>
<body>
<h1>Number guessing game</h1>
<p>We have selected a random number between 1 and 100. See if you can guess it in 10 turns or less. We'll tell you if your guess was too high or too low.</p>
<div class="form">
<label for="guessField">Enter a guess:</label>
<input type="text" id="guessField" class="guessField" autofocus>
<input type="submit" value="Submit guess" class="guessSubmit">
</div>
<div class="resultParas">
<p class="guesses"></p>
<p class="lastResult"></p>
<p class="lowOrHi"></p>
</div>
</body>
<script>
// Your JavaScript goes here
var randomNumber = Math.floor(Math.random() * 100) + 1;
var guesses = document.querySelector(".guesses");
var lastResult = document.querySelector(".lastResult");
var lowOrHi = document.querySelector(".lowOrHi");
var guessField = document.querySelector(".guessField");
var guessSubmit = document.querySelector(".guessSubmit");
var test; //used for creating new reset button
var count = 1; // counter for counting user input
function checkGuess() {
//alert('checkGuess is called');
var value = Number(guessField.value);
if (count === 1) {
guesses.textContent = "Previous guesses :"
}
guesses.textContent += value + ' ';
if (value === randomNumber) {
lastResult.textContent = "congratulation u successfully guessed the number";
lastResult.style.backgroundColor = "green";
lowOrHi.textContent = "";
left = 1;
setGameOver();
} else if (count === 10) {
lastResult.textContent = "game over"
lastResult.style.backgroundColor = "red";
left = 1;
setGameOver();
} else {
lastResult.textContent = "WRONG";
lastResult.style.backgroundColor = "red";
if (value < randomNumber) {
lowOrHi.textContent = "too low";
} else {
lowOrHi.textContent = "too high";
}
}
count++;
guessField.value = '';
}
guessSubmit.addEventListener("click", checkGuess);
function setGameOver() {
guessField.disabled = true;
guessSubmit.disabled = true;
test = document.createElement('button');
test.textContent = "restart game";
document.body.appendChild(test);
test.addEventListener('click', resetGame);
}
function resetGame() {
count = 1;
var resetParas = document.querySelectorAll('.resultParas');
for (var i = 0; i < resetParas.length; i++) {
resetParas[i].textContent = '';
}
guessField.disabled = false;
guessSubmit.disabled = false;
guessField.value = '';
lastResult.style.backgroundColor = 'white';
randomNumber = Math.floor(Math.random() * 100) + 1;
test.parentNode.removeChild(test);
}
</script>
</html>
But when i try to run the game and use the reset game button to restart the game then i am not able to manipulate guesses,lastResult and lowOrHi elements using textContent and backgroundColor properties.

Your blanking out everything inside .resultParas.. And this will include all you <p> tags. IOW: after doing that they have disappeared from the DOM, you can see this say in chrome inspector that .resultPara's after clicking reset game is now blank, and all your p tags have gone.
I think what you really want to do, is blank out the children (the p tags)..
You don't need querySelectorAll either, as in your case there is only the one.
var resetParas = document.querySelector('.resultParas');
for(var i = 0 ; i < resetParas.children.length ; i++) {
resetParas.children[i].textContent = '';
}

How to change color of text and stop when clicked the button with 4 times in javascript

I am doing basic javascript that allow user to click the button for changing the colour of text; but, when use clicked 4times , the button does not change colour.
Here is my code of changing color. I do not know how to stop with 4 times.
status = 1;
function changeColour(){
getText = document.getElementById("text");
if(status==1) {
getText.style.color = 'blue';
status = 2;
}else if(status==2) {
getText.style.color = 'red';
status = 1;
}
}
<h1 id= "text" align = "center"><b>Hello World</b></h1>
<button style="margin-left:auto;margin-right:auto;display:block" type="button" onclick="changeColour()">Click</button>
Thanks all

var status = 1;
var counter = 0;
function changeColour(){
counter ++;
if (counter < 4) {
getText = document.getElementById("text");
if(status==1) {
getText.style.color = 'blue';
status = 2;
}else if(status==2) {
getText.style.color = 'red';
status = 1;
}
}
}

You just have to set a counter outside the function
var status = 1;
var counter = 0;
function changeColour() {
if (counter == 4)
return;
counter++;
getText = document.getElementById("text");
if (status == 1) {
getText.style.color = 'blue';
status = 2;
} else if (status == 2) {
getText.style.color = 'red';
status = 1;
}
}
<html>
<head>
<title>Hello World</title>
</head>
<body>
<h1 id="text" align="center"><b>Hello World</b></h1>
<button style="margin-left:auto;margin-right:auto;display:block" type="button" onclick="changeColour()">Click</button>
</body>
</html>

Use nbr_clicks variable to count the clicks and max_clicks to set max clicks allowed then add a condition in the start of your function :
status = 1;
nbr_clicks = 0;
max_clicks = 4;
function changeColour(){
if(nbr_clicks<max_clicks)
{
nbr_clicks++;
getText = document.getElementById("text");
if(status==1) {
getText.style.color = 'blue';
status = 2;
}else if(status==2) {
getText.style.color = 'red';
status = 1;
}
}
}
<h1 id= "text" align = "center"><b>Hello World</b></h1>
<button style="margin-left:auto;margin-right:auto;display:block" type="button" onclick="changeColour()">Click</button>

Just add counter.
<html>
<head>
<title>Hello World</title>
<script language= "javascript">
var status = 1;
var count = 0;
function changeColour(){
getText = document.getElementById("text");
if(count<4){
if(status==1) {
getText.style.color = 'blue';
status = 2;
}else if(status==2) {
getText.style.color = 'red';
status = 1;
}
count++;
}else{
alert("You already clicked 4 times.");
}
}
</script>
</head>
<body>
<h1 id= "text" align = "center"><b>Hello World</b></h1>
<button style="margin-left:auto;margin-right:auto;display:block" type="button" onclick="changeColour()">Click</button>
</body>
</html>

status = 1,clk = 0
function changeColour(){
if(clk<4)clk++;
else return;
getText = document.getElementById("text");
if(status==1) {
getText.style.color = 'blue';
status = 2;
}else if(status==2) {
getText.style.color = 'red';
status = 1;
}
}
<h1 id= "text" align = "center"><b>Hello World</b></h1>
<button style="margin-left:auto;margin-right:auto;display:block" type="button" onclick="changeColour()">Click</button>

Just a new working and shorter answer with %operator
var counter = 1;
var MAX_CLICKS = 4;
function changeColour() {
var textElem = document.getElementById("text");
if (counter < MAX_CLICKS ) {
textElem.style.color = (counter % 2)? 'blue' : 'red';
counter++;
}
}
<h1 id="text" align="center"><b>Hello World</b></h1>
<button style="margin-left:auto;margin-right:auto;display:block" type="button" onclick="changeColour()">Click</button>

You can check the odd and even click by % 2 and increasing status ,also can check that 4 times click.
<script language= "javascript">
status = 1;
function changeColour(){
getText = document.getElementById("text");
if(status　% 2 != 0) {
getText.style.color = 'blue';
status++;
}else if(status　==　4) {
getText.style.color = '';
status = 1;
}
else {
getText.style.color = "red";
status++;
}
}
</script>

status = 0;
function changeColour(){
getText = document.getElementById("text");
if(status < 4) {
getText.style.color = (getText.style.color==="blue")?'red':'blue';
status = status++;
}
}