Recomendado

Las mejores ofertas del Black Friday en Hormiguitas Ahorradoras

domingo, 26 de noviembre de 2023

Tablas de multiplicar

Buenas tardes, hoy os traigo un generador de tablas de multiplicar, ideal para que los mas peques de la casa aprendan las tablas de multiplicar del 1 a 10.



Haz clic sobre cualquier número para generar la tabla de multiplicar:

                  



Como podéis ver es muy simple de hacer, lleva en html los botones, en este caso, solo haremos del 1 al 10, aunque podríamos hacer todos los que quisiéramos;

  1. <button>1</button>
  2. <button>2</button>
  3. <button>3</button>
  4. <button>4</button>
  5. <button>5</button>
  6. <button>6</button>
  7. <button>7</button>
  8. <button>9</button>
  9. <button>10</button>



También tenemos el contenedor donde escribiremos el resultado:

  1. <div id="resultadoTablasDeMultiplicar"></div>


a los botones le añadimos función que la llamaremos generaTablasDeMultiplicar , y le pasaremos el valor del propio boton, en este caso será el numero que contenga, y quedaran de la siguiente manera:

  1. <button onclick="generaTablasDeMultiplicar(innerHTML)">1</button>
  2. <button onclick="generaTablasDeMultiplicar(innerHTML)">2</button>
  3. <button onclick="generaTablasDeMultiplicar(innerHTML)">3</button>
  4. <button onclick="generaTablasDeMultiplicar(innerHTML)">4</button>
  5. <button onclick="generaTablasDeMultiplicar(innerHTML)">5</button>
  6. <button onclick="generaTablasDeMultiplicar(innerHTML)">6</button>
  7. <button onclick="generaTablasDeMultiplicar(innerHTML)">7</button>
  8. <button onclick="generaTablasDeMultiplicar(innerHTML)">9</button>
  9. <button onclick="generaTablasDeMultiplicar(innerHTML)">10</button>

Y para que esto funcione, nos faltará el javascript que lo haremos con un for que recorrerá los números del 1 al 10 multiplicándolo por el numero del botón elegido y nos dará como resultado la tabla de multiplicar completa del 1 al 10, el código js es el siguiente:

  1. function generaTablasDeMultiplicar(elemento) {
  2. let text = "";
  3. for (let i = 0; i <= 10; i++) {
  4. text += elemento +" X "+ i +" = "+ elemento*i +"<br>";
  5. }
  6. document.getElementById("resultadoTablasDeMultiplicar").innerHTML = text;
  7. }
como podéis ver es muy sencillo y simple de hacer, cierto es que se puede hacer de otras muchas maneras, pero al final será el mismo resultado.

espero que os sea útil.


Un saludo.



No hay comentarios:

Publicar un comentario