变色按钮onclick答案

【问题标题】：color changing button onclick变色按钮onclick
【发布时间】：2021-01-05 10:40:54
【问题描述】：

好的，到目前为止，我有这个页面，里面有几个按钮，当你点击按钮时它变成红色现在我想添加它，只要你点击它更多次，颜色就会改变。

例如：第一次按钮是绿色的，第一次点击它变成红色，第三次点击它变成粉红色等等。

我尝试使用我创建的 set_onclick 函数来执行此操作，然后使用多个此代码：

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

但我不让它工作

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>

【问题讨论】：

标签： javascript button

【解决方案1】：

正如您所说，button 的颜色取决于您单击按钮的次数，并且您必须为每个按钮管理本地状态，因为按钮很多

我认为您首先需要的是一个可以像这样改变颜色的对象，其中键是count，值是颜色

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

然后根据它改变颜色

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>

如果你想要完全随机的颜色，那么这里是另一种

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>

【讨论】：

使用这种代码是否也可以在某些点击后隐藏按钮？或者我需要为此制作其他代码

【解决方案2】：

创建一个计算点击次数并根据点击次数更改按钮颜色的函数。

你可以像这样改变一个类：

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

希望您知道，在使用 querySelector 搜索类时，您需要使用 '.'在班级名称前面。如果您尝试按 ID 查找，请在 ID 前使用带有“#”的 querySelector 或使用 getElementById：

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

例子：

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'
}

或

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'
}

或

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>

【讨论】：

我创建了一个 var ''count=0;'' 和一个带有 ''button.onclick= count+1' 的函数，但我不知道如何更改颜色
我知道我需要创建一个计算点击次数的函数，但我不知道如何放入它改变颜色的函数