I am steadily learning JavaScript and I am trying to create a small page that takes in an array of words and places them in a sentence.I am having trouble making a function to get my page to run and properly show up on my page. I have already figured I am going to use math.floor(Math.random()) in a way but anything I come up with does not work! would anyone have any ideas on this subect? I have linked my github page to this question and will be presenting my html and 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>That should work :
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. `; }
);
You can so see how to distinguish arrays and objects, execute code after an event dispatched, and more :)
1)there you are setting DOM element reference in the wrong way as action listner does not return anything and lyricButton is undefined 2)you should use an object as key-value pair instead of saving multiples arrays in single variable. Arrays does not behave as you are using them right now. following Should works for you.
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. `