How to get dynamic values from JS function

Question

I have this function which generates a number of inputs based on the user's choice:

        // Number of inputs to create
        var number = document.getElementById("cantidadArreglos").value;
        // Container <div> where dynamic content will be placed
        var container = document.getElementById("container");
        // Clear previous contents of the container
        while (container.hasChildNodes()) {
            container.removeChild(container.lastChild);
        }
        for (i=0;i<number;i++){
            // Append a node with a random text
            container.appendChild(document.createTextNode("Arreglo #" + (i+1)));
            // Create an <input> element, set its type and name attributes
            var input = document.createElement("input");
            input.type = "number";
            input.name = "arreglo" + i;
            container.appendChild(input);
            // Append a line break 
            container.appendChild(document.createElement("br"));

  }
  }

And it works perfectly. However, I will need to use the values introduced by the user on other functions. How can I call them properly?

Please create a Minimal, Complete and Verifiable example. Your code is throwing errors. — lumio
– lumio, Commented Aug 28, 2017 at 19:48
This code was taken from a post from here and generates the inputs that I want, so I don't understand what you mean about 'throwing errors...'. My question is very simple: how can I call/use these same inputs in another function? Should I create an ID for each input? And then what? — Eduardo Rocha
– Eduardo Rocha, Commented Aug 28, 2017 at 19:55

Matt Spinks · Accepted Answer · 2017-08-28 19:56:24Z

You will need to assign some sort of identifier to each of the input controls you are creating (to reference them later). A very simple way to do this is to assign them each an id:

for (i=0;i<number;i++) {
    // Append a node with a random text
    container.appendChild(document.createTextNode("Arreglo #" + (i+1)));
    // Create an <input> element, set its type and name attributes
    var input = document.createElement("input");
    input.type = "number";
    input.name = "arreglo" + i;
    //assign identifier here
    input.id= "arreglo" + i;
    container.appendChild(input);
    // Append a line break 
    container.appendChild(document.createElement("br"));
}

Then, elsewhere in your code, you can reference the values using the index you just created:

function getValForId(var id) {
    return document.getElementById("arreglo" + id).value;
}

Sergio Diez · Accepted Answer · 2017-08-28 20:02:46Z

1

You can use document.querySelectorAll('input[type="number"]') that will retrieve all the inputs of type number of the page (if you need to exclude some, just add a class and add it to the querySelector)

var inputsNumber = document.querySelectorAll('input[type="number"]');

Now you can iterate over 'inputsNumber' and retrieve the values

Also can filter the querySelector using a wildcard to retrieve the elements which name starts with a word using:

document.querySelectorAll('[name^=arreglo]');

edited Aug 28, 2017 at 20:02

answered Aug 28, 2017 at 19:57

Sergio Diez

4096 silver badges12 bronze badges

1 Comment

Matt Spinks Over a year ago

If you are using getElementByTagName, you need to specify a tag name, not the name attribute.

Collectives™ on Stack Overflow

How to get dynamic values from JS function

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related