Trying to make a function to create mixed messages-CodePudding

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" >Beginning of your song!</button>

  <!--The result-->
  <h3 id="text"></h3>


  <script src="script.js"></script>
</body>

</html>

CodePudding user response：

You had a problem because there was location in your array. It happen because location is a reserved word.

I've changed location to place, and it works fine.

const lyricButton = document.getElementById('begin_lyric');
lyricButton.addEventListener('click',event => {
    if (event.target.className === 'text'){
}
}) ;


let array = [
    place = ["Miami", "New York","California", "Texas", "Kansas"],
    drinks = ["Tequila", "Soda","Milk", "Tea"],
    celebrity =["Michael Jackson", "Obama", "Bennedict Cumberbatch", "elmo"],
    doing = ["nod", "point", "kindly gesture", 'pop my collar']
];

lyricButton.innerHTML = `We down in ${place} 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 ${doing} 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" >Beginning of your song!</button>

    <!--The result-->
    <h3 id="text"></h3>


    <script src="script.js"></script>
</body>

</html>

CodePudding user response：

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)];


const lyricButton = document.getElementById('begin_lyric').addEventListener('click', event => {
    if (event.target.className === 'text') {
        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 :)