include vector input of names and display

Asked

Viewed 57 times

0

I am doing a javascript exercise, it is asked to add the name of an input in a character array. This vector is already presented and as I press to add it grows on the screen the names. I made this code but I was not successful. Can you give me some strength? Thank you already.

<html>
<head>
    <meta charset="UTF-8">
    
</head>
<body>
    <div id="app">
        <input type="text" id="btn" name="nome">
        <button onClick="adicionar()">adicionar</button>
        <ul id="lista">

        </ul>
    
    
    </div>

<script>
    function adicionar(){
        var text = document.querySelector('#btn')
        var conteudo = text.value
        nomes.push(conteudo)
    }

   var lista = document.querySelector('#lista')
   var nomes = ["Diego", "Leonardo", "João"]
    for(var i=0; i< nomes.length;i++)
    {
        var item = document.createElement('li')
        item.appendChild(document.createTextNode(nomes[i]));
        lista.appendChild(item)
    }


</script> 
</body>
javascript

1 answer

2


So friend, it was a little difficult to understand the purpose of the code, by my conception, given an array containing names, one must create an element for each name, and in the add button, add new names in that vector right? In this specific part:

for(var i=0; i< nomes.length;i++)
{
    var item = document.createElement('li')
    item.appendChild(document.createTextNode(nomes[i]));
    lista.appendChild(item)
}

What happens is that when the browser loads the page, it goes through all that code, including this one is only ONCE. So your code it adds the name in the vector, but does not create and add the items, to solve this I put the for in a function.

function atualizaNomes(){
   for(var i=0; i< nomes.length;i++)
   {
       var item = document.createElement('li')
       item.appendChild(document.createTextNode(nomes[i]));
       lista.appendChild(item)
   }
   nomes = [];

Note that I put nomes = [] at the end for it to clear the array for case Voce click again. To call this function I created a simple button with onclick

<button onclick="atualizaNomes()">Atualizar nomes</button>

This problem can also be solved by creating the elements and adding them to the list within the function adicionar()

To handle empty strings you can add this

if(nomes[i] == "" || nomes[i] == " " ){
    continue
}

In this case, if[ i ] names are an empty string or a string with a space it will skip the iteration of the repeat structure (Add that if inside the for) I hope you understand and I have helped, any other doubt just answer right here. Good luck to the champion! :)

  • i managed to make it work with your tips. Thank you very much Ricardo and sorry me the bad drafting.

  • All right, always tries to elaborate the question with maximum information and tries to explain the better purpose, any only to launch on the site dnv :)

Browser other questions tagged javascript

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