Why Isn't the Element Replicating?

Question

Why Isn't the Element Replicating?

I've been working on a simple comment script that allows users to input their name and message, click submit, and have their comment displayed on the page like YouTube. My plan was to use a prebuilt HTML div and clone it for each new comment, adjusting the text accordingly. However, I'm running into an issue where no element is cloned into the container when I press submit. This has become a major roadblock in my project.

UPDATE: After making some adjustments to the code, I now encountering a new error message (

Cannot read property 'appendChild' of null

)

window.onload = () => {
  const template = document.comment;
  const form = document.forms.comment;
  const container = document.querySelector('.container')
  form.submit2.addEventListener('click', () => {
    const name = form.name;
    const text = form.text;
    const newNode = template.cloneNode(true);
    newNode.classList.remove('hidden')
    container.appendChild(newNode)
  })
}

.hidden {
  display: none;
}

.comment-form input {
  display: block;
  padding: 2px;
}

<!DOCTYPE html>
  <html>
    <head>
      <link rel = "stylesheet" href = 'style.css'>
    </head>
    <body>
      <form name = "comment" class = "comm">
        <input type = "text" maxlength = 20 name = 'name' placeholder = 'name'>
        <textarea name = "text" placeholder = 'comment'></textarea>
        <input type = "button" value = "submit" name = "submit2">
      </form>
      <div name = "comment" class = 'hidden'>
        <h1>Demo</h1>
        <p>Paragraph</p>
      </div>
      <div class = "container"></div>
      <script src = "script.js"></script>
    </body>
  </html>

javascript html css

Answer 1

Answer №1

window.addEventListener('load', e => {
  const template = document.querySelector('.comment-template');
  const form = document.querySelector('.comment-form');
  const container = document.querySelector('.container');

  form.querySelector('.submit-button').addEventListener('click', e => {
    const newNode = template.cloneNode(true);

    newNode.querySelector('.name').innerText =
        form.querySelector('.name').value;
    newNode.querySelector('.comment').innerText =
        form.querySelector('.comment').value;

    newNode.classList.remove('hidden');
    container.appendChild(newNode);
  });
});

.hidden {
  display: none;
}

.comment-form input {
  display: block;
  padding: 2px;
}

<form class="comment-form">
  <input type="text" maxlength="20" placeholder="name" class="name">
  <textarea name="text" placeholder="comment" class="comment"></textarea>
  <input type="button" value="submit" class="submit-button">
</form>

<div class="comment-template hidden">
  <h1 class="name"></h1>
  <p class="comment"></p>
</div>

<div class="container"></div>

Modifications were made to the script, utilizing querySelector instead of direct name access. The issue with the container being retrieved as an array-like object was resolved by selecting only one element. Additionally, logic was added to insert the name and comment text into the cloned node.

Answer 2

window.addEventListener('load', e => {
  const template = document.querySelector('.comment-template');
  const form = document.querySelector('.comment-form');
  const container = document.querySelector('.container');

  form.querySelector('.submit-button').addEventListener('click', e => {
    const newNode = template.cloneNode(true);

    newNode.querySelector('.name').innerText =
        form.querySelector('.name').value;
    newNode.querySelector('.comment').innerText =
        form.querySelector('.comment').value;

    newNode.classList.remove('hidden');
    container.appendChild(newNode);
  });
});

.hidden {
  display: none;
}

.comment-form input {
  display: block;
  padding: 2px;
}

<form class="comment-form">
  <input type="text" maxlength="20" placeholder="name" class="name">
  <textarea name="text" placeholder="comment" class="comment"></textarea>
  <input type="button" value="submit" class="submit-button">
</form>

<div class="comment-template hidden">
  <h1 class="name"></h1>
  <p class="comment"></p>
</div>

<div class="container"></div>

Modifications were made to the script, utilizing querySelector instead of direct name access. The issue with the container being retrieved as an array-like object was resolved by selecting only one element. Additionally, logic was added to insert the name and comment text into the cloned node.

Answer 3

Answer №2

window.onload = () => {
  let template = document.answer;
  // There are two elements with the same name 'comment'. It is currently referring to the form instead of the intended div.
  console.log("Current template", template);
  
  // To correct this, select the element by its class name instead
  template = document.getElementsByClassName('hidden')[0];
  console.log("Adjusted template", template);
  
  const form = document.forms.comment;
  console.log("Form element", form);
  
  // getElementsByClassName returns an array-like object even if there's only one matched element. Specify [0] to target a single element.
  const container = document.getElementsByClassName('container')[0];
  console.log("Container element", container);
  
  // With the change in naming from submit to submit2 for the button, attach the click event accordingly
  console.log("Submit button", form.submit2);
  
  form.submit2.addEventListener('click', () => {
    let name = form.submit2.name;
    console.log("Name", name);
    
    // The 'name' element is not a child of the submit button but a separate sibling element. Retrieve its value using the correct reference.
    name = form.name.value;
    console.log("Corrected name", name);
    
    let text = form.submit2.text;
    console.log("Text content", text);
    
    // Similar issue exists with the text input field
    text = form.text.value;
    console.log("Updated text content", text);
    
    const newNode = template.cloneNode(true);
    console.log("New cloned node", newNode.outerHTML);
    
    // Currently, the cloned node does not contain the name or text content. These need to be added before appending it to the DOM.
    newNode.getElementsByTagName('h1')[0].innerText = name;
    newNode.getElementsByTagName('p')[0].innerText = text;
    
    console.log("Final modified node", newNode.outerHTML);
    
    newNode.classList.remove('hidden');
    container.appendChild(newNode);
  })
}

