There seems to be a glitch in the JavaScript to-do list as it is failing to append new

My attempt at creating a to-do list is not working when I try to add a new entry. Any suggestions? Also, I plan to implement a feature that can calculate the percentage of tasks completed by crossing them off the list.

<html>
<head>
<title>My Site</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="HandheldFriendly" content="true">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="style.css">
    <script>document.getElementById("todoadd").onclick  = function() {

        var node = document.createElement("Li");
        var text = document.getElementById("uzd").value;
        var textnode =document.createTextNode(text);
        node.appendChild(textnode);
        document.getElementById("uzduotys").appendChild(node);
    } 
    </script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
    <form>
        <div id="myDIV" class="header">
            <h2>To-Do List</h2>
            <input type="text" id='uzd' placeholder="Task">
            <input type="button" id='todoadd' value="Add Task">
        </div>
    </form>
    <ul id='uzduotys'>

    </ul>
</div>
</body>
</html>

Answer №1

Make sure to include the script directly below the button in order for your JavaScript to locate the button properly.

Here is an example of how this can be done:

<html>
    <head>
        <title>Site</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="HandheldFriendly" content="true">
        <meta charset="UTF-8">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <link rel="stylesheet" type="text/css" href="style.css">
        <link rel="stylesheet" href="style.css">
    </head>

    <body>
        <div class="container">
            <form>
                <div id="myDIV" class="header">
                    <h2>To-Do</h2>
                    <input type="text" id='uzd' placeholder="Task">
                    <input type="button" id='todoadd' >
                </div>
            </form>
            <ul id='tasks'>

            </ul>
        </div>
        <script>
            document.getElementById("todoadd").onclick = function(){
                var node = document.createElement("Li");
                var text = document.getElementById("uzd").value;
                var textnode =document.createTextNode(text);
                node.appendChild(textnode);
                document.getElementById("tasks").appendChild(node);
            } 
       </script>
    </body>
</html>

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

Positioning a span to be below an input field

Below is the code for a Blazor component that includes a textbox which can be edited with the click of a button. @if (_editing) { <div class="floatingbox position-relative"> ...

How to Dynamically Update Sass Styles with Webpack 2?

Currently, I am in the process of setting up a React application that utilizes Webpack2, webpack-dev-middleware, and HMR for the development phase. One peculiar issue that I have encountered is related to updating .scss files. When I make changes to my .sc ...

What sets apart optionalDependencies from peerDependencies in the Meta optional?

Why are both marking dependency as optional and what is the specific use-case of each? Is peerDependenciesMeta intended for npm packages while optionalDependencies is meant for projects? For example, in my npm package, certain modules require dependency ...

Arrangement: Div beside vertically-aligned hyperlinks

Example code: p { color: red; } span { font-weight: bold; } <p>This is a paragraph.</p> <p>Another paragraph here.</p> <span>Bold text</span> This is the desired outcome: https://example.com/image.png It&ap ...

Is there a way to access the initial element of the array within this variable assignment?

When utilizing the element id 10_food_select: var id = $(sel).attr("id").split("_"); An array is generated as follows: ["10", "food", "select"] The desired outcome is to have id = 10 (or whichever value is in the first element). This can be achieved l ...

Tips for sending AngularJS expressions to a controller

I am looking to pass a value from an AngularJS Expression to the controller. Here is the HTML code : <div data-ng-controller="AlbumCtrl"> <div data-ng-repeat="z in songInfo"> <div data-ng-repeat="b in z.album& ...

Selecting any of the bar chart labels will reveal just a two-day timeframe

My bar chart is behaving strangely - when I click on all labels, it only shows two days instead of updating as expected. I suspect it may be due to a bad implementation involving parsing. Can anyone provide assistance? I have created a minimum example on ...

Can the Android Browser Display Seamless IFRAMES?

Did you know that HTML5 offers support for a seamless IFRAME? This feature allows you to easily include headers and footers in your HTML code. However, when I tested this on the Android (2.2) browser, which is supposed to be HTML5-based, it didn't wor ...

Transform the elements of a tensor in TensorFlow into a standard JavaScript array

Having utilized the outerProduct feature within the TensorFlow.js framework on two 1D arrays (a,b), I am faced with a challenge in obtaining the values of the produced tensor in regular JavaScript format. Despite attempts using .dataSync and Array.from(), ...

How to center two divs side by side horizontally using Bootstrap

How can I make the layout work on screens 575px and below with the class "col-xs-6 col-sm-6 col-md-8"? <div class="container"> <div class="row align-items-center"> <div class=&q ...

Ways to access Windows Explorer by clicking on a link?

Is there a way to access a folder in Windows Explorer directly from an HTML website using a hyperlink? Currently, the following code only opens the folder within the web browser: <a href="file:///folder">Open Folder in Windows Explorer</a> ...

The drop-down menu remains visible even after clicking outside of it

I've written a script that works when clicked, but it doesn't hide when clicked outside of it. $(document).ready(function() { //Translate(); //caling Language Translater function $("#translate_image").attr('href', base_url) ...

Utilize a singular object to contain multiple instances of the useState hook

const [regionData, setRegionData] = useState({ country: "", city: "", population: "", location: "", temp_min: "" }); Does anyone know a more efficient and cleaner way to replace these individual useState hooks by organizing them into ...

Implement a feature in JSP that allows users to dynamically add or remove fields before submitting the data to the database

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http- ...

Issue with Bootstrap modal not closing

I've encountered an issue with a bootstrap modal popup. When I try to close the popup, it doesn't behave as expected. Instead of just hiding the popup and removing the backdrop, it hides the popup but adds another backdrop, making the screen almo ...

Vue components: Using `object[key]` as a prop does not trigger reactivity

I'm attempting to bind a value from an Object into the prop of a Component, but unfortunately it is not reacting as expected. Despite using $this.set, the reactivity issue persists. Below is my template: <div class="grid"> <emoji-card v-fo ...

Conceal a div and label after a delay of 5 seconds with a JavaScript/jQuery function in C#

Here is a sample div: <div class="alert alert-success alert-dismissable" runat="server" visible="false" id="lblmsgid"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> ...

Items in the Vue.Draggable display can be arranged on both the left and right

Recently delving into Vue.js, I am utilizing Vuedraggable for item dragging in my project. Currently, the items in the draggable div are shown as Text 1 Text 2 Text 3 Text 4 Is there a way to rearrange them to display like this? Text 1 Text 2 Text 3 T ...

Obtain the JSON object by provided criteria

In the given JSON data, how can I access an object based on the provided applicationName? { "apps": [ { "applicationName": "myTestApp", "keys": [ { "key": "app-key", ...

Exploring the implementation of method decorators that instantiate objects within Typescript

Currently, I have been working on a lambda project and utilizing the lambda-api package for development. As part of this process, I have implemented decorators named Get and Post to facilitate mapping routes within the lambda api object. These decorators e ...