0

I want to change 9 of the names in the UL to a red font using a on click button, while the other 3 names remain in a black font. And I want a button to reset the red fonts back to their original font. Can anyone help?

var title = document.getElementById("title");
var buttons = document.getElementsByClassName("btn");
var buttons = document.getElementsByClassName("btn2");

for (var btnIndex = 0; btnIndex < buttons.length; btnIndex++) {
  buttons[btnIndex].onclick = function() {
    title.style.color = this.getAttribute('data-color');
  }
} else {
  title1.style.color = this.getAttribute('data-color');
}
<ul>
  <li id="title">John</li>
  <li id="title">Jack</li>
  <li id="title">Joe</li>
  <li id="title1">Jim</li>
  <li id="title">David</li>
  <li id="title">Sam</li>
  <li id="title1">Jay</li>
  <li id="title">Frank</li>
  <li id="title">Tim</li>
  <li id="title">Zack</li>
  <li id="title">Lewis</li>
  <li id="title1">Danny</li>

  <button class="btn" data-color="red">Change 9 names to red</button>
  <button class="btn2" data-color="black">Reset</button>
</ul>
Daweed
  • 1,419
  • 1
  • 9
  • 24
Java_Novice
  • 11
  • 1

2 Answers2

1

There are a couple of problems with your markup, which I'll address below, but to answer your actual question, you can do something like this:

// get references to the buttons
const button1 = document.querySelector('.btn');
const button2 = document.querySelector('.btn2');

// declare a function that adds the class 'red' to items matching the given selector
const select = selector => {
  [...document.querySelectorAll(selector)].forEach(
    element => element.classList.add('red')
  );
}

// declare a function that removes the given class from all elements that currently have it
const deselect = className => {
  [...document.querySelectorAll('.' + className)].forEach(
    element => element.classList.remove(className)
  );
}

// add a click handler to the button that invokes the
// select function above for items whose class includes 'title'
button1.addEventListener('click', () => select('.title'));

// add a click handler to the second button that removes the 'red' class from all items
button2.addEventListener('click', () => deselect('red'));
.red {
  color: red;
}
<ul>
  <li class="title">John</li>
  <li class="title">Jack</li>
  <li class="title">Joe</li>
  <li class="title1">Jim</li>
  <li class="title">David</li>
  <li class="title">Sam</li>
  <li class="title1">Jay</li>
  <li class="title">Frank</li>
  <li class="title">Tim</li>
  <li class="title">Zack</li>
  <li class="title">Lewis</li>
  <li class="title1">Danny</li>
</ul>

<button class="btn" data-color="red">Change 9 names to red</button>
<button class="btn2" data-color="black">Reset</button>

a more efficient solution

This may not suit your needs, but if you just want to change the color of title items you could toggle a class on the <ul> and apply a css rule:

// get references to the button and ul
const button = document.querySelector('.btn');
const ul = document.querySelector('ul');

// toggle a class on the ul
button.addEventListener('click', () => ul.classList.toggle('red'));
/*
color 'title' items when the
ul has the 'red' class
*/
ul.red .title {
  color: red;
}
<ul>
  <li class="title">John</li>
  <li class="title">Jack</li>
  <li class="title">Joe</li>
  <li class="title1">Jim</li>
  <li class="title">David</li>
  <li class="title">Sam</li>
  <li class="title1">Jay</li>
  <li class="title">Frank</li>
  <li class="title">Tim</li>
  <li class="title">Zack</li>
  <li class="title">Lewis</li>
  <li class="title1">Danny</li>
</ul>

<button class="btn">Toggle 'title' items to red</button>

markup issues

  1. id attributes must be unique within a document. if you need to attach the same identifier to multiple elements use class instead.
  2. <button> cannot be a child of <ul>.
ray
  • 26,557
  • 5
  • 28
  • 27
0
  • First, id values must be unique, so you should be using class to organize the similar <li> elements and use id to uniquely identify the two buttons.
  • Also, the only elements that can be a child of a <ul> are <li>, <script> and <template> elements, not <button>, so the buttons have to be moved out of the ul.

From there, it's just a matter of setting the two buttons click handlers to the same event handler that loops over the li elements with the given class (not the buttons as you are trying to do) and adds or removes a pre-made class to the list depending on which button was clicked.

// test.js contents
document.getElementById("btn").addEventListener("click", changeColor);
document.getElementById("btn2").addEventListener("click", changeColor);

let items = document.querySelectorAll(".title");

function changeColor(event){
  items.forEach(function(item){
    // Figure out which button got us here
    if(event.target.id === "btn"){
      item.classList.add("red");  // Add red
    } else {
      item.classList.remove("red");  // Remove red
    } 
  });
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Change the Certain Font Color with JavaScript</title>
  <style>
    .red {color:red;}
  </style>
</head>
<body>
  <ul>
    <li class="title">John</li>
    <li class="title">Jack</li>
    <li class="title">Joe</li>
    <li class="title1">Jim</li>
    <li class="title">David</li>
    <li class="title">Sam</li>
    <li class="title1">Jay</li>
    <li class="title">Frank</li>
    <li class="title">Tim</li>
    <li class="title">Zack</li>
    <li class="title">Lewis</li>
    <li class="title1">Danny</li>
  </ul>
  
  <button id="btn">Change 9 names to red</button>
  <button id="btn2">Reset</button>

  <script src="test.js"></script>  
</body>
</html>

Additional notes:

Scott Marcus
  • 64,069
  • 6
  • 49
  • 71