Append child does not create a new <p> tag when I click my button
Question
I am trying to create a simple to-do list in order to practice deploying it. I have created everything but when I click on the button that is supposed toadd items, it does not add anything. I believe the issues is within the line of JS code that appends the child. DOes anyone see anything wrong?
let addToDoButton = document.getElementById('addToDo');
let toDoContainer = document.getElementById('toDoContainer');
let inputField = document.getElementById('inputField');
addToDoButton.addEventListener('click', function(){
var paragraph = document.createElement('p');
paragraph.classList.add('paragraph-stlying');
paragraph.innerText = inputField.value;
toDoContainer.appendChild(paragraph);
inputField.value = "";
paragraph.addEventListener('click', function() {
paragraph.style.textDecoration = "line-through";
})
paragraph.addEventListener('dblclick', function() {
paragraph.removeChild();
})
})
1 answers
solution1
-1 2022-07-16 23:05:27
I have looked into your code and it works for me
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<link rel="stylesheet" href="test.css">
<title>Test App</title>
</head>
<body>
<button id="addToDo">ADD Button</button>
<div id="toDoContainer"></div>
<input type="text" id="inputField">
<script src="myscripts.js"></script>
</body>
</html>
Script
let addToDoButton = document.getElementById('addToDo');
let toDoContainer = document.getElementById('toDoContainer');
let inputField = document.getElementById('inputField');
addToDoButton.addEventListener('click', function(){
var paragraph = document.createElement('p');
paragraph.classList.add('paragraph-stlying');
paragraph.innerText = inputField.value;
toDoContainer.appendChild(paragraph);
inputField.value = "";
paragraph.addEventListener('click', function() {
paragraph.style.textDecoration = "line-through";
})
paragraph.addEventListener('dblclick', function() {
console.log('activated')
paragraph.removeChild();
})
})
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
My button does nothing when i click on it
My input tag becomes empty when I click on a button
How do I create a <p> tag dynamically and assign it to a var when I click it?
Create and Append new divs on button click with vanilla javascript
Why is .append() creating 2 rows in this code when I click Add New button?
Using JavaScript, how can I replace my div tag text, for every new button I click?
Why does my button's style change when I click on it?
Why does my code shows error when i Click the button
My audio does not play when I click on the play button
Why is my button duplicating when I append it?
Related Tags