Create a file data/colourList.js , which creates a global array called colourLis
ID: 3748962 • Letter: C
Question
Create a file data/colourList.js , which creates a global array called colourList, containing a list of 5 colours (e.g. "red", "blue", etc).
In your week5a.js file, create a button “Randomise Colour” which calls a function randomiseBackgroundColour(). This function, when executed, will select a random colour from our colourList array, and change the document BODY element’s background colour.
In addition to the aforementioned button, create a vertical list of buttons for each colour in the colourList. Each buttons text should be the colour name. When that button is clicked, the document BODY’s background colour will specifically change to the button’s colour.
Further to the last step, colour the background of each button to be the same as the button’s intended colour. E.g. if a button says "blue", then the background colour of that button should be blue.
Explanation / Answer
week5a.js
<html>
<style>
.red {background-color: red;}
.blue {background-color: blue;}
.yellow {background-color: yellow;}
.green {background-color: green;}
.orange {background-color: orange;}
</style>
<body>
<p id="demo">Hello World</p>
<button type="button">Randomise Colour</button><br><br>
<button class="red">Red</button><br><br>
<button class="blue">Blue</button><br><br>
<button class="yellow">Yellow</button><br><br>
<button class="green">Green</button><br><br>
<button class="orange">Orange</button><br><br>
<script>
var colourList = ["red", "blue", "yellow", "green", "orange"];
function randomiseBackgroundColour() {
var x = Math.floor((Math.random() * 5));
var c = colourList[x];
if(c=="red")
{
document.body.style.backgroundColor = "red";
}
else if(c=="blue")
{
document.body.style.backgroundColor = "blue";
}
else if(c=="yellow")
{
document.body.style.backgroundColor = "yellow";
}
else if(c=="green")
{
document.body.style.backgroundColor = "green";
}
else if(c=="orange")
{
document.body.style.backgroundColor = "orange";
}
//document.getElementById("demo").innerHTML = c;
}
function redBackgroundColour() {
document.body.style.backgroundColor = "red";
}
function blueBackgroundColour() {
document.body.style.backgroundColor = "blue";
}
function yellowBackgroundColour() {
document.body.style.backgroundColor = "yellow";
}
function greenBackgroundColour() {
document.body.style.backgroundColor = "green";
}
function orangeBackgroundColour() {
document.body.style.backgroundColor = "orange";
}
</script>
</body>
</html>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.