Repaso de conceptos

1.- Hacer el HTML y sin javascript

2.- Creo la función con sus parámetros y devuelvo algo para ver que va bien. Esta función es la que hará los cálculos y por lo tanto: No console.log (salvo para comprobar que funciona) NO alerts NO document.getElementById
Esta función recibe unos valores y devuelve un resultado.

3.- Enlazo el botón (click) a una función ¿Cömo? No con onclick, con addEventListener ¡Y compruebo que funcione!

4.- Recupero los valores. También comprobamos y ¡ojo! Si es una cadena, value nos basta pero si es un número: parseFloat(). Si hay más de un valor, yo primero compruebo uno y cuando lo tenga bien los otros los hago igual.

5.- Llamo a la función. Normalmente los valores que he recuperado con los parámetro de la función.

6.- Muestro el resultado.

En estos momentos ya tenemos el esquema/esqueleto de nuestra web. Sólo siguiendo los pasos.

	<div id="contenedor" class="container">
		<p>Número inicial: <input type="number" id="inicial" placeholder="Introduzca el número inicial"></p>
		<p>Incremento: <input type="number" id="incremento" placeholder="Introduzca el incremento"></p>
		<p>Número de términos: <input type="number" id="terminos" placeholder="Introduzca el número de términos">
		</p>
		<button id="calcular" class="btn btn-success">Calcular</button>
		<p id="resultado"></p>
	</div>
document.getElementById('calcular').addEventListener('click', calcular)

function calcular () {
  const inicial = parseFloat(document.getElementById('inicial').value)
  const incremento = parseFloat(document.getElementById('incremento').value)
  const terminos = parseFloat(document.getElementById('terminos').value)
  const resultado = serie(inicial, incremento, terminos)
  document.getElementById('resultado').innerHTML = resultado
}

function serie (inicial, incremento, terminos) {
  // Aquí hay jaleo pero lo dejo para el final
  console.log(inicial, incremento, terminos)
  return 'Estamos trabajando en ello'
}

Después de tener el esquema tengo que hacer el algoritmo.

1.- Si tengo que devolver un resultado lo tendré que inicializar y luego un return
2.- Pienso como lo haría yo. Y lo intento implementar.
3.- En este caso yo sé que lo tengo hacer tantas veces como terminos-> for
4.- Yo tengo un valor inicial al que le voy sumando el incremento: let numero=inicial; for(){numero+=incremento}

function serie (inicial, incremento, terminos) {
  // Aquí tengo que ir calculando los elementos de una serie
  // Y luego devolverlos todos juntos
  // Empiezo con el número inicial y le voy sumando el incremento
  // Tantas veces como terminos
  // Si yo empiezo por 1, el incremento es 3, y me piden 4 términos
  // Empiezo por el 1. Le sumo 3: 1+3-->4
  // Le sumo 3: 4+3-->7
  // Le sumo 3: 7+3-->10
  let resultado = ''
  let numero = inicial
  for (let i = 0; i < terminos; i++) {
    resultado += numero + ', '
    numero += incremento
  }
  return resultado.slice(0, -2)
}

Cambio la función calcular para que compruebe si son números:

function calcular () {
  const inicial = parseFloat(document.getElementById('inicial').value)
  const incremento = parseFloat(document.getElementById('incremento').value)
  const terminos = parseFloat(document.getElementById('terminos').value)
  if (isNaN(inicial) || isNaN(incremento) || isNaN(terminos)) {
    document.getElementById('resultado').innerHTML = 'Algún número está mal'
  } else {
    const resultado = serie(inicial, incremento, terminos)
    document.getElementById('resultado').innerHTML = resultado
  }
}

Publicado por

Juan Pablo Fuentes

Formador de programación y bases de datos