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

"Maximizing Data Interaction: The Integration of PHP and AngularJS

Can MUI 5 replicate the Emotions 'css' function through analog?

Create a moving background gradient with styled-components

What could be causing the routing to fail in this script?

jQuery event triggers upon completion of execution

The error message "TypeError: Unable to access the 'get' property of an undefined vue js object" appeared

Attempted everything... Clicking away but a div refuses to show up post-click, resulting in an error message

Guide to integrating jssor into an AngularJS application

Show a single jQuery Validation error

Did I incorrectly pass headers in SWR?

Managing browser back button functionality

Embarking on the journey of creating mobile web applications - where should you begin?

Utilizing pure JavaScript to dynamically fetch HTML and JavaScript content via AJAX, unfortunately, results in the JavaScript

What kind of interference occurs between the sibling components when a div with ng-if is present in Angular?

Visual Composer in WordPress is not displaying as expected

Understanding the process of accessing data within the beforeRouteLeave component guard in Vue

Display a snippet of each employee's biography along with a "Read More" button that will expand the content using Bootstrap, allowing users to learn more about each team

Calculate the total width of LI elements and apply it to the parent UL or DIV

What is the method for eliminating the box shadow on a table?

Div element positioned outside of another div element