I've played around with for loops many times in the past, but this is going way over my head when I want to use it with values from IDs in HTML, and moreover put these, separated, into a string.
I have a simple program so far with the help of another question that lets me add and remove input fields in HTML. However, I want to assign each form field's input value to a variable whenever one is added. Playing around, this seems to be difficult, because I can't call upon an ID in HTML in a for loop fashion.
At the end of it all, I wanted to put these into a dynamic string when new fields are added:
"The colors consist of " + colorNum0 + " and " + colorNum1 + ". They are all really cool colors."
But whenever a new variable is added (inputted into an added field), I want it to add another " and " + colorNum#.
The program seems to get confused if I add variables ahead of time that do not exist yet, or ever, if I do not add the form field for them.
Of course, creating a for loop doesn't work when I try something like:
var colorNum[i] = document.getElementById("field" + i).value
Because... that's not allowed. I'm having trouble figuring out how to make this happen. Right now I called out variables for colorNum, but I'm trying to do it dynamically. This is difficult when trying to get a value from an ID and transferring it to a for loop.
HTML:
<ul id="fields">
</ul>
<a onclick="createinput()">Create an input</a>
<p id="commentHere"><p>
JS:
var count = 0;
window.createinput = function(){
var field_area = document.getElementById('fields')
var li = document.createElement("li");
var input = document.createElement("input");
input.id = 'field' +count;
input.name = 'field'+count;
input.type = "text";
li.appendChild(input);
field_area.appendChild(li);
//create the removal link
var removalLink = document.createElement('a');
removalLink.className = "remove";
removalLink.onclick = function(){
field_area.removeChild(li);
count--;
}
removalLink.appendChild(document.createTextNode('Remove Field'));
li.appendChild(removalLink);
count++;
console.log(input.id);
console.log("Count: " + count);
var colorNum0 = document.getElementById("field0").value;
var colorNum1;
var colorNum2;
console.log(colorNum0);
var comment = "The colors consist of " + colorNum0 + " and " + colorNum1 + ". They are all really cool colors.";
document.getElementById("commentHere").innerHTML = comment;
}
You can get values of all inputs, using the following code snippet:
function getInputsData() {
const inputs = document.getElementsByTagName('input');
const data = [];
for (let inp of inputs) {
data.push(inp.value);
}
return data;
}
Considering that you don't have any other input fields. If you have, you can assign each input a class or id, as you did, and get the values:
function getInputsData() {
const data = [];
const inputs = document.getElementsByClassName('field');
for (let inp of inputs) {
data.push(inp.value);
}
return data;
}
For this case, I've added class for each input field:
input.classList.add('field')
Bergi's comment helped me enough for what I had. I will not be checking this today so I thought I should mark it answered for now. What I had was fine, I just had to assign colorNum to an array. As for putting this in my string, I'll have to play around a bit another day - doesn't need to be in a loaded question.
Edit: Unless someone has an idea for the string? I am going to try and figure out how to list each item in the array in the string separated by text without creating dozens of new variables for each input.