使用數組來改變顏色

-1

您好我想使用一個數組來改變顏色。我想用一個參數爲數字創建一個名爲ChangeColor（num）的函數，並使用函數來改變框的顏色，所以當點擊按鈕時，它調用該函數併發送正確的數字，以便「框」。 style.backgroundColor = arrName [num];「下面是我到目前爲止。使用數組來改變顏色

<!DOCTYPE html> 
<html> 
<head> 
<style> 
    #box { 
     width:200px; 
     height:200px; 
     background-color:black; 
    } 
</style> 
</head> 
<body> 
    <div id="group"> 
     <button id="blue">Blue</button> 
     <button id="red">Red</button> 
     <button id="green">Green</button> 
    </div> 

    <div id="box"></div> 

    <script type="text/javascript"> 
     var colors = ["blue","red","green"]; 
     var blue = document.getElementById("blue"); 
     var red = document.getElementById("red"); 
     var green = document.getElementById("green"); 
     var box = document.getElementById("box"); 

     var numclicks = 0; 

     blue.addEventListener("click", function() { 
      if(numclicks == 0) { 
       box.style.backgroundColor = colors[0]; 
      } 
     }); 

     red.addEventListener("click", function() { 
      if(numclicks == 0) { 
       box.style.backgroundColor = colors[1]; 
      } 
     }); 

     green.addEventListener("click", function() {  
      if(numclicks == 0) { 
       box.style.backgroundColor = colors[2]; 
      } 
     });   
    </script> 
</body> 
</html>

來源

2017-09-30 RAY

至今不太遠，你甚至沒有函數聲明。你嘗試過創建函數嗎？在那種情況下，你有什麼確切的問題來創建函數？我們可以幫助你完成作業，但你必須付出一些努力。 –

哈哈我同意。對不起，我沒有付出太多努力。我編輯了代碼，這是做這件事的理想方式嗎？ – RAY

什麼*確切*是您遇到的問題？ – FluffyKitten

你可以簡單地連接內#group事件偵聽器的按鈕，並設置background-color的#box將點擊的按鈕的id：

var box = document.querySelector('#box'); 
 

 
document 
 
    .querySelectorAll('#group button') 
 
    .forEach(function (el) { 
 
    el.addEventListener('click', function() { 
 
     box.style.backgroundColor = el.id; 
 
    }); 
 
});

#box { 
 
    width:200px; 
 
    height:200px; 
 
    background-color:black; 
 
}

<div id="group"> 
 
    <button id="blue">Blue</button> 
 
    <button id="red">Red</button> 
 
    <button id="green">Green</button> 
 
</div> 
 

 
<div id="box"></div>

來源

2017-09-30 22:57:20

標準功能

const colors = ["blue","red","green"]; 
const defaultColor = "white"; // if you want for kill errors 

function changeColor(num){ 
    document.querySelector("#box").style.backgroundColor = colors[num]||defaultColor 
}

那麼你可以添加的onclick事件到按鈕這樣

<div id="group"> 
    <button onclick="changeColor(0)" id="blue">Blue</button> 
    <button onclick="changeColor(1)" id="red">Red</button> 
    <button onclick="changeColor(0)" id="green">Green</button> 
</div>

或類似屬性（但保持按鈕元素取決於對陣列的顏色名稱相同的順序） HTML

<div id="group"> 
    <button number="0" id="blue">Blue</button> 
    <button number="1" id="red">Red</button> 
    <button number="2" id="green">Green</button> 
</div>

的javascript

document.querySelectorAll("#group button").forEach((button)=>{ 
    button.addEventListener('click', function() { 
     changeColor(button.getAttr("number")); 
    }); 
});

來源

2017-09-30 23:23:00 imel

其他解決方案使用當前認爲更好的做法。這是一個包含不必要數組的解決方案。

function changeColor(num) { 
 
    var colors = ['blue', 'red', 'green']; 
 

 
    document.getElementById('box').style.backgroundColor = colors[num]; 
 
}

#box { 
 
    width: 200px; 
 
    height: 200px; 
 
    background-color: black; 
 
}

<div id="group"> 
 
    <button id="blue" onclick="changeColor(0)">Blue</button> 
 
    <button id="red" onclick="changeColor(1)">Red</button> 
 
    <button id="green" onclick="changeColor(2)">Green</button> 
 
</div> 
 

 
<div id="box"></div>

來源

2017-10-01 02:34:16

使用數組來改變顏色

回答

相關問題