Help with javascript

Question

Hi! It's a website for people to learn English coler words. When I press "yellow" the background coler will turn to yellow. I want the "yellow" and the other coler names to be bold when using its coler. So you know which button it belongs to.

Html file:

<br>
<button class="button" id="green">Green</button>
<button class="button" id="blue">Blue</button>
<button class="button" id="red">Red</button>
<button class="button" id="yellow">Yellow</button>
<button class="button" id="orange">Orange</button>
<button class="button" id="brown">Brown</button>
<button class="button" id="black">Black</button>
<button class="button" id="gray">Gray</button>
<button class="button" id="white">White</button>
<button class="button" id="pink">Pink</button>
<button class="button" id="purple">Purple</button>
</br>
<script sr

Javascript file:

var redButton = document.getElementById("red");
var blueButton = document.getElementById("blue");
var greenButton = document.getElementById("green");
var yellowButton = document.getElementById("yellow");
var orangeButton = document.getElementById("orange");
var brownButton = document.getElementById("brown");
var blackButton = document.getElementById("black");
var grayButton = document.getElementById("gray");
var whiteButton = document.getElementById("white");
var pinkButton = document.getElementById("pink");

redButton.addEventListener("click", red);
blueButton.addEventListener("click", blue);
greenButton.addEventListener("click", green);
yellowButton.addEventListener("click", yellow);
orangeButton.addEventListener("click", orange);
brownButton.addEventListener("click", brown);
blackButton.addEventListener("click", black);
grayButton.addEventListener("click", gray);
whiteButton.addEventListener("click", white);
pinkButton.addEventListener("click", pink);
purpleButton.addEventListener("click", purple);

function red() {
document.body.style.backgroundColor="red";
}

funct

Answer 1

You can reduce your JS code and get it all to work by changing it to:

window.onload = function() {
let buttons = document.getElementsByTagName('button');

function changeBGColor(event) {

for(let i = 0; i < buttons.length; i++) {
buttons[i].classList.remove('textBold');
}

document.body.style.backgroundColor = event.target.innerHTML;
event.target.classList.add('textBold');
}

for(let i = 0; i < buttons.length; i++) {
buttons[i].addEventListener('click', changeBGColor);
}
};

In your CSS add:

.textBold {
font-weight: bold;
}

Then you can change your buttons HTML to remove their ids and class unless you need them for something else.

<br>
<button>Green</button>
<button>Blue</button>
<button>Red</button>
<button>Yellow</button>
<button>Orange</button>
<button>Brown</button>
<button>Black</button>
<button>Gray</button>
<button>White</button>
<button>Pink</button>
<button>Purple</button>
<br>

Answer 2

Previous post edited to add bolding of clicked button and unbolding others. If you have any questions about the code just ask.

Answer 3

function red() {
document.body.style.backgroundColor="red";
}

function blue() {
document.body.style.backgroundColor="blue";
}

function green() {
document.body.style.backgroundColor="green";
}

function yellow() {
document.body.style.backgroundColor="yellow";
}

function orange() {
document.body.style.backgroundColor="orange";
}

function brown() {
document.body.style.backgroundColor="brown";
}

function black() {
document.body.style.backgroundColor="black";
}

function gray() {
document.body.style.backgroundColor="gray";
}

function white() {
document.body.style.backgroundColor="white";
}

function pink() {
document.body.style.backgroundColor="pink";
}

function purple() {
document.body.style.backgroundColor="purple";
}

Answer 4

Thank you so much, ChaoticDawg!