Passing HTML Parameters to Javascript

Question

Good afternoon Galera!

I need to pass parameters from a small HTML form to a Javascript function but I’ve tried it in every way and it doesn’t work!

Where am I going wrong?

function pessoa(nome) {
  this.nome = nome;

}

var pessoa1 = new pessoa(document.getElementById('nome'));

function mostrar() {
  document.getElementById('texto').innerHTML = pessoa1.nome;
}

<form>
  Qual é o seu nome? <input type="text" id="nome"><br><br>
  <button id="btn-enviar" onclick="mostrar()">ENVIAR</button>
</form>

<p id="texto"></p>

Answer 1

Your code has too much structural error.

First, on this line:

var pessoa1 = new pessoa(document.getElementById('nome'));

You are assigning the element returned by getElementById to the property nome, class pessoa, and not the value of the element.

The right thing would be document.getElementById('nome').value.

But there is another problem: If you want to update the value whenever it is clicked on mostrar, then you should create the instance of pessoa when mostrar were called.

If you set this outside the function, as you did, the captured value would be just what you initially set.

So I modified his code, left him like this:

<form>
    Qual é o seu nome? <input type="text" id="nome"><br><br>
    <button id="btn-enviar" onclick="mostrar(event)">ENVIAR</button>
</form>

<p id="texto">

</p>


<script type="text/javascript">

/**
 para classes, use letra maiúsculas
*/
function Pessoa(nome){
    this.nome = nome;
}

var pessoa1;

function mostrar(event){

    event.preventDefault();

    pessoa1 = new Pessoa(document.getElementById('nome').value);

    console.log(pessoa1);

    document.getElementById('texto').innerHTML = pessoa1.nome;
}

</script>

Note that on top of everything, I had to use the event.preventDefault(), for the form would cause a Ubmit to be sent. preventDefault() prevents the standard action of the element.

Tips:

• If you will only use Javascript events, you do not need to use the tag form. A form with a button inside, without specifying the type, will make the browser understand that you want to submit the form. If you click on it, the page would probably be updated. That’s why I used the preventDefault within the form, but without the form nor would it be necessary.

• Avoid using onclick to call functions. This usually makes code harder to maintain. I would recommend using addEventListener.

Example:

  function mostrar(e) {
     e.preventDefault();
     // resto do código
  }


  document.getElementById('nome').addEventListener('click', mostrar);

Here are some examples here.

• If pessoa is a simple object, why not use a Object of Javascript itself?

Perhaps, in your case, it was only necessary to do this:

var pessoa = {nome: null}

In the end, I’d leave it at that:

var elTexto = document.querySelector('#texto');
var elNome = document.querySelector('#nome');

var pessoa = {nome: null};


document.querySelector('#botao').addEventListener('click', function (e) {
   e.preventDefault(); 
   pessoa.nome = elNome.value;
   elTexto.innerHTML = elNome.value;

   console.log(pessoa);
})

Qual é seu nome?
<input type="text" id="nome" />

<button id="botao">Enviar</button>

<p id="texto"></p>

Answer 2

Using your code I added one name at the input and in the onsubmit I put a call to the function mostrar using the call passing the this as a parameter in this way the this of function mostrar will be the own ObjectHTML form and so I can access the this.nome thanks to name placed in the input. The return false in the onsubmit server so it does not send the form.

function mostrar(){
    alert(this.nome.value);
    document.getElementById('texto').innerHTML = this.nome.value;
}

<form onsubmit="mostrar.call(this); return false;">
  Qual é o seu nome? <input type="text" id="nome" name="nome"><br><br>
  <button id="btn-enviar">ENVIAR</button>
</form>

<p id="texto"></p>

Answer 3

Good in java script is the following, you do this function that will take the content of html, with innerHtml you will write in html.

<script>
  function getName(){
   var content = document.getElementById('texto');
   console.log(content); // Resultado será mostrado no console.
   alert(content); // Resultado será mostrado ao carregar a página
 }
</script>

<body>
<from method="post">
<input type="text" name="texto" id="texto"/><br/>
<input type="submit" onclick="getName()" value="Pegar Nome"/> <!-- Função do javascript no onClick após aperta o botão pega o nome digitado. -->
</form>
</body>

Using the function you can put in the body as onload.