Question 44153 in Html Question posted in
Some basic documentation can be found here.

(JS DOM) creating new elements in divs – Html

So, I was trying to make a web app which acts like bot which uses a the textarea element as input. While referring to the JS DOM docs provided by W3Schools, I saw that my code was not working. I’m also new to JS DOM, so please forgive me if i’m the stupidest person you’ve ever met. (which i probably am)

Code:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>replit</title>
  <link href="https://bot.valueyu.repl.co/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>

<script>
  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-margin-bottom", "w3-margin-right", "w3-margin-left")
      const title = document.createElement("h1")
      title.createTextNode("Help");
      const desc = document.createElement("h3")
      desc.createTextNode("All of my commands!");
      const field1 = document.createElement("h6")
      field1.createTextNode("e");
      embed.appendChild(title);
      embed.appendChild(desc);
      embed.appendChild(field1);
      rplyBox.appendChild(embed);
    }
  }
</script>

<body style="background-image: url('https://bot.valueyu.repl.co/bg.mp4'); background-repeat: no-repeat; 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>
    <hr>
    <textarea class="w3-round-large w3-bar" id="msgBox"></textarea>
    <br>
    <br>
    <br>
    <button id="submit" onClick="reply()" class="w3-round-xxlarge w3-button">Send</button>
    <hr>
    <div class="w3-bar w3-white w3-round-large" id="rplyBox">

    </div>
  </div>
</body>

</html>

Any help would be much appreciated.

Tags:

2

Answers


  1. 0

    I guess the only entity who can create nodes in Javascript is the DOM document object (you can see here), so by correcting that in your code, it will work.

    Login or Signup to reply.
  2. 0

    In Your code, a new text node was created using the createTextNode method, but it was not added to the desc element, which means it wouldn’t be visible on the webpage.

    Note: the document has the createTextNode property and not the element that was just created

    In the corrected code below, the createTextNode method is still used to create a text node, but it is then added to the desc element using the appendChild method. This makes the text visible on the webpage as a child of the desc element.

    so the updated Js code will be:

      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-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.appendChild(document.createTextNode("e"));

      embed.appendChild(title);
      embed.appendChild(desc);
      embed.appendChild(field1);
      rplyBox.appendChild(embed);
    }
  }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search