Javascript: Changing The Name Attribute Dynamically
I have this script I'm working on and there's no errors on it but I want to add some functions on it like when I click the button it adds but I want the name attribute of the input
Solution 1:
You're not doing anything to change the name attributes. Trying to make those changes with html concatenation will get you into trouble. This will get you started:
(function() {
var a = 1;
// get a reference to the containervar container = document.getElementById("m");
// get a reference to the first row of inputvar base = container.children[0];
document.querySelector("button").addEventListener("click", function(e) {
if(++a > 10) return;
// clone the first row of inputvar clone = base.cloneNode(1);
// change the number text by setting the span's textContent
clone.children[0].textContent = a;
// set the names of the input fields
clone.children[1].name = "f" + a;
clone.children[2].name = "l" + a;
clone.children[3].name = "m" + a;
// add the new row to the container
container.appendChild(clone);
console.log(clone);
});
})();
<buttontype="button">+</button><divid="m"><div><span>1</span><inputtype="text"name="f1"><inputtype="text"name="l1"><inputtype="text"name="m1"></div></div>
If you'd rather create the elements from scratch...
(function() {
var a = 1;
// get a reference to the containervar container = document.getElementById("m");
var input;
var span;
var div;
document.querySelector("button").addEventListener("click", function(e) {
if(++a > 10) return;
// create our div
div = document.createElement("div");
// create and append our span
span = document.createElement("span");
span.textContent = a;
div.appendChild(span);
// create and append inputs
["f","l","m"].forEach(function(n){
input = document.createElement("input");
input.name = n + a;
div.appendChild(input);
});
// append our div
container.appendChild(div);
console.log(div);
});
})();
<buttontype="button">+</button><divid="m"><div><span>1</span><inputtype="text"name="f1"><inputtype="text"name="l1"><inputtype="text"name="m1"></div></div>
Post a Comment for "Javascript: Changing The Name Attribute Dynamically"