.hidden {
  display: none;
}

.comm input{
  display: block;
  padding:2px;
}

<!DOCTYPE html>
  <html>
    <head>
      <link rel = "stylesheet" href = 'style.css'>
    </head>
    <body>
      <form name = "comment" class = "comm">
        <input type = "text" maxlength = 20 name = 'name' placeholder = 'name'>
        <textarea name = "text" placeholder = 'comment'></textarea>
        <input type = "button" value = "submit" name = "submit2">
      </form>
      <div name = "comment" class = 'hidden'>
        <h1>Demo</h1>
        <p>Paragraph</p>
      </div>
      <div class = "container"></div>
      <script src = "script.js"></script>
    </body>
  </html>

Presenting an alternative solution that walks through the original code, highlighting the issues and demonstrating their solutions while staying true to the initial approach.

Answer 4

window.onload = () => {
  let template = document.answer;
  // There are two elements with the same name 'comment'. It is currently referring to the form instead of the intended div.
  console.log("Current template", template);
  
  // To correct this, select the element by its class name instead
  template = document.getElementsByClassName('hidden')[0];
  console.log("Adjusted template", template);
  
  const form = document.forms.comment;
  console.log("Form element", form);
  
  // getElementsByClassName returns an array-like object even if there's only one matched element. Specify [0] to target a single element.
  const container = document.getElementsByClassName('container')[0];
  console.log("Container element", container);
  
  // With the change in naming from submit to submit2 for the button, attach the click event accordingly
  console.log("Submit button", form.submit2);
  
  form.submit2.addEventListener('click', () => {
    let name = form.submit2.name;
    console.log("Name", name);
    
    // The 'name' element is not a child of the submit button but a separate sibling element. Retrieve its value using the correct reference.
    name = form.name.value;
    console.log("Corrected name", name);
    
    let text = form.submit2.text;
    console.log("Text content", text);
    
    // Similar issue exists with the text input field
    text = form.text.value;
    console.log("Updated text content", text);
    
    const newNode = template.cloneNode(true);
    console.log("New cloned node", newNode.outerHTML);
    
    // Currently, the cloned node does not contain the name or text content. These need to be added before appending it to the DOM.
    newNode.getElementsByTagName('h1')[0].innerText = name;
    newNode.getElementsByTagName('p')[0].innerText = text;
    
    console.log("Final modified node", newNode.outerHTML);
    
    newNode.classList.remove('hidden');
    container.appendChild(newNode);
  })
}

.hidden {
  display: none;
}

.comm input{
  display: block;
  padding:2px;
}

<!DOCTYPE html>
  <html>
    <head>
      <link rel = "stylesheet" href = 'style.css'>
    </head>
    <body>
      <form name = "comment" class = "comm">
        <input type = "text" maxlength = 20 name = 'name' placeholder = 'name'>
        <textarea name = "text" placeholder = 'comment'></textarea>
        <input type = "button" value = "submit" name = "submit2">
      </form>
      <div name = "comment" class = 'hidden'>
        <h1>Demo</h1>
        <p>Paragraph</p>
      </div>
      <div class = "container"></div>
      <script src = "script.js"></script>
    </body>
  </html>

Presenting an alternative solution that walks through the original code, highlighting the issues and demonstrating their solutions while staying true to the initial approach.

Answer 5

Answer №3

The issue arose from my HTML elements containing unnecessary whitespace. It is important to avoid adding spaces around the = sign within HTML markup. No errors were found in the script implementation.

Answer 6

The issue arose from my HTML elements containing unnecessary whitespace. It is important to avoid adding spaces around the = sign within HTML markup. No errors were found in the script implementation.

Why Isn't the Element Replicating?

Answer №1

Answer №2

Answer №3

Similar questions

What is the best way to use scrollIntoView() to display an additional item at the top or bottom of the visible area

I am experiencing difficulty with the button not responding when clicked, despite trying to implement JavaScript and the Actions syntax

Breaking Down the Process of Exporting a Next.js Static Website into Manageable Parts

Styling text of various sizes to appear together in a div container

The array functions properly when handwritten, but fails to work when loaded from a text file

The MUI snackbar element lingers in the DOM even after it has been closed

Determine the width of a dynamically generated div element in JavaScript using the createElement method

Tips for choosing multiple values from a dropdown menu in Bootstrap CSS version 3

Next.js: Dealing with special characters in YouTube video API snippet titles

What sets apart the "+" and "~" selectors in CSS?

Get the PDF file and access it with Ajax technology

Utilizing Angular's globally accessible variables

Resolving issues with JavaScript caused by Polymer updates

Discover the final index of an array with Angular's ng-repeat functionality

Preserve the iframe src value in the dropdown menu even after the page is refreshed

The variable 'X' in Node.js is not been declared

CSS in flexbox nested with no overflow utilized

The initial number is inserted within the text box upon entering the final number

Tips for creating an array within an AngularJS Service and effectively sharing it across two controllers

Choosing bookmarkable views in Angular 5 without using routes