生成一个随机数 onclick（有效）并使用它在我为我的妻子制作的可爱网络应用程序中显示随机消息（无效），JS 新手

Question

我一直在为我妻子开发这个网络应用程序，它非常简单，基本上当她点击一个按钮时，会弹出一个随机的“你真棒”风格的消息。

我的第一个实现是一个简单的按钮，按下时会显示一条消息和图片，效果非常好。（下面的代码）

 
document.getElementById("paulaBtn").addEventListener("click", displayMsg);

const unicorn = document.createElement("img");
unicorn.setAttribute("src", "unicorn.jpg");

function displayMsg() {
    document.getElementById("displayMsg").innerHTML = "the most beautiful unicorn in the world!",
    document.getElementById("displayMsg").appendChild(unicorn);
}

然后我尝试通过在她单击按钮时生成一个随机数 (rdmInt) 并使用 if else 循环根据数字检查 rdmInt 并根据数字显示一条消息来使其变得更复杂。

我是 JS 的新手，我花了几个小时阅读和学习，但我还没有设法让它工作，我猜我错过了一些愚蠢的东西。

随机数是在单击时正确生成的（我可以在 console.log 上看到它）所以问题与检查它与我猜想的其他数字有关。在此先感谢您的帮助和提示。

JAVASCRIPT

function rndInt() {
    let rndInt = Math.floor(Math.random() * 2);
    console.log(rndInt)
};
let x = rndInt;

const unicorn = document.createElement("img");
unicorn.setAttribute("src", "unicorn.jpg");

const art = document.createElement("img");
art.setAttribute("src", "artist.gif");    


if (x === 0) {
    function displayMsg() {
        document.getElementById("displayMsg").innerHTML = "the most beautiful unicorn in the world!",
        document.getElementById("displayMsg").appendChild(unicorn);
    }console.log(rndInt)
} else if (x === 1) {
    function displayArt() {
        document.getElementById("displayArt").innerHTML = "an awesome artist",
        document.getElementById("displayArt").appendChild(art);
    }
}

CSS

*{
    margin: 0px;
    padding: 0px;
    font-family: sans-serif;
}

body{
    display: grid;
    grid-template-rows: 14vh 10vh 60vh auto auto;
    height: 100vh;
    background-image: url('back.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;  
    background-size: cover;
    font-family: sans-serif;
}

.back{
    background-image: url("back.jpg");
    height: max-content;
}

h1 {
    display: grid;
    text-align: center;
    font-size: 7vh;
    color: pink;
    font-family: sans-serif;
    padding: 4vh;
    padding-bottom: 0;
}

#reset {
    display: grid;
    place-items: center;
    text-align: center;
    position: absolute;
    bottom: 2em;
    margin: 0;
    background-color: pink;
    padding: 0.3rem;
    border: none;
    display: grid;
    place-items: center;
}

img{
    width: 95%;
    height: auto;
    margin: 0 auto;
}

#displayMsg{
    display: grid;
    place-items: center;
    text-align: center;
    font-size: 20px;
}

#displayArt{
    display: grid;
    place-items: center;
    text-align: center;
    font-size: 20px;
}

  a,
  button {
    font-family: sans-serif;
    font-size: 20px;
  }
  
.paulaBtn{
    display: grid;
    place-items: center;
    position: relative;
    margin: 0;
    width: 100vw;
    text-align: center;
  }
  
  .paulaBtn li:hover {
    background-color: rgb(197, 173, 181);
  }
  
  .paulaBtn a {
    color: black;
    text-decoration: none;
  }

#paulaBtn{
    display: grid;
    place-items: center;
    background-color: pink;
    padding: 0.5rem;
    border: none;
}
.button{
    display: grid;
    width: 100vw;
    height: 3rem;
}
.button {
    display: grid;
    place-items: center;
  }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css"></link>
    <title>Document</title>
</head>
<body>
    <h1>Hello Paula</h1>


    <div onclick="rndInt()" class="paulaBtn">
        <button id="paulaBtn">Paula is</button>
        </div>
        
    <p id="displayMsg"></p>
    <p id="displayArt"></p>

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

Answer 1

有一组你想要的消息：

const messages = [
“...”,
“...”,
“...”
]

const randIndex = Math.floor(Math.random() * messages.length) // Get random index 

console.log(messages[randIndex]) // Get random message from messages array

Answer 2

我所做的更改仅在JS代码中。

为了让您的代码正常工作，您必须在按下按钮时调用的函数中输入所有内容

function rndInt() {
    let rndInt = Math.floor(Math.random() * 2);
    console.log(rndInt)

    let x = rndInt;

    const unicorn = document.createElement("img");
    unicorn.setAttribute("src", "unicorn.jpg");

    const art = document.createElement("img");
    art.setAttribute("src", "artist.gif");

    var msgEl = document.getElementById("displayMsg");
    msgEl.innerHTML = "";

    var artEl = document.getElementById("displayArt")
    artEl.innerHTML = "";

    if (x === 0) {
        msgEl.innerHTML = "the most beautiful unicorn in the world!";
        msgEl.appendChild(unicorn);
    } else if (x === 1) {
        artEl.innerHTML = "an awesome artist";
        artEl.appendChild(art);
    }
};

* {
    margin: 0px;
    padding: 0px;
    font-family: sans-serif;
}

body {
    display: grid;
    grid-template-rows: 14vh 10vh 60vh auto auto;
    height: 100vh;
    background-image: url('back.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    font-family: sans-serif;
}

.back {
    background-image: url("back.jpg");
    height: max-content;
}

h1 {
    display: grid;
    text-align: center;
    font-size: 7vh;
    color: pink;
    font-family: sans-serif;
    padding: 4vh;
    padding-bottom: 0;
}

#reset {
    display: grid;
    place-items: center;
    text-align: center;
    position: absolute;
    bottom: 2em;
    margin: 0;
    background-color: pink;
    padding: 0.3rem;
    border: none;
    display: grid;
    place-items: center;
}

img {
    width: 95%;
    height: auto;
    margin: 0 auto;
}

#displayMsg {
    display: grid;
    place-items: center;
    text-align: center;
    font-size: 20px;
}

#displayArt {
    display: grid;
    place-items: center;
    text-align: center;
    font-size: 20px;
}

a,
button {
    font-family: sans-serif;
    font-size: 20px;
}

.paulaBtn {
    display: grid;
    place-items: center;
    position: relative;
    margin: 0;
    width: 100vw;
    text-align: center;
}

.paulaBtn li:hover {
    background-color: rgb(197, 173, 181);
}

.paulaBtn a {
    color: black;
    text-decoration: none;
}

#paulaBtn {
    display: grid;
    place-items: center;
    background-color: pink;
    padding: 0.5rem;
    border: none;
}

.button {
    display: grid;
    width: 100vw;
    height: 3rem;
}

.button {
    display: grid;
    place-items: center;
}

<h1>Hello Paula</h1>


<div onclick="rndInt()" class="paulaBtn">
    <button id="paulaBtn">Paula is</button>
</div>

<p id="displayMsg"></p>
<p id="displayArt"></p>

生成一个随机数 onclick（有效）并使用它在我为我的妻子制作的可爱网络应用程序中显示随机消息（无效），JS 新手

Generate a random number onclick (working) and use that to display a random message (not working) in a cute webapp I'm making for my wife, new to JS

javascript

random

onclick