Today, I encountered an issue while working on my bot website project that responds to textarea input. When I attempted to test it with two different commands, one of the commands stopped working unexpectedly. I'm puzzled by this and would greatly appreciate any assistance in resolving it. Here is a snippet of my code:
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>