why do the (ndev) variable not added to the added field class? I am trying to append the ndev var to the addedfield class when the user clicks on the button ... what is the problem here? js code
//1>>> first step is to creat div with the value which the user add
//get the value
const inputvalue=document.querySelector("input").value;
//create element
const div =document.createElement("div");
//adding the value and the button to it
const ndev=div.innerHTML=`${inputvalue}<input type="submit" value="delete" >`;
//2>>> style this div
div.classList.add("styleddiv");
const nst =document.querySelector(".styleddiv")
//add event listener
document.getElementById("button").addEventListener("click",
function() {
document.getElementsByClassName("addedfield").appendChild(ndev);
}
);
HTML code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="styleSheet" href="../cssjsfirst practice.css">
</head>
<body>
<div class="container">
<form action="">
<input type="text" placeholder="type a task" autofocus>
<input type="submit" value="Add Task" id="button">
</form>
<div class="addedfield">
</div>
</div>
<script src="first js practice.js"></script>
</body>
</html>
document.querySelector("input") is not precise anough, you should probably add class of "input" to your first input of type "text".
getElementsByClassName returns an array of HTML elements. You should try to change it to getElementsByClassName[0]
It's good idea to prevent refreshing page after clicking submit by adding onsubmit="return false" to your HTML form element.
This line:
const ndev=div.innerHTML=`${inputvalue}<input type="submit" value="delete" >`;
doesn't actually create HTML element.
const inputvalue=document.querySelector("input").value;
//create element
const div =document.createElement("div");
//adding the value and the button to it
const ndev=div.innerHTML=`${inputvalue}<input type="submit" value="delete" >`;
//2>>> style this div
div.classList.add("styleddiv");
is executed only one time, just after you load the script. It would be better to move this functionality to eventListener function, so you get the user's input after he presses the button, and not on page load.
Please take a look on this version of HTML and JS:
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="styleSheet" href="../cssjsfirst practice.css">
</head>
<body>
<div class="container">
<form action="" onsubmit="return false">
<input class="input" type="text" placeholder="type a task" autofocus>
<input type="submit" value="Add Task" id="button">
</form>
<div class="addedfield">
</div>
</div>
<script src="practice.js"></script>
</body>
</html>
// practice.js
document.getElementById("button").addEventListener("click",
function() {
const inputvalue=document.querySelector(".input").value;
const div =document.createElement("div");
div.innerHTML=`${inputvalue}<input type="submit" value="delete" >`;
div.classList.add("styleddiv");
document.getElementsByClassName("addedfield")[0].appendChild(div);
}
);
as you can see, only after the user clicks button, we assign the value of HTML element of class "input" to inputvalue, and then we create the "div" element, and fill it with innerHtml of your choice.