How do I write code that adds li or p text when I click the add button?

JavaScript
1

I’m trying to program a simple to do list with just html and javascript. I’ve been looking at a lot of tutorials to look at the code to see the kinds of code behind to do lists but I’m struggling to figure out to write the JavaScript on my own. I mostly re-wrote the code of some tutorials and YouTube videos but I don’t understand enough JS to know how to add text (whether as an li or p element) from scratch.

Here’s the html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>To Do</title>
    <link rel="stylesheet" href="index.css">
  </head>
  <body>
    <header class="center">To Do</header>
  <main>
    
    <input type="text" id="myInput" placeholder="What should I do?">
    <button onclick="newElement()" class="addBtn" id="myButton">+</button>
    

    <ul id="myList"></ul>





  </main>
	<script src="index.js"></script>
  </body>
</html>

here’s the JavaScript

const btn = document.querySelector('button');
const ul = document.querySelector('ul');
btn.addEventListener('click', () => {
	const li = document.createElement("li");
	li.appendChild(document.createTextNode("#myInput"));
	ul.appendChild(li);
})
3

I actually have no idea what I’m doing. I googled for how I can add list items using javascript from a text input value.
I targeted the input with the input id “myInput” into the document.querySelector.
I removed the onclick property in my button tag. I didn’t add a value property to my input.

How can I reference the value property of the element so that it targets the input value in the to do bar? Do I just add a value property with a value (value =“myInputValue”) and reference that in createTextNode?

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>To Do</title>
    <link rel="stylesheet" href="index.css">
  </head>
  <body>
    <header class="center">To Do</header>
  <main>
    
    <input type="text" id="myInput" value="">
    <button class="addBtn" id="myButton">+</button>
    

    <ul id="myList"></ul>

  </main>
	<script src="index.js"></script>
  </body>
</html>

onst btn = document.querySelector('myInput');
const ul = document.querySelector('ul');
btn.addEventListener('click', () => {
	const li = document.createElement("li");
	li.appendChild(document.createTextNode(""));
	ul.appendChild(li);
})
5

what is the value value property?

I added an input variable to target the input. Which part of the code is its value property that I should put into document.createTextNode?

const btn = document.querySelector('button');
const ul = document.querySelector('ul');
const inpt = document.querySelector('input');
btn.addEventListener('click', () => {
	const li = document.createElement("li");
	li.appendChild(document.createTextNode("input"));
	ul.appendChild(li);
})
7

Sorry for the dumb questions. I think I better read some textbooks to get the hang of JavaScript syntax and do some more tutorials.

Here’s my code. I hope I referenced the input value correctly. I put val as the argument inside document.createTextNode.

const btn = document.querySelector('button');
const ul = document.querySelector('ul');
const val = document.queySelector('input').value;
btn.addEventListener('click', () => {
	const li = document.createElement("li");
	li.appendChild(document.createTextNode(val));
	ul.appendChild(li);
})

I really appreciate your help. Thank you for your patience.

9

So the last step now is to just access the value of inpt into document.createTextNode(). I looked up how to refer the value of query selectors. I just have to put the id of the element as an argument. I tried (with and without #) and it still isnt working.

const btn = document.querySelector('button');
const ul = document.querySelector('ul');
const inpt = document.querySelector('input');
btn.addEventListener('click', () => {
	const li = document.createElement("li");
	li.appendChild(document.createTextNode(myInput));
	ul.appendChild(li);
})
11

Am I referencing the value of myInput the wrong way?

const btn = document.querySelector('button');
const ul = document.querySelector('ul');
const inpt = document.querySelector('input');
btn.addEventListener('click', () => {
	const li = document.createElement("li");
	const myInput = document.querySelector('input').value;
	li.appendChild(document.createTextNode(myInput);
	ul.appendChild(li);
})
13

I just did it by using inpt.value as an argument inside createTextNode() and it worked!
Thank you so much Randell : )

14

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.