En el siguiente código, intento que la computadora elija aleatoriamente un botón y cambie la opacidad del color. Basado en el número aleatorio generado: si el número aleatorio === 1 cambia de color rojo y así sucesivamente. Sin embargo, cuando ejecuto este código. Al azar obtengo un indefinido. Para solucionar este problema, agregué console.log('Algo no funciona') para tratar de resolverlo. Mi pregunta es si estoy usando la función aleatoria correctamente (que creo que sí, por qué está llegando al punto de 'Algo no funciona'. Los números aleatorios deben estar entre 1 y 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()Primero, no estaba devolviendo nada de su función getRandomIntInclusive , solo estaba imprimiendo la salida en la consola. Si no devuelve nada, obviamente obtendrá un valor indefinido.
Luego, en lugar de llamar a la función en cada instrucción if, llame a la función una vez, mantenga el valor en una variable y luego aplique la lógica necesaria.
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>Nota: estos son algunos botones ficticios que creé con fines de prueba, ignore esa parte.