Hay dos imágenes en mi sitio web, cuando hago clic en una de las imágenes quiero que mi código imprima un gato o una rana, usando Math.random quiero que esto sea aleatorio, quiero que el usuario también reciba un mensaje que hágales saber si tienen razón o no.
var outputDiv = document.getElementById("output-div"); var randomNumber; var message; function setRandomNumber() { randomNumber = Math.floor(Math.random() * 100 + 1); } function setMessage() { var image; if (randomNumber <= 50) { image = "cat.jpg"; } else { image = "frog.jpg"; } message = ` <h3>${image}</h3> <img src="img/${image}"/> `; } function showMessage() { outputDiv.innerHTML = message; } function initLuckyDay() { setRandomNumber(); setMessage(); showMessage(); } initLuckyDay(); <h3>Click the one that you think have a cat!</h3> <div id="output-div"></div> <input type="image" src="img/person1.jpg" name="click" class="button" id="clickme" /> <input type="image" src="img/person2.jpg" name="click" class="button" id="clickme" />Debería poder combinar todas estas funciones en una sola función. .setAttribute() para cambiar la fuente de la imagen y .innerText para cambiar la visualización del mensaje.
const h3Message = document.getElementById('message'), htmlImg = document.getElementById('displayImg'); function setImage() { let random = Math.random(); // generate a random number if (random < 0.5) { // set the source of the image htmlImg.setAttribute('src', 'dog.png'); } else { htmlImg.setAttribute('src', 'cat.png'); } // display the message h3Message.innerText = htmlImg.getAttribute('src'); }Para hacerlo de esta manera, debe establecer identificadores para los elementos HTML.
<h3 id="message"></h3> <img id="displayImg" />