how do I receive input data that will be generated within the repeat structure?

Question

how do I receive input data that will be generated within the repeat structure?

Asked 4 years, 10 months ago

Viewed 200 times

-1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
* ul li{
    display: block;
    margin-top: 10px;
}

</style>
<body>
    <ul>
        <li><label for="input">didite o numero de contas</label></li>
        <li> <input type="number" id="input" placeholder=""></li>
        <li><button onclick="enviar()">Enviar</button></li>
    </ul>

</body>
<script>
    function enviar(){
        let txt = document.getElementById('input')
        let input = Number(txt.value)
        var tela = document.getElementById('visor')
       // document.write('ok')
      c = 1
      while(c <= input){
          //document.write('ok')
         document.write(`<br><label>${c}ª Conta</label><br><input type="number" id="conta${c}"<br>`)

          c++
      }
      document.write(`<br><button onclick="enviarContas()">Enviar</button>`)
    }

    function enviarContas(){

        con = 1 
        while(con <= input){

            //receber dados de input ${c}ªconta
        }    
    }
</script>
</html>

How to receive data?

– Julio Henrique

2019/11/26 at 15:25
I made a repeating structure that the person type the number of bills that have to pay ex: of course, tv, car, house [4] dai if creates 4 input number to receive the values of these [4]accounts and in the end could manipulate the data both add and multiply etc...

– Isaac Da Silva Correa

2019/11/26 at 15:33
this @Isaac :D hope to have helped

– Julio Henrique

2019/11/26 at 15:34

1 answer

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.

by Julio Henrique • **4,352** points · Answer 1 · 2019-11-26T15:34:09+00:00

Well if I understand correctly, you would like to generate these account inputs automatically as your code is already doing, and from this you would like to get to send the data of these inputs.

So I developed this simple solution:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
* ul li{
    display: block;
    margin-top: 10px;
}

</style>
<body>
    <ul>
        <li><label for="input">didite o numero de contas</label></li>
        <li> <input type="number" id="input" placeholder=""></li>
        <li><button onclick="enviar()">Enviar</button></li>        
    </ul>
    
    <div id="valores">
      valores      
    </div>

</body>
<script>
    function enviar(){
        let txt = document.getElementById('input')
        let input = Number(txt.value)
        var tela = document.getElementById('visor')
       // document.write('ok')
      c = 1
      while(c <= input){
          //document.write('ok')
         document.write(`<br><label>${c}ª Conta</label><br><input type="number" id="conta${c}"<br>`)

          c++
      }
      document.write(`<br><button onclick="enviarContas()">Enviar</button>`)
    }
    let aux = 0;
    let soma = 0;
    function enviarContas(){
       const inputs = document.querySelectorAll('[id^="conta"]');  
       inputs.forEach(input => {
        console.log(input.value);
        if(!aux) document.write("<br/>valores: <br />");
        document.write(input.value  && `<p>${input.value}</p>`);
        soma += Number(input.value);
        aux++;
       });
       document.write(`<p>Total: ${soma}</p>`);
    }
</script>
</html>

Inside the foreach you can access all generated inputs and so do what you want with the data

function enviarContas(){
       const inputs = document.querySelectorAll('[id^="conta"]');  
       inputs.forEach(input => {
        console.log(input.value);
       });
    }

Explaining this final code a little better:

document.querySelectorAll('[id^="conta"]')

document.querySelectorAll serves as part of your gift to select more than one element based on the values you have placed within the function, in our case:

('[id^="conta"]')

where id means for him to catch the elements with the id, and ^ means beginning with. And "conta" would be the value that id should start.