Javascript returning input Undefined

Asked

Viewed 221 times

0

I’m having trouble trying to add a new item to a list, by printing the input text in a list it returns "Undefined" instead of returning the text that was to be added to the list

<html>
    <meta charset="utf-8">
    <head>
        <title>Gerenciador de Tarefas</title>
    </head>
    <body>
        <div id="app">      
            <ul>               
            </ul> 
            <input type="text" placeholder="Digite uma tarefa">  
            <button>Adicionar</button>   
        </div>

        <script src="tarefas.js"> </script>          

    </body>
</html>
var listElement = document.querySelector('#app ul');
var inputElement = document.querySelector('#app input');
var buttonElement = document.querySelector('#app button');

var tarefas = [
    'Fazer Café',
    'Estudar Javascript',
    'Ler'
];

function renderTarefas() {
    listElement.innerHTML = '';

    for (tarefa of tarefas) {
        var tarefaElement = document.createElement('li');
        var tarefaText = document.createTextNode(tarefa);

        tarefaElement.appendChild(tarefaText);
        listElement.appendChild(tarefaElement);
    }
}

renderTarefas();

function addTarefa() {
    var tarefaText = inputElement.Value;

    tarefas.push(tarefaText);
    inputElement.Value = '';
    renderTarefas();
}

buttonElement.onclick = addTarefa;

1 answer

2

Bruno,

The estate value of the element is being accessed with capital V, but in fact, it is all in lowercase... Just that =)

var listElement = document.querySelector('#app ul');
var inputElement = document.querySelector('#app input');
var buttonElement = document.querySelector('#app button');

var tarefas = [
  'Fazer Café',
  'Estudar Javascript',
  'Ler'
];

function renderTarefas() {
  listElement.innerHTML = '';

  for (tarefa of tarefas) {
    var tarefaElement = document.createElement('li');
    var tarefaText = document.createTextNode(tarefa);

    tarefaElement.appendChild(tarefaText);
    listElement.appendChild(tarefaElement);
  }
}

renderTarefas();

function addTarefa() {
  var tarefaText = inputElement.value;

  tarefas.push(tarefaText);
  inputElement.value = '';
  renderTarefas();
}

buttonElement.onclick = addTarefa;
<html>
  <meta charset="utf-8">
  <head>
    <title>Gerenciador de Tarefas</title>
  </head>
  <body>
    <div id="app">      
      <ul>               
      </ul> 
      <input type="text" placeholder="Digite uma tarefa">  
      <button>Adicionar</button>   
    </div>

    <!--<script src="tarefas.js"> </script>-->
  </body>
</html>

  • Thank you, there was no attempt on this detail

Browser other questions tagged

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