When using querySelectorAll, I am provided with an array that includes only a single

After appending some div elements with the class "todo" to the parent div with the id "no_status", I encountered an issue. When I console.log the parent div, it shows all child elements with the class "todo". However, when I use querySelectorAll to log all divs with the class "todo", it only displays an array with one element that was present in the HTML before appending more "todo" divs. Thank you for your help.

Javascript:

function addTodo(){
   
   if(todoInput.value.trim()){
      
      let closeBtn = document.createElement("span");
      closeBtn.className = "close";
      closeBtn.innerHTML = "×";
      
      let newTodo = document.createElement("div");
      newTodo.className = "todo";
      newTodo.draggable = "true";
      newTodo.append(todoInput.value.trim(), closeBtn);

      noStatusColumn.append(newTodo);
      todoInput.value = "";
      modal.style.top = "-50%";

      console.log(todoElems); 
      console.log(noStatusColumn);    
   }                                   
}

Answer №1

Remember, you are just assigning values to the todoElems variable when the page initially loads. This means it won't update on its own.

To ensure all elements are accounted for, make sure to include

todoElems = document.querySelectorAll(".todo")
within the addTodo function.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to interact with both the child and parent controllers within a directive?

We currently have two directives known as parent and child. Both of these directives come with controllers that house specific functionalities. In the case of the child directive, there are a couple of ways to access controllers: We can access the parent ...

Show the current date and time, and update it whenever the user chooses a different one

I need help with displaying the current date and time within a div, with the seconds refreshing when the page loads and changing when the user selects another date and time from the picker. I'm trying to accomplish this with the following script, but ...

Instructions for adding a new line in a textarea on Internet Explorer when reading from a file

I'm facing a situation where I need to display the contents of a file (let's call it abc.txt) in a textarea on a JSP page. However, when I try to do so, all the contents are displayed in one line without any line breaks or carriage returns. Inte ...

Tips on updating a JSON file exclusively using vanilla JavaScript with an AJAX call using the HTTP POST method?

Question One: I have been struggling to find a way to update a JSON file using the HTTP POST method when both files are stored on the same server (e.g. Godaddy or AWS). While I am able to send data to the server successfully, the JSON file is not being upd ...

Is the absolute positioned element on the left or right based on its current location?

Is there a way to assign absolute positioning with left at 0px or right at 0px depending on whether the positioned div will go outside of its container? For example, when you right click in a browser and see the menu appear to the right of where you click ...

Displaying a series of images sequentially with a pause in between using JavaScript

My goal is to cycle through images every 2 seconds in a specific order. I have implemented two functions, cycle and random. However, the cycle function seems to rotate too quickly and gets stuck without repeating itself in the correct order. On the other ...

Setting up an online presence for an Express app

I recently started using expressjs and I'm facing an issue with getting my express application (created with express generator) to work on my website. I uploaded the directory like this: http://www.example.com/express-app-here When I visit the websi ...

Guide to shuffling an array with a simple click of a button

To simplify, I have an array that I would like to randomize by clicking a button. Once randomized, I want to display the first result from the array with another button. The array is currently randomized when opened in Chrome, and checking the results in t ...

Guide on loading '.obj' files with multiple '.mtl' files using Three.js

I am attempting to load the cube.obj file which references multiple cube_*.mtl files, each of which utilize texture images in the format *.png. The resources can be found here. My goal is to dynamically load objects with the same geometry but different mat ...

Is it possible to reset the text within the text box when the form is being submitted using the load() ajax function?

I am working on implementing a comment feature where the data entered in the form is appended and displayed after submission. Here is my HTML form: <table> <tr><td>Name :</td><td> <input type="text" id="name"/></td&g ...

Yeoman - Storing global settings efficiently

I have recently developed a Yeoman generator and am now looking to incorporate prompts for certain global configurations. My goal is to have the generator prompt users for their GitHub username and token during the initial run, and then somehow store this ...

Tips for minimizing the need to copy the entire dojo library each time you create a new Java EE package for deployment on GlassFish

Currently, I am diving into comet programming and utilizing the cometd implementation along with the JavaScript dojo library before deploying my war files to GlassFish. The issue I have encountered is that every time I create a new project, I find myself i ...

Guide on handling asynchronous data return within a reducer

I'm struggling to properly handle the state when receiving data from the back-end of my application. This is the code I have: if (action.type === actionTypes.getList) { const id = action.payload.userId; Axios.post(`${apiUrl}/lists`, { ...

The recently added item in nestedSortable remains stationary and does not shift positions

const menu = $("ol.menu").nestedSortable({ handle: '.move', items: 'li', placeholder: 'placeholder', opacity: 0.7, toleranceElement: '> i', c ...

Having trouble setting a value for a textbox in angularjs

Greetings! I am currently working on a web application using AngularJS. My task involves binding data from various API's to a textbox in my project. Below is the snippet of the HTML code where I attempt to achieve this: <input class="with-icon" ty ...

I can't believe this ReactJs project generated this code automatically

What does this automatically generated code do in my ReactJs app and what are the advantages of including it? <div class="nsc-panel nsc-panel-compact nsc-hide"> <div class="nsc-panel-move"></div> <div class=" ...

What is the best way to navigate to a specific ID on the homepage using a navigation button on another page?

When a navigation button is clicked on any page other than the home page, I want the home page to load first and then scroll to the corresponding id mentioned in the navlink. Below is the code snippet: <Col sm={5}> <Nav className=& ...

What could be the reason for the GET request not functioning properly in Node.js?

const express = require('express'); const mongoose = require ("mongoose"); const app = express(); const Student = require('../models/students'); require('dotenv').config(); const PORT = process.env.PORT || 3000; const co ...

Is it a scope issue if ng-click is not firing and the function is not working properly?

I'm facing an issue with an animation that is not working as intended. The goal is to have the search button trigger an animation to pull a search bar from the right side, allowing users to input their search query. However, the ng-click function does ...

Create a TypeScript function that can be called and has an extended prototype definition

I am seeking to create a callable function foo() (without using the new operator) that will also include a property foo.bar(). The JavaScript implementation would be as follows: function foo() { // ... } foo.prototype.bar = function bar() { // .. ...