change background colour onclick

Question

First time poster.

I am trying to change the background colour after clicking a button. I have tried a few different code types and what seems to be consistent is that the array doesn't get iterated properly.

Please Help

var color = ["red", "green", "blue"];
var i = 0;
document.querySelector("button").addEventListener("click", function() {
  i = i < color.length ? ++i : 0;
  document.querySelector("body").style.background = color[i];
})

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

button {
  position: absolute;
  top: 50%;
  left: 50%;
  cursor: pointer;
}

body {
  background-color: blue;
}

<button>Click me to change background colour.</button>

Hey Goosey, works fine [here](https://jsfiddle.net/hmfurzg1/). Any errors? — Phix, Apr 05 '21 at 20:52
This is an off-by-one error. Pretty sure you can solve that by yourself. — Alexander Gräf, Apr 05 '21 at 20:53
You have to click twice on every iteration because of `++i`, which increments `i` and returns the incremented value, which you then assign to `i`. Instead, just use `i + 1`. — Heretic Monkey, Apr 05 '21 at 20:54
Hey, when I click run code snippet it works but it doesn't work in my visual studio code. Any ideas why this is the case? — goosey9, Apr 05 '21 at 21:02
@goosey, check my anser because you will still have problems — Why u do dis, Apr 05 '21 at 21:06

score 1 · Answer 1 · answered Apr 05 '21 at 20:54

1

You should use the modulus when you increment, so that it loops through.

i = (i+1) % color.length;

answered Apr 05 '21 at 20:54

nbrix

316
1
6

score 1 · Answer 2 · answered Apr 05 '21 at 20:59

So, in Javascript, arrays start from zero, so color[0] is red, color[1] is green and color[2] is blue, when you say color.length it will return 3. so color[3] is undefined because the last color ends at index 2. Also you should start with i= -1 since when you start with 0 and you increment, 0 will become 1 so you skip first color.

var color = ["red", "green", "blue"];
var i = -1;
document.querySelector("button").addEventListener("click", function () {
  i = i < color.length - 1 ? ++i : 0;

  document.querySelector("body").style.background = color[i];
});

alentejo · Accepted Answer · 2021-04-13T15:34:21.460

-3

Be careful to load your javascript script after the button in your HTML code, because otherwise the querySelector will not find it!

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Background Colour Change</title>
    <link rel="stylesheet" href="new1.css">
</head>
<body>
    <button>Click me to change background colour.</button>
</body> 
<script src="new1.js"></script>

[EDIT] Although this solved your problem, it appears that it is not the safest way to load your script, you need to listen for when the document is ready. I suggest ready about it in this post

edited Apr 13 '21 at 15:34

answered Apr 05 '21 at 20:59

alentejo

170
8

This fixed it!! Thanks! – goosey9 Apr 05 '21 at 21:04
You are welcome. I note that you had the HTML posted in your first post, but then you removed it, so people might get puzzled as to how this solution can be relevant. I suggest to add it back :) – alentejo Apr 05 '21 at 21:12
i am sorry but i dont know how to do that – goosey9 Apr 05 '21 at 21:16
1

The solution is to attach the functionality to document.ready so you can be sure that the DOM is fully available before trying to modify it. That's why your answer has so many downvotes. You're simply increasing the chances of the DOM being ready by loading the script further down the line, but without any definitive guarantee. – Alexander Gräf Apr 05 '21 at 21:30

change background colour onclick

3 Answers3