2

¿Es posible escribir una variable almacenada en una función de un archivo .js en el body del index.html?

Por ejemplo quiero poner debajo del formulario de la calculadora "El resultado de la resta es (y aqui llamar a la variable "resultado" almacenada en la función calcula_resta del archivo .js)"

function calcula_resta(){
	
    var numero1 = document.getElementById("numero1").value;
	var numero2 = document.getElementById("numero2").value;

	var resultado = (numero1 - numero2);

	alert ("El resultado es : " + resultado);

}
<html>
	<head></head>
	<script type="text/javascript" src="index.js"></script> 
	
	<body>

		<form>
				
			<p> 
				<b>Calculadora Resta</b>
				<br/><br/>
			</p>
			
			Numero1
			<br/> 
			<input id="numero1" type="number" />
			<br/><br/>
			Numero2
			<br/> 
			<input id="numero2" type="number" />
			<br/><br/>
					
			<input type="button" value="Calcular" onclick="calcula_resta()" /><br/>

		</form>
		
		<div id= "resultado">
			<!-- "EL RESULTADO DE LA RESTA ES + resultado() !-->
		</div>

	</body>
</html>

4 respuestas 4

3

De la misma forma que tomas los valor puedes setear un valor a un label:

<script type="text/javascript">
function calcula_resta() {
    var numero1 = document.getElementById("numero1").value;
    var numero2 = document.getElementById("numero2").value;
    var resultado = (numero1 - numero2);
    document.getElementById('lbResultado').innerHTML = resultado;
}
</script>
<form>
<p>
    <b>Calculadora Resta</b>
    <br/><br/>
</p>
Numero1
<br/>
<input id="numero1" type="number"/>
<br/><br/> Numero2
<br/>
<input id="numero2" type="number"/>
<br/><br/>
<input type="button" value="Calcular" onclick="calcula_resta()"/><br/>
</form>
<div id="resultado">
<label id="lbResultado">test</label>
</div>

2
  • Hola, te recomiendo revisar el snippet, pues me da error al ejecuutarlo. Un saludo. Commented el 12 oct. 2018 a las 14:39
  • Tienes 2 errores. 1- Debes sacarle al tag script el src="index.js". 2- Al asignar el resultado la variable resutado esta mal escrita.
    – Marcos
    Commented el 12 oct. 2018 a las 15:05
1

Si lo quieres con javascript el archivo html, quedaría de la siguiente forma:

<html>
	<head>
	</head>
	<body>
		<form>
			<p>
				<b>Calculadora Resta</b>
				<br/><br/>
			</p>
			Numero1
			<br/>
			<input id="numero1" type="number" />
			<br/><br/> Numero2
			<br/>
			<input id="numero2" type="number" />
			<br/><br/>
			<input type="button" value="Calcular" onclick="calcula_resta()" /><br/>
		</form>
		<div id="resultado">
			<label id="lbResultado">test</label>
		</div>
		<script type="text/javascript" src="index.js">
		</script>
	</body>
</html>

y el contenido del index.js(en el mismo directorio que el archivo html), así:

		function calcula_resta() {
			var numero1 = document.getElementById("numero1").value;
			var numero2 = document.getElementById("numero2").value;
			var resultado = (numero1 - numero2);
			document.getElementById('lbResultado').innerHTML = resultado;
		}

0

Puedes agregarlo con la función innerHTML

function calcula_resta(){
  var numero1 = document.getElementById("numero1").value;
  var numero2 = document.getElementById("numero2").value;
  var resultadoContenedor = document.getElementById("resultado");
  var resultado = (numero1 - numero2);
  resultadoContenedor.innerHTML = resultado;
}
0

No hay forma directa utilizando puramente JavaScript y HTML de mostrar el valor de una variable en el DOM de la aplicación (En caso de utilizar un framework como React, Ángular o VueJs existe lo que se llama binding de variables, pero en JS puro no existe). Por lo cual lo que vas a tener que hacer es obtener el elemento HTML y modificarlo "manualmente".

Por lo cual primero obtenes el elemento HTML del DOM, por medio del id por ejemplo:

var elementoHtmlDelResultado = document.getElementById("resultado");

Luego puedes editarlo

elementoHtmlDelResultado.innerHTML = variableResultado;
//Donde variableResultado tendra lo que quieras mostrar
3
  • 1
    en que te basas para decir eso? Commented el 12 oct. 2018 a las 15:09
  • 2
    de hecho si se puede si por ahi revisamos eventos como onchange onkeyup onkeydown pero de que se puede se puede
    – user75901
    Commented el 12 oct. 2018 a las 15:13
  • Debido a que la edición del DOM HTML mediante javascript puro es estático. Obviamente si le damos una vuelta re rosca y usamos eventos como los que nombras si es posible (laburo con JQuery y lo he hecho), pero nativamente no existe un binding dinámico. Commented el 12 oct. 2018 a las 15:27

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.