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>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>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.
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>