Quiero hacer un sitio web que muestre contenido diferente cada vez que se recarga el lado. El contenido contiene una imagen y un audio. He encontrado un script que aleatoriza mis imágenes después de cada recarga pero reproduce todos los sonidos al mismo tiempo. Creo que tengo que usar otra etiqueta que no sea "ID", pero como soy un principiante absoluto, aún no encontré la correcta. ¡Gracias de antemano!
<!DOCTYPE html <html> <head> <title>johannes</title> <script language="javascript" type="text/javascript" src="random.js"></script> </head> <body> <div id="spaghetti"> <img src="/Users/henrigimm/Documents/Johannes test/Illu Johannes/spaghetti.png"> <audio autoplay> <source src="/Users/henrigimm/Documents/Johannes test/spaghetti.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio> </div> <div id="bier"> <img src="/Users/henrigimm/Documents/Johannes test/Illu Johannes/bier.png"> <audio autoplay> <source src="/Users/henrigimm/Documents/Johannes test/bier.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio> </div> <div id="zelt"> <img src="/Users/henrigimm/Documents/Johannes test/Illu Johannes/zelt.png"> <audio autoplay> <source src="/Users/henrigimm/Documents/Johannes test/zelt.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio> </div> </body> </html> randomNumber = Math.floor(Math.random()*3+1); window.onload = function() { if (randomNumber == 1) { document.getElementById("spaghetti").style.display = "inline"; document.getElementById("zelt").style.display = "none"; document.getElementById("bier").style.display = "none"; } if (randomNumber == 2) { document.getElementById("spaghetti").style.display = "none"; document.getElementById("zelt").style.display = "inline"; document.getElementById("bier").style.display = "none"; } if (randomNumber == 3) { document.getElementById("spaghetti").style.display = "none"; document.getElementById("zelt").style.display = "none"; document.getElementById("bier").style.display = "inline"; } }Puedes simplificar esto
const IDs = ["spaghetti","zelt","bier"]; const randomNumber = Math.floor(Math.random()*IDs.length); document.getElementById(IDs[randomNumber]).style.display = "inline"; document.getElementById(IDs[randomNumber]+"Play").play();y tener css
#spaghetti,#zelt, #bier { display:none;}o mejor darles a todos la misma clase y tener
.audioLoad { display:none;}Tenga en cuenta que eliminé la reproducción automática y agregué una ID que podría activar
const IDs = ["spaghetti", "zelt", "bier"]; window.addEventListener("load", function() { // when page loads const randomNumber = Math.floor(Math.random() * IDs.length); document.getElementById(IDs[randomNumber]).style.display = "inline"; document.getElementById(IDs[randomNumber]+"Play").play(); }) .audioLoad { display: none } img { height: 400px} <html> <head> <title>johannes</title> <script src="random.js"></script> </head> <body> <div id="spaghetti" class="audioLoad">spaghetti <img src="https://www.solo.be/uploadedimages/recepten/afbeeldingen/168335-spaghetti-bolognese.jpg"> <audio id="spaghettiPlay"> <source src="/Users/henrigimm/Documents/Johannes test/spaghetti.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio> </div> <div id="bier" class="audioLoad">bier <img src="https://static.ah.nl/static/gall/img_228761_Gall_500.png"> <audio id="bierPlay"> <source src="/Users/henrigimm/Documents/Johannes test/bier.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio> </div> <div id="zelt" class="audioLoad">zelt <img src="https://images.obi.at/product/DE/1500x1500/566276_3.jpg"> <audio id="zeltPlay"> <source src="/Users/henrigimm/Documents/Johannes test/zelt.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio> </div> </body> </html>