I want for every buttons click make change the h1 text color in order the list index-CodePudding

By clicking one of five buttons want to change h1 text color by lists colors index order! So that the first button sets color on lists 1st index, and so on.

$("h1").addClass("big-title margin-50");

colorSet = ["black", "brown", "red", "green", "orange"];
for (var i = 0; i < 5; i  ) {
  $("button")[i].click(function() {
    $("h1").css("color", colorSet[i].toString())
  });
}

.big-title {
  color: yellow;
  font-size: 10rem;
  font-family: cursive;
}

.margin-50 {
  margin: 50px;
}

<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>JQuery</title>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <h1>Hello</h1>
  <a href="https://www.google.com">Search</a>
  <button type="button" name="button">Click me</button>
  <button type="button" name="button">Click me</button>
  <button type="button" name="button">Click me</button>
  <button type="button" name="button">Click me</button>
  <button type="button" name="button">Click me</button>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="index.js" charset="utf-8"></script>
</body>

</html>

CodePudding user response：

Only JS part of code was changed.

Actually you shouldn't use "for", $("button").click add event listener to all buttons. Index of button which would be pressed you can get in this way var indexOfButton = $('button').index(this);

and after using that, you can get expected result.

 $("h1").addClass("big-title margin-50");
colorSet = ["black", "brown", "red", "green", "orange"];

  $("button").click(function(m){
    var indexOfButton = $('button').index(this);
    $("h1").css("color", colorSet[indexOfButton].toString());
  });

.big-title {
  color: yellow;
  font-size: 10rem;
  font-family: cursive;
}

.margin-50 {
  margin: 50px;
}

<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>JQuery</title>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <h1>Hello</h1>
  <a href="https://www.google.com">Search</a>
  <button type="button" name="button">Click me</button>
  <button type="button" name="button">Click me</button>
  <button type="button" name="button">Click me</button>
  <button type="button" name="button">Click me</button>
  <button type="button" name="button">Click me</button>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="index.js" charset="utf-8"></script>
</body>

</html>

CodePudding user response：

It's obviously possible to do it that way, but are you sure it would be a readable code? You don't see what these buttons do when you read the HTML.

Instead, I'd suggest to link the button with the color directly, like this:

<button type="button" name="button" data-color="black">Click me</button>
<button type="button" name="button" data-color="brown">Click me</button>
<button type="button" name="button" data-color="red">Click me</button>
<button type="button" name="button" data-color="green">Click me</button>
<button type="button" name="button" data-color="orange">Click me</button>

Then, you can make them clickable:

$("button").click(function() {
    $("h1").css("color", $(this).data("color"));
});

No loop is needed that way.

CodePudding user response：

const hText = document.querySelector('h1');
const colors = ['green', 'blue', 'red', 'violet', 'black'];

document.addEventListener('click', function (event) {
    if (event.target.matches('#one')){
  hText.style.color = colors[0];
  }
  if (event.target.matches('#two')){
  hText.style.color = colors[1];
  }
  if (event.target.matches('#three')){
  hText.style.color = colors[2];
  }
  if (event.target.matches('#four')){
  hText.style.color = colors[3];
  }
  if (event.target.matches('#five')){
  hText.style.color = colors[4];
  }
}, false);

h1 {
 
  font-size: 5rem;
  font-family: cursive;
}

<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>JQuery</title>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <h1>Hello</h1>
  <a href="https://www.google.com">Search</a>
  <button id="one">1</button>
  <button id="two">2</button>
  <button id="three">3</button>
  <button id="four">4</button>
  <button id="five">5</button>

 
  <script src="index.js" charset="utf-8"></script>
</body>

</html>