Passing HTML Parameters to Javascript

Question

Passing HTML Parameters to Javascript

Navigation

#1 by (8 votes)
#2 by (2 votes)
#3 by (-1 votes)

1

Good afternoon, people!

I need to pass parameters from a small HTML form to a Javascript function but I have already tried it anyway and it does not 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>

javascript javascript-eventos

asked by anonymous 23.10.2018 / 18:01

3 answers

How to read only integer numbers in scanf? How to know which checkboxes are selected?

score 8 · Answer 1

Your code has a lot of structural error.

First, in this line:

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

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

The correct one would be document.getElementById('nome').value .

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

If you set this out of the function, as you did, the captured value would be only what you initially set.

So, I modified your code, I left it 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, in addition, I had to use event.preventDefault() because form would cause a submit to be sent. preventDefault() prevents the default action of the element.

Tips:

If you are going to use Javascript events only, you do not need to use the form tag. 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. So I used preventDefault inside the form, but without form it would not even be necessary.
Avoid using onclick to call functions. This often leaves the code more difficult to maintain. I would recommend using addEventListener .

Example:

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


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

See some examples here .

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

Maybe, in your case, you just have to do this:

var pessoa = {nome: null}

In the end, I would leave it like this:

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>

score 2 · Answer 2

Using your code I added a name to input and in onsubmit I put a call to the function mostrar using call passing this as parameter so this da function mostrar will be ObjectHTML form itself and thus I can access this.nome thanks to name placed in input . The return false no 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>

score -1 · Answer 3

Well in java script is as follows, you do this function that will get the contents of the 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>

Depositing the function can by in body as onLoad.