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