admin管理员组

文章数量:1403233

I'm kinda new to JavaScript and I'm basically trying to figure out how to have one button that changes the background color on click. At the moment I can do it with three three separate buttons, but I don't know how to do it with just one.

On click I want the next color in my list to be selected.

I have no knowledge on JQuery, so I would appreciate it if the code isn't in JQuery.

This is what I have at the moment:

<button onclick="myFunction1()">Red</button>
<script type="text/javascript">function myFunction1() {
document.body.style.backgroundColor = "red";
}</script>

<button onclick="myFunction2()">Blue</button>
<script type="text/javascript">function myFunction2() {
document.body.style.backgroundColor = "blue";
}</script>

<button onclick="myFunction3()">Green</button>
<script type="text/javascript">function myFunction3() {
document.body.style.backgroundColor = "green";
}</script>

I'm kinda new to JavaScript and I'm basically trying to figure out how to have one button that changes the background color on click. At the moment I can do it with three three separate buttons, but I don't know how to do it with just one.

On click I want the next color in my list to be selected.

I have no knowledge on JQuery, so I would appreciate it if the code isn't in JQuery.

This is what I have at the moment:

<button onclick="myFunction1()">Red</button>
<script type="text/javascript">function myFunction1() {
document.body.style.backgroundColor = "red";
}</script>

<button onclick="myFunction2()">Blue</button>
<script type="text/javascript">function myFunction2() {
document.body.style.backgroundColor = "blue";
}</script>

<button onclick="myFunction3()">Green</button>
<script type="text/javascript">function myFunction3() {
document.body.style.backgroundColor = "green";
}</script>
  • javascript
  • button
  • onclick
  • background-color
Share Improve this question asked Apr 7, 2017 at 19:15 johnnyjohnny 111 silver badge4 bronze badges
Add a ment  | 

3 Answers 3

Reset to default 3 

const changeColor = document.getElementById('changeColor'),
      colors      = ['red', 'green', 'blue'];
let   colorIndex  = 0;

changeColor.addEventListener('click', () => {
  document.body.style.backgroundColor = colors[colorIndex];      
  colorIndex = (colorIndex + 1) % colors.length
});
<button id="changeColor">changeColor</button>

var colors = ["red", "blue", "green", "yellow"],   // the color choices
    index = 0;                                     // index of the current color
    
document.getElementById("colorify").onclick = function() {
  document.body.style.background = colors[index];  // set the color of body to the current color
  index = (index + 1) % colors.length;             // increment index to point to the next color (if it goes beyond the length of the coices array get it back to 0 using the modulo %)
}
<button id="colorify">Change color</button>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <button onclick="changeColor()">click me</button>
    <script>
        var place =0;
        function changeColor() {
            // your color list
            var colorList = ["red","green","blue"];
            // set the color
            document.body.style.backgroundColor = colorList[place]; 
            place++;
            // if place is greater than the list size, reset
            if (place ===colorList.length) place=0; 
        }
    </script>
</body>
</html>

本文标签： How to change background color multiple times with one button (only JavaScript please)Stack Overflow

版权声明：本文标题：How to change background color multiple times with one button (only JavaScript please)? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744368141a2602885.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。