颜色更改按钮 onclick

时间：2021-01-05 10:40:54

标签： javascript button

到目前为止，我的这个页面上有几个按钮，每当您单击按钮时，它现在都会变成红色，我想添加它，每当您单击它多次时颜色会发生变化。

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

我尝试使用我制作的 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>

2 个答案:

答案 0 :(得分：0)

制作一个计算点击次数的函数，并根据点击次数改变按钮的颜色。

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

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>

答案 1 :(得分：0)

正如您所说，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>

相关问题
最新问题