(NODE.JS 和 HTML)在文本区域输入上创建 2 个结果

问题描述 投票:0回答:0

所以,我再次在我的机器人网站上工作,它回复并依赖于 textarea 输入,但是当我尝试用两个命令测试它时,我的代码停止为一个命令工作。我不明白发生了什么,所以任何帮助都会受到最开放的双手的欢迎。 我的代码:

function reply() {
  const rplyBox = document.getElementById('rplyBox')
  const input = document.getElementById('msgBox').value;
  if (input === "help") {
    const embed = document.createElement("div");
    embed.classList.add("w3-round-xxlarge", "w3-margin-top", "w3-animate-opacity", "w3-margin-bottom", "w3-margin-right", "w3-margin-left")
    const title = document.createElement("h1")
    title.appendChild(document.createTextNode("Help"));
    const desc = document.createElement("h3")
    desc.appendChild(document.createTextNode("All of my commands!"));
    const field1 = document.createElement("h6")
    field1.classList.add("w3-border", "w3-topbar", "w3-bottombar", "w3-leftbar", "w3-rightbar", "w3-round-xlarge", "w3-border-black")
    field1.appendChild(document.createTextNode("kill"));
    const br = document.createElement('br');
    field1.appendChild(br);
    field1.appendChild(document.createTextNode('{name of the person to kill (figuratively)}'));
    embed.appendChild(title);
    embed.appendChild(desc);
    embed.appendChild(field1);
    rplyBox.appendChild(embed);
  } else if (input === "kill") {
    const cmdInput = input.value.split("\n");
    const person = cmdInput[1];
    const embed = document.createElement("div");
    embed.classList.add("w3-round-xxlarge", "w3-margin-top", "w3-animate-opacity", "w3-margin-bottom", "w3-margin-right", "w3-margin-left")
    const title = document.createElement("h1")
    title.appendChild(document.createTextNode("You killed " + person + "!"));
    const desc = document.createElement("h3")
    desc.appendChild(document.createTextNode("Well, they must've deserved it."));
    embed.appendChild(title);
    embed.appendChild(desc);
    rplyBox.appendChild(embed);
  }
}
html {
  height: 100%;
  width: 100%;
}

.main {
  margin-left: 5%;
  margin-right: 5%;
}

* {
  font-family: monospace;
}

t {
  font-size: 8vw;
}


body {
  animation: blueGrad;
  animation-iteration-count: infinite;
  animation-duration: 6s;
}

.sticky {
  position: -webkit-sticky;
  position: sticky;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>replit</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  <script src="script.js"></script>
</head>
  
<body style="background-image: url('https://bot.valueyu.repl.co/bg.mp4'); background-size: cover;">
  <div class="main">
    <t>bot.valueyu</t>
    <p>bot.valueyu is a bot made by Aarav Saini/Valueyu. For commmands type "<span
        class="w3-text-white">help</span>".</p>
    <br>
    <p>Each command disappears after 5 seconds. Some commands which need time might last longer, In which case, the time will be defined in the bottom-left corner.</p>
    <hr>
    <textarea class="w3-round-large w3-bar w3-margin-top sticky" id="msgBox"></textarea>
    <br>
    <br>
    <br>
    <button id="submit" onClick="reply()" class="w3-round-xxlarge w3-button sticky">Send</button>
    <hr>
    <div class="w3-bar w3-white w3-round-large" id="rplyBox">
        
    </div>
  </div>
</body>

</html>
再次感谢您的帮助。喜欢很多。

javascript html node.js textarea
© www.soinside.com 2019 - 2024. All rights reserved.