在JavaScript中更改下一個元素的顏色

我一直試圖弄清楚最近幾個小時的這個編程任務，但是我陷入了一個部分。我目前有一個程序，onclick會隨機挑選一個元素並更改其背景顏色。如何修改程序，使其僅改變相鄰框的顏色（右）。因此，單擊將選擇該框，更改其顏色，然後下一次單擊將更改下一個框的顏色。請記住，這隻需要一段時間就可以完成。在JavaScript中更改下一個元素的顏色

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：

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

來源

2015-03-02 user2009653

您是否允許存儲隨機元素的ID？如果是這樣，第一次點擊會返回一個隨機數，然後點擊後可以增加數字。

例如

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

編輯：納伊姆的答案是更好，避免了存儲的ID :)

來源

2015-03-02 10:12:38

嗯，這是一個很好的回答太..釹那只是存放在變量值，所以沒有什麼壞在你的答案.. + 1 – 2015-03-05 04:39:25

看到這個小提琴：http://jsfiddle.net/e3zf64t6/

它選擇在第一次點擊的變化backgrund顏色並在下次點擊一個隨機元素，它改變下一個兄弟分區的顏色

function changeBackgroundColor() 
{ 

    if(clicked==0) 
    { 
    element = document.getElementById(generateId()); 
    clicked++; 

    }else{ 
     element=element.nextSibling; 
     console.log(element); 
    } 
    element.style.backgroundColor = getRandomRGB(); 

}

來源

2015-03-02 10:08:34

在JavaScript中更改下一個元素的顏色

回答

相關問題