试图创建一个函数来创建混合消息答案

【问题标题】：Trying to make a function to create mixed messages试图创建一个函数来创建混合消息
【发布时间】：2022-07-21 19:58:19
【问题描述】：

我正在稳步学习 JavaScript，我正在尝试创建一个小页面，该页面包含一组单词并将它们放在一个句子中。我无法创建一个函数来让我的页面运行并正确显示在我的页。我已经想到我将以某种方式使用 math.floor(Math.random()) 但是我想出的任何东西都不起作用！有人对这个主题有什么想法吗？我已将我的 github 页面链接到这个问题，并将展示我的 html 和 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>

【问题讨论】：

请确保您的代码示例运行正常。目前你有一些导致错误的错误。
您在此处发布的代码没有任何作用。您有一个 if 声明，但它是空的。相关代码放在这里，不在github上。
addEventListener() 不返回任何内容。所以LyricButton 被设置为undefined，而不是begin_lyric 元素。

标签： javascript html css

【解决方案1】：

应该可以：

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. `; }
);

您可以看到如何区分数组和对象、在事件分派后执行代码等等：)

【讨论】：

【解决方案2】：

您遇到了问题，因为您的 array 中有 location。这是因为location 是保留字。

我已将location 更改为place，它工作正常。

我已经拆分了您的第一行代码，只需将事件侦听器添加到其声明下的变量中，因为您稍后使用它来附加 innerHTML。

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

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


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

</html>

【讨论】：

这不是一个真正的保留字。全局变量 window.location 是当前页面的 URL，分配它会导致重定向。
@Barmar 我搜索过，并在 W3Shools 看到它实际上是保留字。他们错了吗？