Html text box value to be received by javascript variable

Question

Hello, I’m learning javascript and wanted to know how to do what is typed in the HTML text box printed on the screen in javascript Document.write.

Answer 1

You can do it this way, but using the document.write will make you rewrite your page, making your controls disappear.

function writeItDown(btn){
  var suaVariavel = document.getElementById("txtInput").value;
  document.write(suaVariavel);
}

<input type="text" id="txtInput" /> <button id="myBtn" onclick="writeItDown(this);" >Write</button>

The best option would be to use an html element as a span and write within it through the property innerHTML of the element. thus:

function escrever(btn){
  var suaVariavel = document.getElementById("txtInput").value;
  document.getElementById('meuTextoVaiAqui').innerHTML = suaVariavel;
}

<input type="text" id="txtInput" /> <button id="myBtn" onclick="escrever(this);" >Write</button>
<br/><span id="meuTextoVaiAqui"></span>

Answer 2

You can always do something like that:

HTML:

<p>
    //o resultado vai cair aqui
</p>

//com um input
<input type="text" onkeyup="changeResult(this)" />

//ou com uma textarea
<textarea onkeyup="changeResult(this)"></textarea>

JS:

var changeResult = function(element)
{
   document.getElementsByTagName("p") = element.value; 
}

It is possible that there is some error because I have not tested but the logic is this

Answer 3

Library

<script src="http://code.jquery.com/jquery-1.8.3.min.js" type="text/javascript"></script>

Script

$(document).ready(function() {
      $('.class').keyup(function (e) {
       var v1 = (document.getElementById("v1").value);
       $('#v2').text(v1);
   });
});

HTML

<input type="text" class="class" name="v1" id="v1" size="10" /> 
<span id="v2"> </span>>