0

Tengo una etiqueta span que contiene un numero el cual quiero que pueda ser sumado según la opción escogida y el mismo número cambie dentro de la etiqueta sin tener que crear otra para el resultado.

<select id="cantidades">
<option>1</option> <!-- Sumar 1 vez -->
<option>2</option> <!-- Sumar 2 veces -->
<option>3</option> <!-- etc... -->
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
</select>

<span id="numero">$15.000</span>

2 respuestas 2

1

Suponiendo que el valor de $15.000 es estático, simple mente multiplicas el valor del select por 15 y lo imprimes en la etiqueta <span id="numero">$15.000</span>, además de que debes agregar un el atributo value a cada opción, espero te funcione.

var cantidad = document.getElementById('cantidades');

cantidad.addEventListener('change', function(){

  var valor = Number(this.value);
  
 console.log(valor); 
 
 var resultado = 15 * valor;
 
 var mostrar = document.getElementById('numero');
 console.log(resultado);
 
 mostrar.innerText = '$'+resultado+'.000';
 
  

})
<select id="cantidades">
<option value="1">1</option> <!-- Sumar 1 vez -->
<option value="2">2</option> <!-- Sumar 2 veces -->
<option value="3">3</option> <!-- etc... -->
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>

<span id="numero">$15.000</span>

1

JAVASCRIPT:

•Primero usamos un metodo en el SELECT que es el onchange() donde le pasaras un funcion que crearas en JS, este metodo te ayudara a realizar la accion cuando selecciones una opcion.


--Modo Dinámico • En myFuncion() solo obtendremos los valores de cada etiqueta. Usamos "parseInt()" para convertir valores String a Númericos.

•Finalmente realizamos el calculo y así como obtenemos el valor de la misma forma lo podemos enviar. Recuerda que cada vez que seleccionas el valor se altera por lo que siempre se aumentara.


--Modo Estático acá solo usamos una CONST en ves de VAR esto indica que solo se podra asignar un valor y este no podrá ser alterado, por lo que multiplicara por la cantidad seleccionada

//modo dinamico
function myFuncion(){

			var numero = parseInt(document.getElementById("numero").innerHTML);
			var n = parseInt(document.getElementById("cantidades").value);

			var resultado = numero * n;

			document.getElementById("numero").innerHTML = resultado ;
		  
		}

//modo estatico
const numeroEstatico = parseInt(document.getElementById("numero2").innerHTML);

function myFuncionEstatico(){	
			var n = parseInt(document.getElementById("cantidades2").value);

			var resultado = numeroEstatico * n;

			document.getElementById("numero2").innerHTML = resultado ;
		  
		}
<h2> MODO DINAMICO </h2>
<select id="cantidades" onchange="myFuncion()" >
		<option value="1">1</option> <!-- Sumar 1 vez -->
		<option value="2" >2</option> <!-- Sumar 2 veces -->
		<option value="3" >3</option> <!-- etc... -->
		<option value="4" >4</option>
		<option value="5" >5</option>
		<option value="6" >6</option>
		<option value="7" >7</option>
		<option value="8" >8</option>
		<option value="9" >9</option>
		<option value="10" >10</option>
	</select>

	<span>$</span><span id="numero">15000</span>
 <hr>
 <h2> MODO ESTATICO </h2>
 <select id="cantidades2" onchange="myFuncionEstatico()" >
		<option value="1">1</option> <!-- Sumar 1 vez -->
		<option value="2" >2</option> <!-- Sumar 2 veces -->
		<option value="3" >3</option> <!-- etc... -->
		<option value="4" >4</option>
		<option value="5" >5</option>
		<option value="6" >6</option>
		<option value="7" >7</option>
		<option value="8" >8</option>
		<option value="9" >9</option>
		<option value="10" >10</option>
	</select>

	<span>$</span><span id="numero2">15000</span>

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.