An input
doesn’t have innerHTML
– it has value
. Change:
label.innerHTML = addedField.innerHTML;
to
label.innerHTML = addedField.value;
An input
doesn’t have innerHTML
– it has value
. Change:
label.innerHTML = addedField.innerHTML;
to
label.innerHTML = addedField.value;
I’m trying to add to my form a new input field and label.
But when I use getElementByID
and innerHtml
functions but I get an empty string back in the new label.
Here is the form code:
<form action="/" method="POST">
<div id="container"></div>
<input type="text" name="newItem" id="newF" placeholder="New Item" class="inp" autocomplete="off">
<button type="button" onclick="addField()">+</button>
<button type="submit" class="btn btn-success">Send</button>
Here is the JS code:
function addField(){
// Container <div> where dynamic content will be placed
let container = document.getElementById("container");
let addedField = document.getElementById("newF");
let label = document.createElement("label");
console.log(addedField.innerHTML);
label.innerHTML = addedField.innerHTML;
// Create an <input> element, set its type and name attributes
let input = document.createElement("input");
input.type = "text";
input.name = "member";
input.className = "inp";
container.appendChild(label);
container.appendChild(document.createElement("br"));
container.appendChild(input);
}