在JavaScript中更改下一个元素的颜色
[英]Change the Color of Next Element in JavaScript
问题描述
I've been trying to figure out this programming assignment for the last couple of hours but I'm getting stuck on one part. 
在过去的几个小时里，我一直在试图弄清楚这个编程任务，但是我陷入其中。 I currently have a program that onclick will randomly pick an element and change its background color. 我目前有一个程序，onclick会随机选择一个元素并更改其背景颜色。 How do I modify the program so that it only changes the color of the adjacent box(right.) So clicking would select the box, change its color, then the next click would change the color of the next box. 如何修改程序，使其仅更改相邻框的颜色（右）。因此，单击将选择框，更改其颜色，然后单击将更改下一个框的颜色。 Keep in mind this needs to be done with only a while loop. 请记住，这仅需要一个while循环即可完成。
HTML: HTML：
<!DOCTYPE html>
<!--
Your name does here
The date goes here
CISC 131
A short description of the project goes here
-->
<html lang="en">
<head>
<title>this will appear on the tab in the browser</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="Changenxtonclick.js" type="text/javascript"></script>
<style type="text/css">
*{border: 0;
margin:0;
paddig: 0;
}
body{
font-family:"Times New Roman"; serif;
font-size: 12pt;
}
.box
{
height: 10em;
width: 10em;
background-color: blue;
float: left;
margin: 1.5px;
}
</style>
</head>
<body>
<div class="box" id="box0"></div>
<div class="box" id="box1"></div>
<div class="box" id="box2"></div>
<div class="box" id="box3"></div>
</body>
</html>
JS: JS：
window.onload = function()
{
document.onclick = changeBackgroundColor;
}
function changeBackgroundColor()
{
var element;
element = document.getElementById(generateId());
element.style.backgroundColor = getRandomRGB();
} // Changes the background color of the boxes.
function generateId()
{
return "box" + getRandomInteger(3);
}
function getRandomRGB() // Uses getRandomInteger to generate random RGB colors.
{
var red;
var green;
var blue;
var result;
red = getRandomInteger(255);
green = getRandomInteger(255);
blue = getRandomInteger(255);
result = "rgb("+red+","+green+","+blue+")";
return result;
}
function getRandomInteger(upperLimit) // Gets a random number on less than upperLimit
{
var result;
result = Math.random();
result = result * (upperLimit + 1);
result = Math.floor(result);
return result;
}
2 个解决方案
解决方案1
1 2015-03-02 10:08:34
see this fiddle: http://jsfiddle.net/e3zf64t6/ 看到这个小提琴： http : //jsfiddle.net/e3zf64t6/
It selects a random element on first click and changes backgrund color and on the next clicks, it changes the color for the next sibling divs 它在第一次单击时选择一个随机元素，并更改背景色，在下次单击时，它会为下一个同级div更改颜色。
function changeBackgroundColor()
{
if(clicked==0)
{
element = document.getElementById(generateId());
clicked++;
}else{
element=element.nextSibling;
console.log(element);
}
element.style.backgroundColor = getRandomRGB();
}
解决方案2
1 已采纳 2015-03-02 10:12:38
Are you allowed to store the id of the random element? 您是否可以存储随机元素的ID？ If so the first click would return a random number, and then clicks afterwards could increment the number. 如果是这样，则第一次单击将返回一个随机数，然后单击将增加该数字。
eg 例如
var selected = getRandomInteger(3); //Generate a random number
window.onload = function()
{
document.onclick = changeBackgroundColor;
}
function changeBackgroundColor()
{
var element;
element = document.getElementById("box"+selected);
element.style.backgroundColor = getRandomRGB();
selected = ((selected+1)%4); //Increment the id using mod to loop around.
}
Edit: Naeem's answer is nicer, avoids storing an id :) 编辑：Naeem的答案更好，避免存储id :)
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.