Write JavaScript variable in the HTML body

Question

Write JavaScript variable in the HTML body

Navigation

#1 by (2 votes)
#2 by (1 votes)
#3 by (0 votes)
#4 by (0 votes)

2

Is it possible to write a variable stored in a function of a .js file in the body of the index.html?

For example I want to put below the form of the calculator "The result of the subtraction is (and here call the variable" result "stored in the calcula_restart function of the .js file)"

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>

javascript html

asked by InThaHouse 12.10.2018 в 16:04

source

4 answers

1

If you want it with javascript the html file, it would look like this:

<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>

and the content of the index.js (in the same directory as the html file), like this:

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

answered by 12.10.2018 в 16:44

0

You can add it with the function 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;
}

answered by 12.10.2018 в 16:17

0

There is no direct way using purely JavaScript and HTML to show the value of a variable in the DOM of the application (In case of using a framework like React, Angular or VueJs there is what is called binding of variables, but in pure JS it does not exist). So what you're going to have to do is get the HTML element and modify it "manually".

So first you get the HTML element of the DOM, by means of the id for example:

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

Then you can edit it

elementoHtmlDelResultado.innerHTML = variableResultado;
//Donde variableResultado tendra lo que quieras mostrar

answered by 12.10.2018 в 16:51

Event similar to "onchange" Standardize or normalize numerical variables of a base with a mixture of numerical and categorical variables

score 2 · Accepted Answer

In the same way that you take the values you can set a value to a label:

<html>

<head>
</head>
<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>

<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>
</body>