In the code below I am trying to have the computer randomly choose a button and change the color opacity. Based on the random number generated: if random number === 1 change red color and so on. However, when I run this code. I randomly get an undefined. To troubleshoot this I added the console.log('Something is not working') to try and figure it out. My question is if I am using the random function correctly ( which I believe I am, why is is getting to the point of 'Something not working'. The random numbers should be between 1 and 4.
let randomColor = function getRandomIntInclusive(min, max){
min = Math.ceil(min)
max = Math.floor(max)
console.log(Math.floor(Math.random() * (max - min +1)+ min))
}
function getRandomColor() {
if (randomColor(1, 4) === 1){
redBtn.style.opacity = "90%"
setTimeout(function(){
redBtn.style.opacity = "40%"
},300)
console.log(randomColor)
}
else if (randomColor(1, 4) === 2){
blueBtn.style.opacity = "90%"
setTimeout(function(){
blueBtn.style.opacity = "40%"
},300)
console.log(randomColor)
}
else if (randomColor(1, 4) === 3){
greenBtn.style.opacity = "90%"
setTimeout(function(){
greenBtn.style.opacity = "40%"
},300)
console.log(randomColor)
}
else if (randomColor(1, 4) === 4){
yellowBtn.style.opacity = "90%"
setTimeout(function(){
yellowBtn.style.opacity = "40%"
},300)
console.log(randomColor)
}
else console.log('Something is not working')
console.log(randomColor)
}
getRandomColor()
First, you were not returning anything from your function getRandomIntInclusive, you were just printing the output in the console. If you don't return anything, it will obviously get value undefined.
Then, instead of calling the function in every if statement, call the function once, keep the value in a variable then apply your necessary logic.
var redBtn = document.getElementById("redBtn");
var blueBtn = document.getElementById("blueBtn");
var greenBtn = document.getElementById("greenBtn");
var yellowBtn = document.getElementById("yellowBtn");
let randomColor = function getRandomIntInclusive(min, max){
min = Math.ceil(min);
max = Math.floor(max);
console.log(Math.floor(Math.random() * (max - min +1)+ min));
//return the value
return Math.floor(Math.random() * (max - min +1)+ min);
};
function getRandomColor() {
//getting the value
var randomValue = randomColor(1, 4);
if (randomValue === 1){
redBtn.style.opacity = "90%";
setTimeout(function(){
redBtn.style.opacity = "40%"
},300);
console.log(randomColor);
}
else if (randomValue === 2){
blueBtn.style.opacity = "90%";
setTimeout(function(){
blueBtn.style.opacity = "40%"
},300);
console.log(randomColor);
}
else if (randomValue === 3){
greenBtn.style.opacity = "90%";
setTimeout(function(){
greenBtn.style.opacity = "40%"
},300);
console.log(randomColor);
}
else if (randomValue === 4){
yellowBtn.style.opacity = "90%";
setTimeout(function(){
yellowBtn.style.opacity = "40%"
},300);
console.log(randomColor);
}
else {
console.log('Something is not working');
}
console.log(randomColor)
};
getRandomColor();<button id="redBtn">Red Button</button>
<button id="blueBtn">Blue Button</button>
<button id="greenBtn">Green Button</button>
<button id="yellowBtn">Yellow Button</button>Note: These are some dummy buttons I created for testing purposes, please ignore that part.