Generate a random color of a random square in Javascript
0
The button is supposed to change the color of a random square to random color.
This is my code, I figured out how to change the random color of every square at the same time, but it should pick only one random square at a time. Could you please have a look? The comments will show you my way of thinking:
// Elements grabbed from the document
let square1 = document.getElementById('square1');
let square2 = document.getElementById('square2');
let square3 = document.getElementById('square3')
let button = document.getElementById('button');
//This picks a random number
const rgb = (num) => {
return Math.floor(Math.random() * num);
};
const changeColorOfaRandomSquareToRandom = () => {
//This I hope will pick a random square
let array = [square1, square2, square3];
let randomNumber = Math.floor[Math.random() * 3];
// I assign the value of the randomSquare function to a new variable
let squareRND = array[randomNumber];
//This picks a random color
let randomColor = 'rgb(' + rgb(255) + ',' + rgb(255) + ',' + rgb(255) + ')';
return squareRND.style.backgroundColor = randomColor();
}
button.onclick = changeColorOfaRandomSquareToRandom();#square1{
background-color: lightpink;
width:200px;
height: 200px;
display: flex;
margin-top: 200px;
}
#square2{
background-color: lightblue;
width: 200px;
height: 200px;
display: flex;
margin-top: 200px;
}
#square3{
background-color: lightgreen;
width: 200px;
height: 200px;
display: flex;
margin-top: 200px;
}
#squares{
display: flex;
flex-wrap: wrap;
justify-content: center;
}
#button{
width: 75px;
height: 25px;
margin-top: 20px;
margin-left: 600px;
}<html>
<head>
<link href="squares.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<div id="squares">
<div id="square1" onclick="colorChange">
</div>
<div id="square2">
</div>
<div id="square3">
</div>
</div>
<button id="button">Click me</button>
<script src="square.js" ></script>
</body>
</html>javascript
asked Nov 23 '18 at 15:03
darius.maximusdarius.maximus
137
|
show 4 more comments
0
The button is supposed to change the color of a random square to random color.
This is my code, I figured out how to change the random color of every square at the same time, but it should pick only one random square at a time. Could you please have a look? The comments will show you my way of thinking:
// Elements grabbed from the document
let square1 = document.getElementById('square1');
let square2 = document.getElementById('square2');
let square3 = document.getElementById('square3')
let button = document.getElementById('button');
//This picks a random number
const rgb = (num) => {
return Math.floor(Math.random() * num);
};
const changeColorOfaRandomSquareToRandom = () => {
//This I hope will pick a random square
let array = [square1, square2, square3];
let randomNumber = Math.floor[Math.random() * 3];
// I assign the value of the randomSquare function to a new variable
let squareRND = array[randomNumber];
//This picks a random color
let randomColor = 'rgb(' + rgb(255) + ',' + rgb(255) + ',' + rgb(255) + ')';
return squareRND.style.backgroundColor = randomColor();
}
button.onclick = changeColorOfaRandomSquareToRandom();#square1{
background-color: lightpink;
width:200px;
height: 200px;
display: flex;
margin-top: 200px;
}
#square2{
background-color: lightblue;
width: 200px;
height: 200px;
display: flex;
margin-top: 200px;
}
#square3{
background-color: lightgreen;
width: 200px;
height: 200px;
display: flex;
margin-top: 200px;
}
#squares{
display: flex;
flex-wrap: wrap;
justify-content: center;
}
#button{
width: 75px;
height: 25px;
margin-top: 20px;
margin-left: 600px;
}<html>
<head>
<link href="squares.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<div id="squares">
<div id="square1" onclick="colorChange">
</div>
<div id="square2">
</div>
<div id="square3">
</div>
</div>
<button id="button">Click me</button>
<script src="square.js" ></script>
</body>
</html>javascript
asked Nov 23 '18 at 15:03
darius.maximusdarius.maximus
137
You are creating functions inside youronclickfunction but not calling them, why don't you just execute that code instead of wrapping them inside another functions?
– Gonzalo
Nov 23 '18 at 15:10
Could you show me how to do that? :P Sorry to bother you, but I am a newby :D
– darius.maximus
Nov 23 '18 at 15:22
I made a snippet of what you had with a simple button. Please add the actual markup so that we may better assist with your issue here. I also suggest you change the id from "button" to a more descriptive id perhaps?
– Mark Schultheiss
Nov 23 '18 at 15:43
You want me to add the css and html ?
– darius.maximus
Nov 23 '18 at 15:56
Yes please, right now your question is OK make your question Great! stackoverflow.com/help/mcve NOTE: make the questions easy to answer for people helping you. I created the snippet to assist you in learning how to do that (create great questions)
– Mark Schultheiss
Nov 23 '18 at 15:57
|
show 4 more comments
0
0
0
The button is supposed to change the color of a random square to random color.
This is my code, I figured out how to change the random color of every square at the same time, but it should pick only one random square at a time. Could you please have a look? The comments will show you my way of thinking:
// Elements grabbed from the document
let square1 = document.getElementById('square1');
let square2 = document.getElementById('square2');
let square3 = document.getElementById('square3')
let button = document.getElementById('button');
//This picks a random number
const rgb = (num) => {
return Math.floor(Math.random() * num);
};
const changeColorOfaRandomSquareToRandom = () => {
//This I hope will pick a random square
let array = [square1, square2, square3];
let randomNumber = Math.floor[Math.random() * 3];
// I assign the value of the randomSquare function to a new variable
let squareRND = array[randomNumber];
//This picks a random color
let randomColor = 'rgb(' + rgb(255) + ',' + rgb(255) + ',' + rgb(255) + ')';
return squareRND.style.backgroundColor = randomColor();
}
button.onclick = changeColorOfaRandomSquareToRandom();#square1{
background-color: lightpink;
width:200px;
height: 200px;
display: flex;
margin-top: 200px;
}
#square2{
background-color: lightblue;
width: 200px;
height: 200px;
display: flex;
margin-top: 200px;
}
#square3{
background-color: lightgreen;
width: 200px;
height: 200px;
display: flex;
margin-top: 200px;
}
#squares{
display: flex;
flex-wrap: wrap;
justify-content: center;
}
#button{
width: 75px;
height: 25px;
margin-top: 20px;
margin-left: 600px;
}<html>
<head>
<link href="squares.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<div id="squares">
<div id="square1" onclick="colorChange">
</div>
<div id="square2">
</div>
<div id="square3">
</div>
</div>
<button id="button">Click me</button>
<script src="square.js" ></script>
</body>
</html>javascript
asked Nov 23 '18 at 15:03
darius.maximusdarius.maximus
137
The button is supposed to change the color of a random square to random color.
This is my code, I figured out how to change the random color of every square at the same time, but it should pick only one random square at a time. Could you please have a look? The comments will show you my way of thinking:
// Elements grabbed from the document
let square1 = document.getElementById('square1');
let square2 = document.getElementById('square2');
let square3 = document.getElementById('square3')
let button = document.getElementById('button');
//This picks a random number
const rgb = (num) => {
return Math.floor(Math.random() * num);
};
const changeColorOfaRandomSquareToRandom = () => {
//This I hope will pick a random square
let array = [square1, square2, square3];
let randomNumber = Math.floor[Math.random() * 3];
// I assign the value of the randomSquare function to a new variable
let squareRND = array[randomNumber];
//This picks a random color
let randomColor = 'rgb(' + rgb(255) + ',' + rgb(255) + ',' + rgb(255) + ')';
return squareRND.style.backgroundColor = randomColor();
}
button.onclick = changeColorOfaRandomSquareToRandom();#square1{
background-color: lightpink;
width:200px;
height: 200px;
display: flex;
margin-top: 200px;
}
#square2{
background-color: lightblue;
width: 200px;
height: 200px;
display: flex;
margin-top: 200px;
}
#square3{
background-color: lightgreen;
width: 200px;
height: 200px;
display: flex;
margin-top: 200px;
}
#squares{
display: flex;
flex-wrap: wrap;
justify-content: center;
}
#button{
width: 75px;
height: 25px;
margin-top: 20px;
margin-left: 600px;
}<html>
<head>
<link href="squares.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<div id="squares">
<div id="square1" onclick="colorChange">
</div>
<div id="square2">
</div>
<div id="square3">
</div>
</div>
<button id="button">Click me</button>
<script src="square.js" ></script>
</body>
</html>// Elements grabbed from the document
let square1 = document.getElementById('square1');
let square2 = document.getElementById('square2');
let square3 = document.getElementById('square3')
let button = document.getElementById('button');
//This picks a random number
const rgb = (num) => {
return Math.floor(Math.random() * num);
};
const changeColorOfaRandomSquareToRandom = () => {
//This I hope will pick a random square
let array = [square1, square2, square3];
let randomNumber = Math.floor[Math.random() * 3];
// I assign the value of the randomSquare function to a new variable
let squareRND = array[randomNumber];
//This picks a random color
let randomColor = 'rgb(' + rgb(255) + ',' + rgb(255) + ',' + rgb(255) + ')';
return squareRND.style.backgroundColor = randomColor();
}
button.onclick = changeColorOfaRandomSquareToRandom();#square1{
background-color: lightpink;
width:200px;
height: 200px;
display: flex;
margin-top: 200px;
}
#square2{
background-color: lightblue;
width: 200px;
height: 200px;
display: flex;
margin-top: 200px;
}
#square3{
background-color: lightgreen;
width: 200px;
height: 200px;
display: flex;
margin-top: 200px;
}
#squares{
display: flex;
flex-wrap: wrap;
justify-content: center;
}
#button{
width: 75px;
height: 25px;
margin-top: 20px;
margin-left: 600px;
}<html>
<head>
<link href="squares.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<div id="squares">
<div id="square1" onclick="colorChange">
</div>
<div id="square2">
</div>
<div id="square3">
</div>
</div>
<button id="button">Click me</button>
<script src="square.js" ></script>
</body>
</html>// Elements grabbed from the document
let square1 = document.getElementById('square1');
let square2 = document.getElementById('square2');
let square3 = document.getElementById('square3')
let button = document.getElementById('button');
//This picks a random number
const rgb = (num) => {
return Math.floor(Math.random() * num);
};
const changeColorOfaRandomSquareToRandom = () => {
//This I hope will pick a random square
let array = [square1, square2, square3];
let randomNumber = Math.floor[Math.random() * 3];
// I assign the value of the randomSquare function to a new variable
let squareRND = array[randomNumber];
//This picks a random color
let randomColor = 'rgb(' + rgb(255) + ',' + rgb(255) + ',' + rgb(255) + ')';
return squareRND.style.backgroundColor = randomColor();
}
button.onclick = changeColorOfaRandomSquareToRandom();#square1{
background-color: lightpink;
width:200px;
height: 200px;
display: flex;
margin-top: 200px;
}
#square2{
background-color: lightblue;
width: 200px;
height: 200px;
display: flex;
margin-top: 200px;
}
#square3{
background-color: lightgreen;
width: 200px;
height: 200px;
display: flex;
margin-top: 200px;
}
#squares{
display: flex;
flex-wrap: wrap;
justify-content: center;
}
#button{
width: 75px;
height: 25px;
margin-top: 20px;
margin-left: 600px;
}<html>
<head>
<link href="squares.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<div id="squares">
<div id="square1" onclick="colorChange">
</div>
<div id="square2">
</div>
<div id="square3">
</div>
</div>
<button id="button">Click me</button>
<script src="square.js" ></script>
</body>
</html>javascript
javascript
asked Nov 23 '18 at 15:03
darius.maximusdarius.maximus
137
asked Nov 23 '18 at 15:03
darius.maximusdarius.maximus
137
edited Nov 23 '18 at 16:18
darius.maximus
asked Nov 23 '18 at 15:03
darius.maximusdarius.maximus
137
asked Nov 23 '18 at 15:03
darius.maximusdarius.maximus
137
asked Nov 23 '18 at 15:03
darius.maximusdarius.maximus
137
137
You are creating functions inside youronclickfunction but not calling them, why don't you just execute that code instead of wrapping them inside another functions?
– Gonzalo
Nov 23 '18 at 15:10
Could you show me how to do that? :P Sorry to bother you, but I am a newby :D
– darius.maximus
Nov 23 '18 at 15:22
I made a snippet of what you had with a simple button. Please add the actual markup so that we may better assist with your issue here. I also suggest you change the id from "button" to a more descriptive id perhaps?
– Mark Schultheiss
Nov 23 '18 at 15:43
You want me to add the css and html ?
– darius.maximus
Nov 23 '18 at 15:56
Yes please, right now your question is OK make your question Great! stackoverflow.com/help/mcve NOTE: make the questions easy to answer for people helping you. I created the snippet to assist you in learning how to do that (create great questions)
– Mark Schultheiss
Nov 23 '18 at 15:57
|
show 4 more comments
You are creating functions inside youronclickfunction but not calling them, why don't you just execute that code instead of wrapping them inside another functions?
– Gonzalo
Nov 23 '18 at 15:10
Could you show me how to do that? :P Sorry to bother you, but I am a newby :D
– darius.maximus
Nov 23 '18 at 15:22
I made a snippet of what you had with a simple button. Please add the actual markup so that we may better assist with your issue here. I also suggest you change the id from "button" to a more descriptive id perhaps?
– Mark Schultheiss
Nov 23 '18 at 15:43
You want me to add the css and html ?
– darius.maximus
Nov 23 '18 at 15:56
Yes please, right now your question is OK make your question Great! stackoverflow.com/help/mcve NOTE: make the questions easy to answer for people helping you. I created the snippet to assist you in learning how to do that (create great questions)
– Mark Schultheiss
Nov 23 '18 at 15:57
You are creating functions inside your
onclick function but not calling them, why don't you just execute that code instead of wrapping them inside another functions?– Gonzalo
Nov 23 '18 at 15:10
You are creating functions inside your
onclick function but not calling them, why don't you just execute that code instead of wrapping them inside another functions?– Gonzalo
Nov 23 '18 at 15:10
Could you show me how to do that? :P Sorry to bother you, but I am a newby :D
– darius.maximus
Nov 23 '18 at 15:22
Could you show me how to do that? :P Sorry to bother you, but I am a newby :D
– darius.maximus
Nov 23 '18 at 15:22
I made a snippet of what you had with a simple button. Please add the actual markup so that we may better assist with your issue here. I also suggest you change the id from "button" to a more descriptive id perhaps?
– Mark Schultheiss
Nov 23 '18 at 15:43
I made a snippet of what you had with a simple button. Please add the actual markup so that we may better assist with your issue here. I also suggest you change the id from "button" to a more descriptive id perhaps?
– Mark Schultheiss
Nov 23 '18 at 15:43
You want me to add the css and html ?
– darius.maximus
Nov 23 '18 at 15:56
You want me to add the css and html ?
– darius.maximus
Nov 23 '18 at 15:56
Yes please, right now your question is OK make your question Great! stackoverflow.com/help/mcve NOTE: make the questions easy to answer for people helping you. I created the snippet to assist you in learning how to do that (create great questions)
– Mark Schultheiss
Nov 23 '18 at 15:57
Yes please, right now your question is OK make your question Great! stackoverflow.com/help/mcve NOTE: make the questions easy to answer for people helping you. I created the snippet to assist you in learning how to do that (create great questions)
– Mark Schultheiss
Nov 23 '18 at 15:57
|
show 4 more comments
5 Answers
5
active
oldest
votes
0
In your code, Math.floor should be within parenthesis instead of square brackets like:
let randomNumber = Math.floor(Math.random() * 3);
Then you should get the element by id from the squareRND like:
document.getElementById(squareRND).style.backgroundColor = randomColor
You should also run the colorChange();
For example:
let button = document.getElementById('button');
const changeColorOfaRandomSquareToRandom = () => {
//This I hope will pick a random square
let randomSquare = () => {
let array = ['square1', 'square2', 'square3'];
let randomNumber = Math.floor(Math.random() * 3);
return array[randomNumber]
};
// I assign the value of the randomSquare function to a new variable
let squareRND = randomSquare();
console.log(randomSquare());
//This picks a random number
let rgb = (num) => {
return Math.floor(Math.random() * num);
};
//This picks a random color
let colorChange = () => {
let randomColor = 'rgb(' + rgb(255) + ',' + rgb(255) + ',' + rgb(255) + ')';
document.getElementById(squareRND).style.backgroundColor = randomColor;
};
colorChange();
};
button.onclick = changeColorOfaRandomSquareToRandom;#square1 {
background-color: lightpink;
width: 200px;
height: 200px;
display: flex;
margin-top: 200px;
}
#square2 {
background-color: lightblue;
width: 200px;
height: 200px;
display: flex;
margin-top: 200px;
}
#square3 {
background-color: lightgreen;
width: 200px;
height: 200px;
display: flex;
margin-top: 200px;
}
#squares {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
#button {
width: 75px;
height: 25px;
margin-top: 20px;
margin-left: 600px;
}<div id="squares">
<div id="square1">
</div>
<div id="square2">
</div>
<div id="square3">
</div>
</div>
<button id="button">Click me</button>answered Nov 23 '18 at 16:05
The fourth birdThe fourth bird
21.3k81327
1
Ohhhh thx a lot!!! :)
– darius.maximus
Nov 23 '18 at 16:10
actually it changes color of a random square after refreshing the website each time... But thanx a lot, it was a clue for me :)
– darius.maximus
Nov 23 '18 at 18:06
@darius.maximus Out of curiosity, why did you remove the checkmark? It changes color when the click event fires and the handler executes which it does on the button click. Feel free to consider upvoting all the answers that have proven helpful to you.
– The fourth bird
Nov 23 '18 at 19:11
sorry, that was an experiment. I click this and that, trying to make myself feel at home on stack overflow :D Yeah, I cannot upvote the answers couse it says I have less than 15 reputation points. To make the situation worse, my reputation is even worse after posting the question.
– darius.maximus
Nov 23 '18 at 20:40
add a comment |
3
in your let array = ['square1', 'square2', 'square3'];, if you pass in the variables directly rather than strings, it should work. Right now you are doing 'square1'.style.backgroundColor =
answered Nov 23 '18 at 15:07
CecilCecil
22625
add a comment |
0
At the randomSquare method you have to return document.getElementById(array[randomNumber])
e.g
let randomSquare = () => {
...
return document.getElementById(array[randomNumber]);
};
answered Nov 23 '18 at 15:15
Abdel mounaimAbdel mounaim
30625
thx for you reply, however it is still not working :(
– darius.maximus
Nov 23 '18 at 15:29
ofc you have to call the changeColor at the end of the changeColorOfaRandomSquareToRandom()
– Abdel mounaim
Nov 23 '18 at 15:33
Try @Gonzalo code snippet
– Abdel mounaim
Nov 23 '18 at 15:34
add a comment |
0
Try with this code, i have not tested yet:
// Elements grabbed from the document
let square1 = document.getElementById('square1');
let square2 = document.getElementById('square2');
let square3 = document.getElementById('square3')
let button = document.getElementById('button');
//This picks a random number
const rgb = (num) => {
return Math.floor(Math.random() * num);
};
const changeColorOfaRandomSquareToRandom = () => {
//This I hope will pick a random square
let array = [square1, square2, square3];
let randomNumber = Math.floor[Math.random() * 3];
// I assign the value of the randomSquare function to a new variable
let squareRND = array[randomNumber];
//This picks a random color
let randomColor = 'rgb(' + rgb(255) + ',' + rgb(255) + ',' + rgb(255) + ')';
squareRND.style.backgroundColor = randomColor;
}
button.onclick = changeColorOfaRandomSquareToRandom;
You don't call your last function colorChange() anywhere, i don't get why you are creating functions inside your click event function.
answered Nov 23 '18 at 15:25
GonzaloGonzalo
770522
I don't know why, I am totally new to this stuff, just trying this and that :P
– darius.maximus
Nov 23 '18 at 15:38
Thanks a lot for your reply! I tested it but still doesn;t work... :(
– darius.maximus
Nov 23 '18 at 15:39
@darius.maximus what's the problem? Any errors in console?
– Gonzalo
Nov 23 '18 at 16:08
yeay, it throws this error: Uncaught TypeError: Cannot read property 'style' of undefined at HTMLButtonElement.changeColorOfaRandomSquareToRandom (square.js:23) changeColorOfaRandomSquareToRandom @ square.js:23
– darius.maximus
Nov 23 '18 at 16:28
add a comment |
0
I was trying to solve it and finally (and accidentally) I've made it! :D
Let me show you:
// Elements grabbed from the document
let square1 = document.getElementById('square1');
let square2 = document.getElementById('square2');
let square3 = document.getElementById('square3')
let button = document.getElementById('button');
let squares = ['square1', 'square2', 'square3'];
//This picks a random square from the array and changes color
const randomize = () => {
let randomSquare = squares[Math.floor(Math.random() * squares.length)];
let randomColor = 'rgb(' + rgb(255) + ',' + rgb(255) + ',' + rgb(255) + ')';
document.getElementById(randomSquare).style.background = randomColor;
}
//Draws a number for a random color
let rgb = (num) => {
return Math.floor(Math.random() * num)
};
//Function attached to a button
button.onclick = randomize;#square1{
background-color: lightpink;
width:200px;
height: 200px;
display: flex;
}
#square2{
background-color: lightblue;
width: 200px;
height: 200px;
display: flex;
}
#square3{
background-color: lightgreen;
width: 200px;
height: 200px;
display: flex;
}
#squares{
display: flex;
flex-wrap: wrap;
justify-content: center;
}
#button{
width: 75px;
height: 25px;
margin-top: 20px;
margin-left: 600px;
}<!DOCTYPE html>
<html>
<head>
<link href="squares.css" type="text/css" rel="stylesheet"/>
<script src="square.js" defer></script>
</head>
<body>
<div id="squares">
<div id="square1" onclick="colorChange">
</div>
<div id="square2">
</div>
<div id="square3">
</div>
</div>
<button id="button">Click me</button>
</body>
</html>edited Nov 23 '18 at 19:17
Zoe
11.3k74078
answered Nov 23 '18 at 18:03
darius.maximusdarius.maximus
137
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53448993%2fgenerate-a-random-color-of-a-random-square-in-javascript%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
5 Answers
5
active
oldest
votes
5 Answers
5
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
In your code, Math.floor should be within parenthesis instead of square brackets like:
let randomNumber = Math.floor(Math.random() * 3);
Then you should get the element by id from the squareRND like:
document.getElementById(squareRND).style.backgroundColor = randomColor
You should also run the colorChange();
For example:
let button = document.getElementById('button');
const changeColorOfaRandomSquareToRandom = () => {
//This I hope will pick a random square
let randomSquare = () => {
let array = ['square1', 'square2', 'square3'];
let randomNumber = Math.floor(Math.random() * 3);
return array[randomNumber]
};
// I assign the value of the randomSquare function to a new variable
let squareRND = randomSquare();
console.log(randomSquare());
//This picks a random number
let rgb = (num) => {
return Math.floor(Math.random() * num);
};
//This picks a random color
let colorChange = () => {
let randomColor = 'rgb(' + rgb(255) + ',' + rgb(255) + ',' + rgb(255) + ')';
document.getElementById(squareRND).style.backgroundColor = randomColor;
};
colorChange();
};
button.onclick = changeColorOfaRandomSquareToRandom;#square1 {
background-color: lightpink;
width: 200px;
height: 200px;
display: flex;
margin-top: 200px;
}
#square2 {
background-color: lightblue;
width: 200px;
height: 200px;
display: flex;
margin-top: 200px;
}
#square3 {
background-color: lightgreen;
width: 200px;
height: 200px;
display: flex;
margin-top: 200px;
}
#squares {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
#button {
width: 75px;
height: 25px;
margin-top: 20px;
margin-left: 600px;
}<div id="squares">
<div id="square1">
</div>
<div id="square2">
</div>
<div id="square3">
</div>
</div>
<button id="button">Click me</button>answered Nov 23 '18 at 16:05
The fourth birdThe fourth bird
21.3k81327
1
Ohhhh thx a lot!!! :)
– darius.maximus
Nov 23 '18 at 16:10
actually it changes color of a random square after refreshing the website each time... But thanx a lot, it was a clue for me :)
– darius.maximus
Nov 23 '18 at 18:06
@darius.maximus Out of curiosity, why did you remove the checkmark? It changes color when the click event fires and the handler executes which it does on the button click. Feel free to consider upvoting all the answers that have proven helpful to you.
– The fourth bird
Nov 23 '18 at 19:11
sorry, that was an experiment. I click this and that, trying to make myself feel at home on stack overflow :D Yeah, I cannot upvote the answers couse it says I have less than 15 reputation points. To make the situation worse, my reputation is even worse after posting the question.
– darius.maximus
Nov 23 '18 at 20:40
add a comment |
0
In your code, Math.floor should be within parenthesis instead of square brackets like:
let randomNumber = Math.floor(Math.random() * 3);
Then you should get the element by id from the squareRND like:
document.getElementById(squareRND).style.backgroundColor = randomColor
You should also run the colorChange();
For example:
let button = document.getElementById('button');
const changeColorOfaRandomSquareToRandom = () => {
//This I hope will pick a random square
let randomSquare = () => {
let array = ['square1', 'square2', 'square3'];
let randomNumber = Math.floor(Math.random() * 3);
return array[randomNumber]
};
// I assign the value of the randomSquare function to a new variable
let squareRND = randomSquare();
console.log(randomSquare());
//This picks a random number
let rgb = (num) => {
return Math.floor(Math.random() * num);
};
//This picks a random color
let colorChange = () => {
let randomColor = 'rgb(' + rgb(255) + ',' + rgb(255) + ',' + rgb(255) + ')';
document.getElementById(squareRND).style.backgroundColor = randomColor;
};
colorChange();
};
button.onclick = changeColorOfaRandomSquareToRandom;#square1 {
background-color: lightpink;
width: 200px;
height: 200px;
display: flex;
margin-top: 200px;
}
#square2 {
background-color: lightblue;
width: 200px;
height: 200px;
display: flex;
margin-top: 200px;
}
#square3 {
background-color: lightgreen;
width: 200px;
height: 200px;
display: flex;
margin-top: 200px;
}
#squares {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
#button {
width: 75px;
height: 25px;
margin-top: 20px;
margin-left: 600px;
}<div id="squares">
<div id="square1">
</div>
<div id="square2">
</div>
<div id="square3">
</div>
</div>
<button id="button">Click me</button>answered Nov 23 '18 at 16:05
The fourth birdThe fourth bird
21.3k81327
1
Ohhhh thx a lot!!! :)
– darius.maximus
Nov 23 '18 at 16:10
actually it changes color of a random square after refreshing the website each time... But thanx a lot, it was a clue for me :)
– darius.maximus
Nov 23 '18 at 18:06
@darius.maximus Out of curiosity, why did you remove the checkmark? It changes color when the click event fires and the handler executes which it does on the button click. Feel free to consider upvoting all the answers that have proven helpful to you.
– The fourth bird
Nov 23 '18 at 19:11
sorry, that was an experiment. I click this and that, trying to make myself feel at home on stack overflow :D Yeah, I cannot upvote the answers couse it says I have less than 15 reputation points. To make the situation worse, my reputation is even worse after posting the question.
– darius.maximus
Nov 23 '18 at 20:40
add a comment |
0
0
0
In your code, Math.floor should be within parenthesis instead of square brackets like:
let randomNumber = Math.floor(Math.random() * 3);
Then you should get the element by id from the squareRND like:
document.getElementById(squareRND).style.backgroundColor = randomColor
You should also run the colorChange();
For example:
let button = document.getElementById('button');
const changeColorOfaRandomSquareToRandom = () => {
//This I hope will pick a random square
let randomSquare = () => {
let array = ['square1', 'square2', 'square3'];
let randomNumber = Math.floor(Math.random() * 3);
return array[randomNumber]
};
// I assign the value of the randomSquare function to a new variable
let squareRND = randomSquare();
console.log(randomSquare());
//This picks a random number
let rgb = (num) => {
return Math.floor(Math.random() * num);
};
//This picks a random color
let colorChange = () => {
let randomColor = 'rgb(' + rgb(255) + ',' + rgb(255) + ',' + rgb(255) + ')';
document.getElementById(squareRND).style.backgroundColor = randomColor;
};
colorChange();
};
button.onclick = changeColorOfaRandomSquareToRandom;#square1 {
background-color: lightpink;
width: 200px;
height: 200px;
display: flex;
margin-top: 200px;
}
#square2 {
background-color: lightblue;
width: 200px;
height: 200px;
display: flex;
margin-top: 200px;
}
#square3 {
background-color: lightgreen;
width: 200px;
height: 200px;
display: flex;
margin-top: 200px;
}
#squares {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
#button {
width: 75px;
height: 25px;
margin-top: 20px;
margin-left: 600px;
}<div id="squares">
<div id="square1">
</div>
<div id="square2">
</div>
<div id="square3">
</div>
</div>
<button id="button">Click me</button>answered Nov 23 '18 at 16:05
The fourth birdThe fourth bird
21.3k81327
In your code, Math.floor should be within parenthesis instead of square brackets like:
let randomNumber = Math.floor(Math.random() * 3);
Then you should get the element by id from the squareRND like:
document.getElementById(squareRND).style.backgroundColor = randomColor
You should also run the colorChange();
For example:
let button = document.getElementById('button');
const changeColorOfaRandomSquareToRandom = () => {
//This I hope will pick a random square
let randomSquare = () => {
let array = ['square1', 'square2', 'square3'];
let randomNumber = Math.floor(Math.random() * 3);
return array[randomNumber]
};
// I assign the value of the randomSquare function to a new variable
let squareRND = randomSquare();
console.log(randomSquare());
//This picks a random number
let rgb = (num) => {
return Math.floor(Math.random() * num);
};
//This picks a random color
let colorChange = () => {
let randomColor = 'rgb(' + rgb(255) + ',' + rgb(255) + ',' + rgb(255) + ')';
document.getElementById(squareRND).style.backgroundColor = randomColor;
};
colorChange();
};
button.onclick = changeColorOfaRandomSquareToRandom;#square1 {
background-color: lightpink;
width: 200px;
height: 200px;
display: flex;
margin-top: 200px;
}
#square2 {
background-color: lightblue;
width: 200px;
height: 200px;
display: flex;
margin-top: 200px;
}
#square3 {
background-color: lightgreen;
width: 200px;
height: 200px;
display: flex;
margin-top: 200px;
}
#squares {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
#button {
width: 75px;
height: 25px;
margin-top: 20px;
margin-left: 600px;
}<div id="squares">
<div id="square1">
</div>
<div id="square2">
</div>
<div id="square3">
</div>
</div>
<button id="button">Click me</button>let button = document.getElementById('button');
const changeColorOfaRandomSquareToRandom = () => {
//This I hope will pick a random square
let randomSquare = () => {
let array = ['square1', 'square2', 'square3'];
let randomNumber = Math.floor(Math.random() * 3);
return array[randomNumber]
};
// I assign the value of the randomSquare function to a new variable
let squareRND = randomSquare();
console.log(randomSquare());
//This picks a random number
let rgb = (num) => {
return Math.floor(Math.random() * num);
};
//This picks a random color
let colorChange = () => {
let randomColor = 'rgb(' + rgb(255) + ',' + rgb(255) + ',' + rgb(255) + ')';
document.getElementById(squareRND).style.backgroundColor = randomColor;
};
colorChange();
};
button.onclick = changeColorOfaRandomSquareToRandom;#square1 {
background-color: lightpink;
width: 200px;
height: 200px;
display: flex;
margin-top: 200px;
}
#square2 {
background-color: lightblue;
width: 200px;
height: 200px;
display: flex;
margin-top: 200px;
}
#square3 {
background-color: lightgreen;
width: 200px;
height: 200px;
display: flex;
margin-top: 200px;
}
#squares {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
#button {
width: 75px;
height: 25px;
margin-top: 20px;
margin-left: 600px;
}<div id="squares">
<div id="square1">
</div>
<div id="square2">
</div>
<div id="square3">
</div>
</div>
<button id="button">Click me</button>let button = document.getElementById('button');
const changeColorOfaRandomSquareToRandom = () => {
//This I hope will pick a random square
let randomSquare = () => {
let array = ['square1', 'square2', 'square3'];
let randomNumber = Math.floor(Math.random() * 3);
return array[randomNumber]
};
// I assign the value of the randomSquare function to a new variable
let squareRND = randomSquare();
console.log(randomSquare());
//This picks a random number
let rgb = (num) => {
return Math.floor(Math.random() * num);
};
//This picks a random color
let colorChange = () => {
let randomColor = 'rgb(' + rgb(255) + ',' + rgb(255) + ',' + rgb(255) + ')';
document.getElementById(squareRND).style.backgroundColor = randomColor;
};
colorChange();
};
button.onclick = changeColorOfaRandomSquareToRandom;#square1 {
background-color: lightpink;
width: 200px;
height: 200px;
display: flex;
margin-top: 200px;
}
#square2 {
background-color: lightblue;
width: 200px;
height: 200px;
display: flex;
margin-top: 200px;
}
#square3 {
background-color: lightgreen;
width: 200px;
height: 200px;
display: flex;
margin-top: 200px;
}
#squares {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
#button {
width: 75px;
height: 25px;
margin-top: 20px;
margin-left: 600px;
}<div id="squares">
<div id="square1">
</div>
<div id="square2">
</div>
<div id="square3">
</div>
</div>
<button id="button">Click me</button>answered Nov 23 '18 at 16:05
The fourth birdThe fourth bird
21.3k81327
answered Nov 23 '18 at 16:05
The fourth birdThe fourth bird
21.3k81327
answered Nov 23 '18 at 16:05
The fourth birdThe fourth bird
21.3k81327
answered Nov 23 '18 at 16:05
The fourth birdThe fourth bird
21.3k81327
21.3k81327
1
Ohhhh thx a lot!!! :)
– darius.maximus
Nov 23 '18 at 16:10
actually it changes color of a random square after refreshing the website each time... But thanx a lot, it was a clue for me :)
– darius.maximus
Nov 23 '18 at 18:06
@darius.maximus Out of curiosity, why did you remove the checkmark? It changes color when the click event fires and the handler executes which it does on the button click. Feel free to consider upvoting all the answers that have proven helpful to you.
– The fourth bird
Nov 23 '18 at 19:11
sorry, that was an experiment. I click this and that, trying to make myself feel at home on stack overflow :D Yeah, I cannot upvote the answers couse it says I have less than 15 reputation points. To make the situation worse, my reputation is even worse after posting the question.
– darius.maximus
Nov 23 '18 at 20:40
add a comment |
1
Ohhhh thx a lot!!! :)
– darius.maximus
Nov 23 '18 at 16:10
actually it changes color of a random square after refreshing the website each time... But thanx a lot, it was a clue for me :)
– darius.maximus
Nov 23 '18 at 18:06
@darius.maximus Out of curiosity, why did you remove the checkmark? It changes color when the click event fires and the handler executes which it does on the button click. Feel free to consider upvoting all the answers that have proven helpful to you.
– The fourth bird
Nov 23 '18 at 19:11
sorry, that was an experiment. I click this and that, trying to make myself feel at home on stack overflow :D Yeah, I cannot upvote the answers couse it says I have less than 15 reputation points. To make the situation worse, my reputation is even worse after posting the question.
– darius.maximus
Nov 23 '18 at 20:40
1
1
Ohhhh thx a lot!!! :)
– darius.maximus
Nov 23 '18 at 16:10
Ohhhh thx a lot!!! :)
– darius.maximus
Nov 23 '18 at 16:10
actually it changes color of a random square after refreshing the website each time... But thanx a lot, it was a clue for me :)
– darius.maximus
Nov 23 '18 at 18:06
actually it changes color of a random square after refreshing the website each time... But thanx a lot, it was a clue for me :)
– darius.maximus
Nov 23 '18 at 18:06
@darius.maximus Out of curiosity, why did you remove the checkmark? It changes color when the click event fires and the handler executes which it does on the button click. Feel free to consider upvoting all the answers that have proven helpful to you.
– The fourth bird
Nov 23 '18 at 19:11
@darius.maximus Out of curiosity, why did you remove the checkmark? It changes color when the click event fires and the handler executes which it does on the button click. Feel free to consider upvoting all the answers that have proven helpful to you.
– The fourth bird
Nov 23 '18 at 19:11
sorry, that was an experiment. I click this and that, trying to make myself feel at home on stack overflow :D Yeah, I cannot upvote the answers couse it says I have less than 15 reputation points. To make the situation worse, my reputation is even worse after posting the question.
– darius.maximus
Nov 23 '18 at 20:40
sorry, that was an experiment. I click this and that, trying to make myself feel at home on stack overflow :D Yeah, I cannot upvote the answers couse it says I have less than 15 reputation points. To make the situation worse, my reputation is even worse after posting the question.
– darius.maximus
Nov 23 '18 at 20:40
add a comment |
3
in your let array = ['square1', 'square2', 'square3'];, if you pass in the variables directly rather than strings, it should work. Right now you are doing 'square1'.style.backgroundColor =
answered Nov 23 '18 at 15:07
CecilCecil
22625
add a comment |
3
in your let array = ['square1', 'square2', 'square3'];, if you pass in the variables directly rather than strings, it should work. Right now you are doing 'square1'.style.backgroundColor =
answered Nov 23 '18 at 15:07
CecilCecil
22625
add a comment |
3
3
3
in your let array = ['square1', 'square2', 'square3'];, if you pass in the variables directly rather than strings, it should work. Right now you are doing 'square1'.style.backgroundColor =
answered Nov 23 '18 at 15:07
CecilCecil
22625
in your let array = ['square1', 'square2', 'square3'];, if you pass in the variables directly rather than strings, it should work. Right now you are doing 'square1'.style.backgroundColor =
answered Nov 23 '18 at 15:07
CecilCecil
22625
answered Nov 23 '18 at 15:07
CecilCecil
22625
answered Nov 23 '18 at 15:07
CecilCecil
22625
answered Nov 23 '18 at 15:07
CecilCecil
22625
22625
add a comment |
add a comment |
0
At the randomSquare method you have to return document.getElementById(array[randomNumber])
e.g
let randomSquare = () => {
...
return document.getElementById(array[randomNumber]);
};
answered Nov 23 '18 at 15:15
Abdel mounaimAbdel mounaim
30625
thx for you reply, however it is still not working :(
– darius.maximus
Nov 23 '18 at 15:29
ofc you have to call the changeColor at the end of the changeColorOfaRandomSquareToRandom()
– Abdel mounaim
Nov 23 '18 at 15:33
Try @Gonzalo code snippet
– Abdel mounaim
Nov 23 '18 at 15:34
add a comment |
0
At the randomSquare method you have to return document.getElementById(array[randomNumber])
e.g
let randomSquare = () => {
...
return document.getElementById(array[randomNumber]);
};
answered Nov 23 '18 at 15:15
Abdel mounaimAbdel mounaim
30625
thx for you reply, however it is still not working :(
– darius.maximus
Nov 23 '18 at 15:29
ofc you have to call the changeColor at the end of the changeColorOfaRandomSquareToRandom()
– Abdel mounaim
Nov 23 '18 at 15:33
Try @Gonzalo code snippet
– Abdel mounaim
Nov 23 '18 at 15:34
add a comment |
0
0
0
At the randomSquare method you have to return document.getElementById(array[randomNumber])
e.g
let randomSquare = () => {
...
return document.getElementById(array[randomNumber]);
};
answered Nov 23 '18 at 15:15
Abdel mounaimAbdel mounaim
30625
At the randomSquare method you have to return document.getElementById(array[randomNumber])
e.g
let randomSquare = () => {
...
return document.getElementById(array[randomNumber]);
};
answered Nov 23 '18 at 15:15
Abdel mounaimAbdel mounaim
30625
answered Nov 23 '18 at 15:15
Abdel mounaimAbdel mounaim
30625
answered Nov 23 '18 at 15:15
Abdel mounaimAbdel mounaim
30625
answered Nov 23 '18 at 15:15
Abdel mounaimAbdel mounaim
30625
30625
thx for you reply, however it is still not working :(
– darius.maximus
Nov 23 '18 at 15:29
ofc you have to call the changeColor at the end of the changeColorOfaRandomSquareToRandom()
– Abdel mounaim
Nov 23 '18 at 15:33
Try @Gonzalo code snippet
– Abdel mounaim
Nov 23 '18 at 15:34
add a comment |
thx for you reply, however it is still not working :(
– darius.maximus
Nov 23 '18 at 15:29
ofc you have to call the changeColor at the end of the changeColorOfaRandomSquareToRandom()
– Abdel mounaim
Nov 23 '18 at 15:33
Try @Gonzalo code snippet
– Abdel mounaim
Nov 23 '18 at 15:34
thx for you reply, however it is still not working :(
– darius.maximus
Nov 23 '18 at 15:29
thx for you reply, however it is still not working :(
– darius.maximus
Nov 23 '18 at 15:29
ofc you have to call the changeColor at the end of the changeColorOfaRandomSquareToRandom()
– Abdel mounaim
Nov 23 '18 at 15:33
ofc you have to call the changeColor at the end of the changeColorOfaRandomSquareToRandom()
– Abdel mounaim
Nov 23 '18 at 15:33
Try @Gonzalo code snippet
– Abdel mounaim
Nov 23 '18 at 15:34
Try @Gonzalo code snippet
– Abdel mounaim
Nov 23 '18 at 15:34
add a comment |
0
Try with this code, i have not tested yet:
// Elements grabbed from the document
let square1 = document.getElementById('square1');
let square2 = document.getElementById('square2');
let square3 = document.getElementById('square3')
let button = document.getElementById('button');
//This picks a random number
const rgb = (num) => {
return Math.floor(Math.random() * num);
};
const changeColorOfaRandomSquareToRandom = () => {
//This I hope will pick a random square
let array = [square1, square2, square3];
let randomNumber = Math.floor[Math.random() * 3];
// I assign the value of the randomSquare function to a new variable
let squareRND = array[randomNumber];
//This picks a random color
let randomColor = 'rgb(' + rgb(255) + ',' + rgb(255) + ',' + rgb(255) + ')';
squareRND.style.backgroundColor = randomColor;
}
button.onclick = changeColorOfaRandomSquareToRandom;
You don't call your last function colorChange() anywhere, i don't get why you are creating functions inside your click event function.
answered Nov 23 '18 at 15:25
GonzaloGonzalo
770522
I don't know why, I am totally new to this stuff, just trying this and that :P
– darius.maximus
Nov 23 '18 at 15:38
Thanks a lot for your reply! I tested it but still doesn;t work... :(
– darius.maximus
Nov 23 '18 at 15:39
@darius.maximus what's the problem? Any errors in console?
– Gonzalo
Nov 23 '18 at 16:08
yeay, it throws this error: Uncaught TypeError: Cannot read property 'style' of undefined at HTMLButtonElement.changeColorOfaRandomSquareToRandom (square.js:23) changeColorOfaRandomSquareToRandom @ square.js:23
– darius.maximus
Nov 23 '18 at 16:28
add a comment |
0
Try with this code, i have not tested yet:
// Elements grabbed from the document
let square1 = document.getElementById('square1');
let square2 = document.getElementById('square2');
let square3 = document.getElementById('square3')
let button = document.getElementById('button');
//This picks a random number
const rgb = (num) => {
return Math.floor(Math.random() * num);
};
const changeColorOfaRandomSquareToRandom = () => {
//This I hope will pick a random square
let array = [square1, square2, square3];
let randomNumber = Math.floor[Math.random() * 3];
// I assign the value of the randomSquare function to a new variable
let squareRND = array[randomNumber];
//This picks a random color
let randomColor = 'rgb(' + rgb(255) + ',' + rgb(255) + ',' + rgb(255) + ')';
squareRND.style.backgroundColor = randomColor;
}
button.onclick = changeColorOfaRandomSquareToRandom;
You don't call your last function colorChange() anywhere, i don't get why you are creating functions inside your click event function.
answered Nov 23 '18 at 15:25
GonzaloGonzalo
770522
I don't know why, I am totally new to this stuff, just trying this and that :P
– darius.maximus
Nov 23 '18 at 15:38
Thanks a lot for your reply! I tested it but still doesn;t work... :(
– darius.maximus
Nov 23 '18 at 15:39
@darius.maximus what's the problem? Any errors in console?
– Gonzalo
Nov 23 '18 at 16:08
yeay, it throws this error: Uncaught TypeError: Cannot read property 'style' of undefined at HTMLButtonElement.changeColorOfaRandomSquareToRandom (square.js:23) changeColorOfaRandomSquareToRandom @ square.js:23
– darius.maximus
Nov 23 '18 at 16:28
add a comment |
0
0
0
Try with this code, i have not tested yet:
// Elements grabbed from the document
let square1 = document.getElementById('square1');
let square2 = document.getElementById('square2');
let square3 = document.getElementById('square3')
let button = document.getElementById('button');
//This picks a random number
const rgb = (num) => {
return Math.floor(Math.random() * num);
};
const changeColorOfaRandomSquareToRandom = () => {
//This I hope will pick a random square
let array = [square1, square2, square3];
let randomNumber = Math.floor[Math.random() * 3];
// I assign the value of the randomSquare function to a new variable
let squareRND = array[randomNumber];
//This picks a random color
let randomColor = 'rgb(' + rgb(255) + ',' + rgb(255) + ',' + rgb(255) + ')';
squareRND.style.backgroundColor = randomColor;
}
button.onclick = changeColorOfaRandomSquareToRandom;
You don't call your last function colorChange() anywhere, i don't get why you are creating functions inside your click event function.
answered Nov 23 '18 at 15:25
GonzaloGonzalo
770522
Try with this code, i have not tested yet:
// Elements grabbed from the document
let square1 = document.getElementById('square1');
let square2 = document.getElementById('square2');
let square3 = document.getElementById('square3')
let button = document.getElementById('button');
//This picks a random number
const rgb = (num) => {
return Math.floor(Math.random() * num);
};
const changeColorOfaRandomSquareToRandom = () => {
//This I hope will pick a random square
let array = [square1, square2, square3];
let randomNumber = Math.floor[Math.random() * 3];
// I assign the value of the randomSquare function to a new variable
let squareRND = array[randomNumber];
//This picks a random color
let randomColor = 'rgb(' + rgb(255) + ',' + rgb(255) + ',' + rgb(255) + ')';
squareRND.style.backgroundColor = randomColor;
}
button.onclick = changeColorOfaRandomSquareToRandom;
You don't call your last function colorChange() anywhere, i don't get why you are creating functions inside your click event function.
answered Nov 23 '18 at 15:25
GonzaloGonzalo
770522
answered Nov 23 '18 at 15:25
GonzaloGonzalo
770522
answered Nov 23 '18 at 15:25
GonzaloGonzalo
770522
answered Nov 23 '18 at 15:25
GonzaloGonzalo
770522
770522
I don't know why, I am totally new to this stuff, just trying this and that :P
– darius.maximus
Nov 23 '18 at 15:38
Thanks a lot for your reply! I tested it but still doesn;t work... :(
– darius.maximus
Nov 23 '18 at 15:39
@darius.maximus what's the problem? Any errors in console?
– Gonzalo
Nov 23 '18 at 16:08
yeay, it throws this error: Uncaught TypeError: Cannot read property 'style' of undefined at HTMLButtonElement.changeColorOfaRandomSquareToRandom (square.js:23) changeColorOfaRandomSquareToRandom @ square.js:23
– darius.maximus
Nov 23 '18 at 16:28
add a comment |
I don't know why, I am totally new to this stuff, just trying this and that :P
– darius.maximus
Nov 23 '18 at 15:38
Thanks a lot for your reply! I tested it but still doesn;t work... :(
– darius.maximus
Nov 23 '18 at 15:39
@darius.maximus what's the problem? Any errors in console?
– Gonzalo
Nov 23 '18 at 16:08
yeay, it throws this error: Uncaught TypeError: Cannot read property 'style' of undefined at HTMLButtonElement.changeColorOfaRandomSquareToRandom (square.js:23) changeColorOfaRandomSquareToRandom @ square.js:23
– darius.maximus
Nov 23 '18 at 16:28
I don't know why, I am totally new to this stuff, just trying this and that :P
– darius.maximus
Nov 23 '18 at 15:38
I don't know why, I am totally new to this stuff, just trying this and that :P
– darius.maximus
Nov 23 '18 at 15:38
Thanks a lot for your reply! I tested it but still doesn;t work... :(
– darius.maximus
Nov 23 '18 at 15:39
Thanks a lot for your reply! I tested it but still doesn;t work... :(
– darius.maximus
Nov 23 '18 at 15:39
@darius.maximus what's the problem? Any errors in console?
– Gonzalo
Nov 23 '18 at 16:08
@darius.maximus what's the problem? Any errors in console?
– Gonzalo
Nov 23 '18 at 16:08
yeay, it throws this error: Uncaught TypeError: Cannot read property 'style' of undefined at HTMLButtonElement.changeColorOfaRandomSquareToRandom (square.js:23) changeColorOfaRandomSquareToRandom @ square.js:23
– darius.maximus
Nov 23 '18 at 16:28
yeay, it throws this error: Uncaught TypeError: Cannot read property 'style' of undefined at HTMLButtonElement.changeColorOfaRandomSquareToRandom (square.js:23) changeColorOfaRandomSquareToRandom @ square.js:23
– darius.maximus
Nov 23 '18 at 16:28
add a comment |
0
I was trying to solve it and finally (and accidentally) I've made it! :D
Let me show you:
// Elements grabbed from the document
let square1 = document.getElementById('square1');
let square2 = document.getElementById('square2');
let square3 = document.getElementById('square3')
let button = document.getElementById('button');
let squares = ['square1', 'square2', 'square3'];
//This picks a random square from the array and changes color
const randomize = () => {
let randomSquare = squares[Math.floor(Math.random() * squares.length)];
let randomColor = 'rgb(' + rgb(255) + ',' + rgb(255) + ',' + rgb(255) + ')';
document.getElementById(randomSquare).style.background = randomColor;
}
//Draws a number for a random color
let rgb = (num) => {
return Math.floor(Math.random() * num)
};
//Function attached to a button
button.onclick = randomize;#square1{
background-color: lightpink;
width:200px;
height: 200px;
display: flex;
}
#square2{
background-color: lightblue;
width: 200px;
height: 200px;
display: flex;
}
#square3{
background-color: lightgreen;
width: 200px;
height: 200px;
display: flex;
}
#squares{
display: flex;
flex-wrap: wrap;
justify-content: center;
}
#button{
width: 75px;
height: 25px;
margin-top: 20px;
margin-left: 600px;
}<!DOCTYPE html>
<html>
<head>
<link href="squares.css" type="text/css" rel="stylesheet"/>
<script src="square.js" defer></script>
</head>
<body>
<div id="squares">
<div id="square1" onclick="colorChange">
</div>
<div id="square2">
</div>
<div id="square3">
</div>
</div>
<button id="button">Click me</button>
</body>
</html>edited Nov 23 '18 at 19:17
Zoe
11.3k74078
answered Nov 23 '18 at 18:03
darius.maximusdarius.maximus
137
add a comment |
0
I was trying to solve it and finally (and accidentally) I've made it! :D
Let me show you:
// Elements grabbed from the document
let square1 = document.getElementById('square1');
let square2 = document.getElementById('square2');
let square3 = document.getElementById('square3')
let button = document.getElementById('button');
let squares = ['square1', 'square2', 'square3'];
//This picks a random square from the array and changes color
const randomize = () => {
let randomSquare = squares[Math.floor(Math.random() * squares.length)];
let randomColor = 'rgb(' + rgb(255) + ',' + rgb(255) + ',' + rgb(255) + ')';
document.getElementById(randomSquare).style.background = randomColor;
}
//Draws a number for a random color
let rgb = (num) => {
return Math.floor(Math.random() * num)
};
//Function attached to a button
button.onclick = randomize;#square1{
background-color: lightpink;
width:200px;
height: 200px;
display: flex;
}
#square2{
background-color: lightblue;
width: 200px;
height: 200px;
display: flex;
}
#square3{
background-color: lightgreen;
width: 200px;
height: 200px;
display: flex;
}
#squares{
display: flex;
flex-wrap: wrap;
justify-content: center;
}
#button{
width: 75px;
height: 25px;
margin-top: 20px;
margin-left: 600px;
}<!DOCTYPE html>
<html>
<head>
<link href="squares.css" type="text/css" rel="stylesheet"/>
<script src="square.js" defer></script>
</head>
<body>
<div id="squares">
<div id="square1" onclick="colorChange">
</div>
<div id="square2">
</div>
<div id="square3">
</div>
</div>
<button id="button">Click me</button>
</body>
</html>edited Nov 23 '18 at 19:17
Zoe
11.3k74078
answered Nov 23 '18 at 18:03
darius.maximusdarius.maximus
137
add a comment |
0
0
0
I was trying to solve it and finally (and accidentally) I've made it! :D
Let me show you:
// Elements grabbed from the document
let square1 = document.getElementById('square1');
let square2 = document.getElementById('square2');
let square3 = document.getElementById('square3')
let button = document.getElementById('button');
let squares = ['square1', 'square2', 'square3'];
//This picks a random square from the array and changes color
const randomize = () => {
let randomSquare = squares[Math.floor(Math.random() * squares.length)];
let randomColor = 'rgb(' + rgb(255) + ',' + rgb(255) + ',' + rgb(255) + ')';
document.getElementById(randomSquare).style.background = randomColor;
}
//Draws a number for a random color
let rgb = (num) => {
return Math.floor(Math.random() * num)
};
//Function attached to a button
button.onclick = randomize;#square1{
background-color: lightpink;
width:200px;
height: 200px;
display: flex;
}
#square2{
background-color: lightblue;
width: 200px;
height: 200px;
display: flex;
}
#square3{
background-color: lightgreen;
width: 200px;
height: 200px;
display: flex;
}
#squares{
display: flex;
flex-wrap: wrap;
justify-content: center;
}
#button{
width: 75px;
height: 25px;
margin-top: 20px;
margin-left: 600px;
}<!DOCTYPE html>
<html>
<head>
<link href="squares.css" type="text/css" rel="stylesheet"/>
<script src="square.js" defer></script>
</head>
<body>
<div id="squares">
<div id="square1" onclick="colorChange">
</div>
<div id="square2">
</div>
<div id="square3">
</div>
</div>
<button id="button">Click me</button>
</body>
</html>edited Nov 23 '18 at 19:17
Zoe
11.3k74078
answered Nov 23 '18 at 18:03
darius.maximusdarius.maximus
137
I was trying to solve it and finally (and accidentally) I've made it! :D
Let me show you:
// Elements grabbed from the document
let square1 = document.getElementById('square1');
let square2 = document.getElementById('square2');
let square3 = document.getElementById('square3')
let button = document.getElementById('button');
let squares = ['square1', 'square2', 'square3'];
//This picks a random square from the array and changes color
const randomize = () => {
let randomSquare = squares[Math.floor(Math.random() * squares.length)];
let randomColor = 'rgb(' + rgb(255) + ',' + rgb(255) + ',' + rgb(255) + ')';
document.getElementById(randomSquare).style.background = randomColor;
}
//Draws a number for a random color
let rgb = (num) => {
return Math.floor(Math.random() * num)
};
//Function attached to a button
button.onclick = randomize;#square1{
background-color: lightpink;
width:200px;
height: 200px;
display: flex;
}
#square2{
background-color: lightblue;
width: 200px;
height: 200px;
display: flex;
}
#square3{
background-color: lightgreen;
width: 200px;
height: 200px;
display: flex;
}
#squares{
display: flex;
flex-wrap: wrap;
justify-content: center;
}
#button{
width: 75px;
height: 25px;
margin-top: 20px;
margin-left: 600px;
}<!DOCTYPE html>
<html>
<head>
<link href="squares.css" type="text/css" rel="stylesheet"/>
<script src="square.js" defer></script>
</head>
<body>
<div id="squares">
<div id="square1" onclick="colorChange">
</div>
<div id="square2">
</div>
<div id="square3">
</div>
</div>
<button id="button">Click me</button>
</body>
</html>// Elements grabbed from the document
let square1 = document.getElementById('square1');
let square2 = document.getElementById('square2');
let square3 = document.getElementById('square3')
let button = document.getElementById('button');
let squares = ['square1', 'square2', 'square3'];
//This picks a random square from the array and changes color
const randomize = () => {
let randomSquare = squares[Math.floor(Math.random() * squares.length)];
let randomColor = 'rgb(' + rgb(255) + ',' + rgb(255) + ',' + rgb(255) + ')';
document.getElementById(randomSquare).style.background = randomColor;
}
//Draws a number for a random color
let rgb = (num) => {
return Math.floor(Math.random() * num)
};
//Function attached to a button
button.onclick = randomize;#square1{
background-color: lightpink;
width:200px;
height: 200px;
display: flex;
}
#square2{
background-color: lightblue;
width: 200px;
height: 200px;
display: flex;
}
#square3{
background-color: lightgreen;
width: 200px;
height: 200px;
display: flex;
}
#squares{
display: flex;
flex-wrap: wrap;
justify-content: center;
}
#button{
width: 75px;
height: 25px;
margin-top: 20px;
margin-left: 600px;
}<!DOCTYPE html>
<html>
<head>
<link href="squares.css" type="text/css" rel="stylesheet"/>
<script src="square.js" defer></script>
</head>
<body>
<div id="squares">
<div id="square1" onclick="colorChange">
</div>
<div id="square2">
</div>
<div id="square3">
</div>
</div>
<button id="button">Click me</button>
</body>
</html>// Elements grabbed from the document
let square1 = document.getElementById('square1');
let square2 = document.getElementById('square2');
let square3 = document.getElementById('square3')
let button = document.getElementById('button');
let squares = ['square1', 'square2', 'square3'];
//This picks a random square from the array and changes color
const randomize = () => {
let randomSquare = squares[Math.floor(Math.random() * squares.length)];
let randomColor = 'rgb(' + rgb(255) + ',' + rgb(255) + ',' + rgb(255) + ')';
document.getElementById(randomSquare).style.background = randomColor;
}
//Draws a number for a random color
let rgb = (num) => {
return Math.floor(Math.random() * num)
};
//Function attached to a button
button.onclick = randomize;#square1{
background-color: lightpink;
width:200px;
height: 200px;
display: flex;
}
#square2{
background-color: lightblue;
width: 200px;
height: 200px;
display: flex;
}
#square3{
background-color: lightgreen;
width: 200px;
height: 200px;
display: flex;
}
#squares{
display: flex;
flex-wrap: wrap;
justify-content: center;
}
#button{
width: 75px;
height: 25px;
margin-top: 20px;
margin-left: 600px;
}<!DOCTYPE html>
<html>
<head>
<link href="squares.css" type="text/css" rel="stylesheet"/>
<script src="square.js" defer></script>
</head>
<body>
<div id="squares">
<div id="square1" onclick="colorChange">
</div>
<div id="square2">
</div>
<div id="square3">
</div>
</div>
<button id="button">Click me</button>
</body>
</html>edited Nov 23 '18 at 19:17
Zoe
11.3k74078
answered Nov 23 '18 at 18:03
darius.maximusdarius.maximus
137
edited Nov 23 '18 at 19:17
Zoe
11.3k74078
edited Nov 23 '18 at 19:17
Zoe
11.3k74078
edited Nov 23 '18 at 19:17
Zoe
11.3k74078
11.3k74078
answered Nov 23 '18 at 18:03
darius.maximusdarius.maximus
137
answered Nov 23 '18 at 18:03
darius.maximusdarius.maximus
137
answered Nov 23 '18 at 18:03
darius.maximusdarius.maximus
137
137
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53448993%2fgenerate-a-random-color-of-a-random-square-in-javascript%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
You are creating functions inside your
onclickfunction but not calling them, why don't you just execute that code instead of wrapping them inside another functions?– Gonzalo
Nov 23 '18 at 15:10
Could you show me how to do that? :P Sorry to bother you, but I am a newby :D
– darius.maximus
Nov 23 '18 at 15:22
I made a snippet of what you had with a simple button. Please add the actual markup so that we may better assist with your issue here. I also suggest you change the id from "button" to a more descriptive id perhaps?
– Mark Schultheiss
Nov 23 '18 at 15:43
You want me to add the css and html ?
– darius.maximus
Nov 23 '18 at 15:56
Yes please, right now your question is OK make your question Great! stackoverflow.com/help/mcve NOTE: make the questions easy to answer for people helping you. I created the snippet to assist you in learning how to do that (create great questions)
– Mark Schultheiss
Nov 23 '18 at 15:57