Yo tengo una web con un input y un botón:
Cadena:[______]
[Sumar]
En cadena me van a introducir unos números separados por comas. Cuando le den a sumar me va a mostrar la suma de esos números.
EJ: 1,2,3,4,5
Al darle a sumar me pondrá 15
1.- Creo el HTML
<div id="contenedor" class="container ">
Cadena: <input type="text" id="cad">
<button id="sumar" class="btn btn-success">Sumar</button>
<p id="resultado"></p>
</div>
2.- Crearía una función que haga el cálculo que me piden. ¿Qué me piden? Que dada una cadena de números separados por coma me devuelva la suma.
función sumaNumero(cadena)—> Suma
sumaNumero(‘1,2,3’)-> 6
2.a Definición y parámetros
function sumaNumero(cadena){
let suma=0;
// Aquí ocurrirá la magia
return suma;
}
2.b Buscaremos la lógica de lo que nos piden. Definimos el algoritmo que vamos a utilizar
A mí se me ocurre: Lo paso a un array. Luego me recorro ese array y voy sumando los números
¿Sé pasar de cadena separa con comas a un array? Sí: split(‘,’)
¿Sé recorrer un array? Sí: con el for de toda la vida
function sumaNumero(cadena){
let suma=0;
let numeros=cadena.split(',')
for(let i=0;i<numeros.length;i++){
//Algo haremos aquí
}
return suma;
}
2.c ¿Qué me falta? Ir sumando los números. ¿Dónde tengo los números? en numeros[i]
¿Dónde los quiero sumar? en suma ¿Cómo lo hago? suma=suma+numeros[i] suma+=numeros[i]
function sumaNumero(cadena){
let suma=0;
let numeros=cadena.split(',')
for(let i=0;i<numeros.length;i++){
suma+=numeros[i]
}
return suma;
}
2.d Me doy cuenta al probarlo que hay un error y lo corrijo:
function sumaNumero (cadena) {
let suma = 0
const numeros = cadena.split(',')
for (let i = 0; i < numeros.length; i++) {
suma += parseFloat(numeros[i])
}
return suma
}
3.- Enlazar la función que ya tengo con el HTML. Me piden que al clicar a sumar me haga los cálculos. 3.a. Enlazar el botón con una función
document.getElementById('sumar').addEventListener('click',sumar)
3.b Creo la función y la pruebo
function sumar () {
console.log('Todo bien')
}
3.c ¿QUé tengo que hacer dentro de la función? obtener valores, realizar cálculos y mostrar resultado.
3.d ¿Qué valor tengo que obtener? La cadena que ha introducido el usuario. ¿Sé hacerlo?
const cadena = document.getElementById('cad').value
console.log(cadena)
Importante: tanto el getElementById para recuperar el valor como introducirlo dentro de una variable
3.e Sumar todos los números de la cadena introducida. ¿Cómo? Ya tengo una función sumaNumero.
const suma = sumaNumero(cadena)
console.log(suma)
3.f Poner este resultado en el HTML
document.getElementById('resultado').innerHTML = 'La suma es ' + suma
3.g Ejemplo de cambiar estilo:
if (suma > 20) {
document.getElementById('resultado').style.color = 'red'
} else {
document.getElementById('resultado').style.color = 'black'
}