JS: How to print a value from a text box into the screen?
I want to print a value onto the screen based on text in the input (textbox) in the form.
<input type="text" name="pesos" value="">
<button onclick="conversorMonedas()">Convertir!</button>
<p id="resultado"></p>
function conversorMonedas() {
var pesos = document.getElementById("pesos");
document.getElementById("resultado").innerHTML = pesos.value;
}
When I click the button, the error at the console appears briefly and then disappears. I managed to read it and it says that pesos.value
is null.
How can I print out what I wrote in the text box? Thanks!
You don't have element with id pesos. Add id to your input:
<input type="text" name="pesos" id="pesos" value="">
By using
var pesos = document.getElementById("pesos");
You're querying for something that has the id
property set to pesos
, looking at your HTML code you're not setting the id
of your <input>
Simply add it, it should be like this:
<input type="text" id="pesos" name="pesos" value="">
There is no element with id pesos. So either add id="pesos" to input or modify your function to use getElementByNames as
$scope.conversorMonedas = function() {
var pesos = document.getElementsByName("pesos")[0];
document.getElementById("resultado").innerHTML = pesos.value;
}
But this may not work in cases you have multiple elements with this same name