Estoy aprendiendo constantemente JavaScript y estoy tratando de crear una pequeña página que incluya una variedad de palabras y las coloque en una oración. Tengo problemas para crear una función para que mi página se ejecute y se muestre correctamente en mi página. Ya pensé que voy a usar math.floor (Math.random()) de alguna manera, ¡pero todo lo que se me ocurre no funciona! ¿alguien tiene alguna idea sobre este tema? He vinculado mi página de github a esta pregunta y presentaré mi html y Javascript. https://github.com/calvinalee2006/MixedMessages
const lyricButton = document.getElementById('begin_lyric').addEventListener('click', event => { if (event.target.className === 'text') { } }); let array = [ location = ["Miami", "New York", "California", "Texas", "Kansas"], drinks = ["Tequila", "Soda", "Milk", "Tea"], celebrity = ["Michael Jackson", "Obama", "Bennedict Cumberbatch", "elmo"], action = ["nod", "point", "kindly gesture", 'pop my collar'] ]; lyricButton.innerHTML = `We down in ${location} going hard tonight, gonna throw down ${drinks} like its going out of style, Walk in the club fly like ${celebrity}. When the DJ sees me ${action} he clears the floor, for famous dance action that I am known for. `; !DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Good Fortune!!</title> <link rel="stylesheet" type="text/css" href="styles.css" /> </head> <body> <h1>Create your first club hit!</h1> <p>Instructions:</p> <ol> <li>Select the club beat you want.</li> <li>The dance club generator will create the beginning of your song </li> <li>You can add the rest of the lyrics and create your own cub hit!!</li> </ol> <!--Button that needs to be pressed to get the result--> <button id="begin_lyric" class="begin_lyrics">Beginning of your song!</button> <!--The result--> <h3 id="text"></h3> <script src="script.js"></script> </body> </html>Eso debería funcionar :
const object = { location: ["Miami", "New York", "California", "Texas", "Kansas"], drinks: ["Tequila", "Soda", "Milk", "Tea"], celebrity: ["Michael Jackson", "Obama", "Bennedict Cumberbatch", "elmo"], action: ["nod", "point", "kindly gesture", 'pop my collar'] }; const getRandom = (array) => array[Math.floor(Math.random()*array.length)]; document.getElementById('begin_lyric').addEventListener('click', event => { document.getElementById('text').innerHTML = `We down in ${getRandom(object.location)} going hard tonight, gonna throw down ${getRandom(object.drinks)} like its going out of style, Walk in the club fly like ${getRandom(object.celebrity)}. When the DJ sees me ${getRandom(object.action)} he clears the floor, for famous dance action that I am known for. `; } );Puede ver cómo distinguir matrices y objetos, ejecutar código después de enviar un evento y más :)
1) está configurando la referencia del elemento DOM de forma incorrecta, ya que el listner de acción no devuelve nada y lyricButton no está definido 2) debe usar un objeto como par clave-valor en lugar de guardar matrices múltiples en una sola variable. Las matrices no se comportan como las está usando en este momento. siguiente Debería funcionar para usted.
const lyricButton = document.getElementById("begin_lyric") lyricButton.addEventListener("click", (event) => { if (event.target.className === "text") { } }) let object = { location: ["Miami", "New York", "California", "Texas", "Kansas"], drinks: ["Tequila", "Soda", "Milk", "Tea"], celebrity: ["Michael Jackson", "Obama", "Bennedict Cumberbatch", "elmo"], action: ["nod", "point", "kindly gesture", "pop my collar"] } lyricButton.innerHTML = `We down in ${object.location} going hard tonight, gonna throw down ${object.drinks} like its going out of style, Walk in the club fly like ${object.celebrity}. When the DJ sees me ${object.action} he clears the floor, for famous dance action that I am known for. `