如何使用javascript区分按钮颜色 [英] How to differentiate button colors using javascript
本文介绍了如何使用javascript区分按钮颜色的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
< 按钮 class = cl id = 1 > 尝试< / button >
var buttonId = 0 ;
var classId = 0 ;
function myFunction（）
{
for （i = 0 ; i< 10 ; i ++）
{
var btn = document .createElement（ 按钮）;
btn.style.backgroundColor = F093F5;
btn.setAttribute（ id， btn + buttonId）;
btn.setAttribute（ class， class + classId）;
btn.addEventListener（' 点击'，keyFunction）;
btn.innerText = 点击 + buttonId;
btn.innerText = 点击 + classId;
console .log（btn）;
document .body.appendChild（btn）;
buttonId ++;
classId ++;
}
}
{
var colors = [ ＃ea4747， ＃eaa947， ＃c9ea47， ＃68ea47];
function keyFunction（event）
{
event.target.style.backgroundColor = ＃D3D578;
var id = event.target.id.replace（ btn， ）* 1 ;
event.target.style.backgroundColor = colors [id％ 10 ];
}
}
我的尝试：
我为包含唯一类和id的每个点击事件一次生成10个按钮。并请求帮助以区分最后点击的按钮和访问过的按钮访问按钮..这样做的逻辑是什么？
解决方案
试试这个
< html xmlns = http://www.w3.org/1999 / xhtml >
< head >
< title > < / title >
< script >
var buttonId = 0 ;
var classId = 0 ;
var visitedbuttons = [];
var lastbutton;
function myFunction（）{
for （i = 0 ; i< 10 ; i ++）{
< span class =code-keyword> var btn = document .createElement（ < span class =code-string> BUTTON）;
btn.style.backgroundColor = F093F5;
btn.setAttribute（ id， btn + buttonId）;
btn.setAttribute（ class， class + classId）;
btn.addEventListener（' 点击'，keyFunction）;
btn.innerText = 点击 + buttonId;
btn.innerText = 点击 + classId;
console .log（btn）;
document .body.appendChild（btn）;
buttonId ++;
classId ++;
}
}
{
var colors = [ ＃ea4747， ＃eaa947， ＃c9ea47， ＃68ea47];
function keyFunction（event）{
event.target.style.backgroundColor = ＃D3D578;
// var id = event.target.id.replace（btn，）* 1 ;
event.target.style.backgroundColor = colors [ Math .floor（ Math .random（）* 3 ）+ 1 ];
for （ var i = 0 ; i< visitedbuttons.length; i ++）{
visitedbuttons [i] .style.backgroundColor = ' 褐色;
}
if （lastbutton！= null ）
lastbutton。 style.backgroundColor = ' yellow';
lastbutton = event.target;
visitedbuttons.push（lastbutton）;
}
}
< / script >
< / head >
< body >
< / body >
< / html > < /跨度>
<button class="cl" id="1" >Try it</button>
var buttonId = 0;
var classId = 0;
function myFunction()
{
for (i = 0; i < 10; i++)
{
var btn = document.createElement("BUTTON");
btn.style.backgroundColor = "F093F5";
btn.setAttribute("id", "btn" + buttonId);
btn.setAttribute("class", "class" + classId);
btn.addEventListener('click', keyFunction);
btn.innerText = "click" + buttonId;
btn.innerText = "click" + classId;
console.log(btn);
document.body.appendChild(btn);
buttonId++;
classId++;
}
}
{
var colors = ["#ea4747", "#eaa947", "#c9ea47", "#68ea47"];
function keyFunction(event)
{
event.target.style.backgroundColor = "#D3D578";
var id = event.target.id.replace("btn", "") * 1;
event.target.style.backgroundColor = colors[id % 10];
}
}
What I have tried:
I did Generating 10 buttons at once for every click event that contains unique class and id.. And asking help for differentiate last clicked buttons and visited buttons not visited buttons.. What logic to do this?
解决方案
Try this
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script> var buttonId = 0; var classId = 0; var visitedbuttons = []; var lastbutton; function myFunction() { for (i = 0; i < 10; i++) { var btn = document.createElement("BUTTON"); btn.style.backgroundColor = "F093F5"; btn.setAttribute("id", "btn" + buttonId); btn.setAttribute("class", "class" + classId); btn.addEventListener('click', keyFunction); btn.innerText = "click" + buttonId; btn.innerText = "click" + classId; console.log(btn); document.body.appendChild(btn); buttonId++; classId++; } } { var colors = ["#ea4747", "#eaa947", "#c9ea47", "#68ea47"]; function keyFunction(event) { event.target.style.backgroundColor = "#D3D578"; // var id = event.target.id.replace("btn", "") * 1; event.target.style.backgroundColor = colors[Math.floor(Math.random() * 3) + 1]; for (var i = 0; i < visitedbuttons.length; i++) { visitedbuttons[i].style.backgroundColor = 'brown'; } if (lastbutton != null) lastbutton.style.backgroundColor = 'yellow'; lastbutton = event.target; visitedbuttons.push(lastbutton); } } </script> </head> <body> </body> </html>
这篇关于如何使用javascript区分按钮颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
