stackoom
  简体   繁体   中英

color changing button onclick

 原文  2021-01-05 10:40:54  7   2    javascript/ button

Question

Okay so so far I have this page with a few buttons in it, whenever you click the button it turns red now i want to add that whenever you click it more times the color changes.

so for example: first the button is green, on the first click it turns red, on the third click it turns pink and so on.

I tried to do this with the set_onclick function I made and then multiple this code:

for (var a = 1; a < (amount + 1); a++) {
    document.getElementById("button" + a).setAttribute("onclick", "onbuttonclicked(" + a + ")");

but i dont get it to work

 page(); function onbuttonclicked(a) { document.getElementById("button" + a).classList.remove("button") document.getElementById("button" + a).classList.add("clickedbutton") } function set_onclick(amount) { for (var a = 1; a < (amount + 1); a++) { document.getElementById("button" + a).setAttribute("onclick", "onbuttonclicked(" + a + ")"); } } function page() { document.body.style.backgroundColor = "grey"; //style page createButtons(30); } function createButtons(amount){ for (var a = 1;a <(amount + 1); a++) { var button = document.createElement("button"); button.classList.add("button") button.id = "button" + a; button.innerHTML = "button " + a; container.appendChild(button); } set_onclick(amount); }
 body{ background-color: white; } #container{ top: 10px; padding: 82px; margin: auto; width: 800px; height: 350px; background-color: grey; position: relative; } #buttons{ margin-bottom: 30px; } button{ background-color: #4CAF50; border: 1px solid black; color: white; padding: 15px 30px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; width: 140px; height: 50px; } body{ background-color: white; } #container{ top: 10px; padding: 82px; margin: auto; width: 800px; height: 350px; background-color: grey; position: relative; } #buttons{ margin-bottom: 30px; } button{ background-color: #4CAF50; border: 1px solid black; color: white; padding: 15px 30px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; width: 140px; height: 50px; }.clickedbutton { background-color: red; }.button { background-color: green; }
 <.DOCTYPE html> <html lang="en"> <head> <title>buttons</title> <link rel="stylesheet" type="text/css" href="buttons.css"> </head> <body> <div id="container"></div> <script src="buttons.js"></script> </body> </html>

2 answers

solution1
 0  2021-01-05 10:54:45

Make a function that will count clicks and change the color of the button depending on the amount of the clicks.

You can just change a class like this:

document.querySelector(".MyElement").className = "MyClass";

hope You know that when searching for a class with querySelector You need to use '.' in front of the name of the class. If You try to find by ID either use querySelector with '#' in front of an ID or use getElementById:

document.getElementById("MyElement").className = "MyClass";

Example:

let counter = 0 

document.getElemenetById('button').onclick = function(){
    counter += 1
}

if (counter = 0) {
    document.getElementById('button').className = 'red'
} else if (counter = 1) {
    document.getElementById('button').className = 'blue'
}

or

let counter = 0 

document.getElementById("button").addEventListener("click", counter += 1);

if (counter = 0) {
    document.getElementById('button').className = 'red'
} else if (counter = 1) {
    document.getElementById('button').className = 'blue'
}

or

let counter = 0 
<button onclick="myFunction()">Click me</button>

<script>
    function myFunction() {
        counter += 1
    }

   if (counter = 0) {
        document.getElementById('button').className = 'red'
   } else if (counter = 1) {
        document.getElementById('button').className = 'blue'
   }
</script>

solution2
 0 ACCPTED  

As you said the color of the button is dependent on how many times you clicked the button, and you will have to manage a local state for each button since there are many buttons

I think the the first thing you need is an object that will change the color like this, where the key is count and value is color

const obj = {
1 : "red",
2 : "blue"
3 : "pink"
4 : "skyblue"
...
...
...
}

and then change the color according to it

 var colorMap = { 1: "red", 2: "blue", 3: "pink", 4: "hotpink", 5: "brown", 6: "yellow", 7: "black" } page(); function page() { document.body.style.backgroundColor = "grey"; createButtons(30); } document.body.addEventListener("click", (e)=>{ if(e.target.classList.contains("button")){ let currentbtnCount = parseInt(e.target.getAttribute("data-current-count")) + 1; e.target.style.backgroundColor = colorMap[currentbtnCount]? colorMap[currentbtnCount]: "black"; e.target.setAttribute("data-current-count", currentbtnCount); } }) function createButtons(amount){ for (var a = 1;a <(amount + 1); a++) { var button = document.createElement("button"); button.classList.add("button") button.setAttribute("data-current-count", "0") button.id = "button" + a; button.innerHTML = "button " + a; container.appendChild(button); } }
 body{ background-color: white; } #container{ top: 10px; padding: 82px; margin: auto; width: 800px; height: 350px; background-color: grey; position: relative; } #buttons{ margin-bottom: 30px; } button{ background-color: #4CAF50; border: 1px solid black; color: white; padding: 15px 30px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; width: 140px; height: 50px; } body{ background-color: white; } #container{ top: 10px; padding: 82px; margin: auto; width: 800px; height: 350px; background-color: grey; position: relative; } #buttons{ margin-bottom: 30px; } button{ background-color: #4CAF50; border: 1px solid black; color: white; padding: 15px 30px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; width: 140px; height: 50px; }.clickedbutton { background-color: red; }.button { background-color: green; }
 <.DOCTYPE html> <html lang="en"> <head> <title>buttons</title> <link rel="stylesheet" type="text/css" href="buttons.css"> </head> <body> <div id="container"></div> <script src="buttons.js"></script> </body> </html>

And if you want complete random colors then here is another one

 function random_rgba() { var o = Math.round, r = Math.random, s = 255; return 'rgba(' + o(r()*s) + ',' + o(r()*s) + ',' + o(r()*s) + ',' + r().toFixed(1) + ')'; } page(); function page() { document.body.style.backgroundColor = "grey"; createButtons(30); } document.body.addEventListener("click", (e)=>{ if(e.target.classList.contains("button")){ e.target.style.backgroundColor = random_rgba(); } }) function createButtons(amount){ for (var a = 1;a <(amount + 1); a++) { var button = document.createElement("button"); button.classList.add("button") button.setAttribute("data-current-count", "0") button.id = "button" + a; button.innerHTML = "button " + a; container.appendChild(button); } }
 body{ background-color: white; } #container{ top: 10px; padding: 82px; margin: auto; width: 800px; height: 350px; background-color: grey; position: relative; } #buttons{ margin-bottom: 30px; } button{ background-color: #4CAF50; border: 1px solid black; color: white; padding: 15px 30px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; width: 140px; height: 50px; } body{ background-color: white; } #container{ top: 10px; padding: 82px; margin: auto; width: 800px; height: 350px; background-color: grey; position: relative; } #buttons{ margin-bottom: 30px; } button{ background-color: #4CAF50; border: 1px solid black; color: white; padding: 15px 30px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; width: 140px; height: 50px; }.clickedbutton { background-color: red; }.button { background-color: green; }
 <.DOCTYPE html> <html lang="en"> <head> <title>buttons</title> <link rel="stylesheet" type="text/css" href="buttons.css"> </head> <body> <div id="container"></div> <script src="buttons.js"></script> </body> </html>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Onclick the jquery event button color not changing My sidenav color isn't changing with the button (onclick) Changing the color of a div with a button by using an eventlistener instead of inline onclick or jquery Button not changing color if i use “onclick” in jquery mobile Changing background color onclick Changing text color onclick Button onClick target is changing Changing button text onclick change text color when button onclick and (if possible) exclude some text or elements from changing colors when onclick button color onclick javascript
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM