javascript erro value

HTML

JavaScript

27/12/2019

Bom dia gente estou aqui testando meus conhecimentos em html,css e js. Estou tentando pegar o valor do input, porem não vai. e aparece esse erro: Cannot read property ''value'' of null, mais cedo aparecia esse mesmo erro só que addEventLisner inves de value. Como posso resolver isso ?

meu codigo js:
 var btn = document.querySelector("#app button");
var text = document.getElementById("#app input");


function mostra(texto){
console.log(texto);
}

var t = text.value;

btn.addEventListener("click",mostra(t));


meu codigo html: 
<div class="container">
        <div class="row">
            <div id="app" class="col-xs-12">
                <input type="text" placeholder="Digite algo aqui" id="add">
                <button type="button">add</button>
            </div>
        </div>
    </div>
Matheus Rodrigues

Matheus Rodrigues

Curtidas 0

Respostas

Matheus Rodrigues

Matheus Rodrigues

27/12/2019

desculpa gente sem querer eu comentei duas vezes
GOSTEI 0
Lucas Conceição

Lucas Conceição

27/12/2019

Olá Matheus,

Primeiramente, você não deve usar o mesmo ID para tags html diferentes, o proposito do ID é que ele seja único numa pagina.
O problema em questão no seu código, é que você está definindo de forma equivocada os parâmetro da função getElementById(), está função espera por parâmetro apenas o ID da tag que ela deverá retornar, por isso os ID devem ser únicos, para o seu código funcionar, ele poderia ser escrito desta forma
No HTML:
<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <!--Veja aqui que foi definido para o input, um ID "myText"-->
      <input type="text" placeholder="Digite algo aqui" id="myText">
      <!--E aqui para o botão, um ID "myBtn"-->
      <button id="myBtn" type="button">add</button>
    </div>
  </div>
</div>


No seu JS
//Lembre de definir o tipo do script, é importante
<script type="text/javascript">
        function exibirMensagem()
        {
            //Aqui a função getElementById() é chamada passando por parâmetro unicamente o ID da tag que eu preciso buscar
            //E em seguida o atributo value que ira retornar o que tem dentro dela
            var texto = document.getElementById("myText").value;
            //Aqui você pode usar o alert() ou console.log()
            alert(texto);
        }
        // Novamente, a função recebe apenas o ID da tag que ela precisa encontrar
        var btn = document.getElementById("myBtn");
        btn.addEventListener("click", exibirMensagem);
</script>



Qualquer coisa, é só falar. Abraços
GOSTEI 0
Matheus Rodrigues

Matheus Rodrigues

27/12/2019

Bom eu fiz dois teste. Eu copiei seu codigo e deu certo porem quando eu faço não funciona.
GOSTEI 0
Matheus Rodrigues

Matheus Rodrigues

27/12/2019

Bom eu fiz esse dois exemplos. O codigo que está comentado está funcioando já o outro não está pq?
var input = document.getElementById("input");

//function mensagem(){
    
  //  alert(input.value);
//}
var btn = document.getElementById("button");
//btn.addEventListener("click",mensagem);


var t = console.log(input.value);   
btn.addEventListener('click', t);
GOSTEI 0
Lucas Conceição

Lucas Conceição

27/12/2019

Bom eu fiz esse dois exemplos. O codigo que está comentado está funcioando já o outro não está pq?
var input = document.getElementById("input");

//function mensagem(){
    
  //  alert(input.value);
//}
var btn = document.getElementById("button");
//btn.addEventListener("click",mensagem);


var t = console.log(input.value);   
btn.addEventListener('click', t);



Olá Matheus,
a função addEventListener() espera uma função como segundo parâmetro, veja o seu código:
var t = console.log(input.value);   
btn.addEventListener('click', t)

Nele, você está passando uma variável como segundo parâmetro, por esse motivo não funciona.
GOSTEI 0
POSTAR