Código del ejercicio:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejercicio HTML y JavaScript</title>
</head>
<body>
    <h3>Contar cuántos números múltiplos de 3 hay del 1 hasta N número</h3>
    <form action="">
        <label for="">número:</label>
        <input type="number" id="n"><br><br>
        <input type="button" value="Mostrar" onclick="mostrar()">
        <input type="reset" value="Limpiar"><br><br>
        <label for="">resultado:</label><br>
        <textarea name="" id="resultado" cols="30" rows="2"></textarea>
    </form>
    <script>
        function mostrar(){
            let n = parseInt(document.getElementById('n').value);
            let i = 1, c = 0;
            while(i <= n){
                if(i % 3 == 0){
                    c++;
                }
                i++;
            }
            document.getElementById('resultado').value = `La cantidad de números múltiplos de 3 son: ${c}`;
        }
    </script>
</body>
</html>

Definición de los códigos del ejercicio:

<h3></h3> --> representa un encabezado de nivel 3.
<form></form> --> se utiliza para crear un formulario HTML para la entrada del usuario.
<br> --> produce un salto de línea en el texto.
<label></label> --> representa una etiqueta para un elemento en una interfaz de usuario.
<input> --> etiqueta especifica un campo de entrada donde el usuario puede ingresar datos.
<textarea></textarea> --> define un control de entrada de texto de varias líneas.
onclick --> onclick evento ocurre cuando el usuario hace clic en un elemento.
<script></script> --> contiene comandos u ordenes que se van ejecutando de manera secuencial y comúnmente se utilizan para controlar el comportamiento de un programa en específico o para interactuar con el sistema operativo.
function --> es un bloque de código diseñado para realizar una tarea en particular.
let --> permite declarar variables limitando su alcance (scope) al bloque, declaración, o expresión donde se está usando.
parseInt() --> analiza un valor como una cadena y devuelve el primer entero.
while --> el ciclo while recorre un bloque de código siempre que una condición específica sea verdadera.
<= --> el operador menor o igual ( <= ) devuelve true si el operando izquierdo es menor o igual que el operando derecho, y en false caso contrario.
if --> se usa para especificar un bloque de código que se ejecutará, si una condición especificada es verdadera.
.push() --> agrega uno o más elementos al final de un array y devuelve la nueva longitud del array.
== --> el operador de comparacion ( == ) comprueba si sus dos operandos son iguales y devuelve un resultado booleano.
% --> el operador de modulo ( % ) devuelve el resto de la división.
++ --> el operador de incremento ( ++ ) incrementa (suma uno a) su operando y devuelve un valor.
document.getElementById() --> devuelve un elemento con un valor especificado.
.value --> establece o devuelve el valor del atributo de valor de un campo de texto.
`${}` --> los literales de plantilla (cadenas de plantilla) le permiten utilizar cadenas o expresiones incrustadas en forma de cadena.

Explicación del Código:

Este programa solicita un número al usuario y cuenta cuántos números son múltiplos de 3 desde el número 1 hasta el número ingresado. Al finalizar, muestra la cantidad encontrada.

1. Declaración de la función


function mostrar(){

}

Se crea la función mostrar(), que se ejecuta cuando el usuario hace clic en el botón Mostrar. Dentro de ella se encuentra toda la lógica del programa.

2. Obtener el número ingresado


let n = parseInt(document.getElementById('n').value);

document.getElementById('n') obtiene el cuadro de texto donde el usuario escribe el número.

.value obtiene el valor escrito.

parseInt() convierte ese valor en un número entero para poder realizar operaciones matemáticas.

3. Declarar las variables


let i = 1, c = 0;

i comienza en 1 y recorrerá todos los números.
c comienza en 0 y contará cuántos múltiplos de 3 existen.

4. Recorrer los números


while(i <= n){

El ciclo while repite las instrucciones mientras i sea menor o igual que el número ingresado por el usuario.

5. Verificar si es múltiplo de 3


if(i % 3 == 0){
    c++;
}

El operador % calcula el residuo de la división.

Si el residuo es 0, el número es múltiplo de 3.
En ese caso, c++ aumenta el contador en una unidad.

6. Pasar al siguiente número


i++;

Incrementa la variable i en uno para continuar revisando el siguiente número.

7. Mostrar el resultado


document.getElementById('resultado').value =
`La cantidad de números múltiplos de 3 son: ${c}`;

Muestra en el área de texto la cantidad total de números múltiplos de 3 encontrados durante el recorrido.

Funcionamiento paso a paso

Si el usuario ingresa el número 10, el programa revisa los números del 1 al 10.

1, 2, 3, 4, 5, 6, 7, 8, 9, 10

Los números 3, 6 y 9 son múltiplos de 3, por lo tanto el contador llega a 3.

Resultado:

La cantidad de números múltiplos de 3 son: 3

Resumen

El usuario ingresa un número.
El programa recorre todos los números desde 1 hasta ese valor.
Comprueba cuáles son múltiplos de 3.
Cuenta cuántos encuentra.
Muestra la cantidad total en el cuadro de resultado.

Ejercicios de programación

Páginas

sábado, 27 de junio de 2026

Contar cuántos números múltiplos de 3 hay del 1 hasta N número en HTML y JavaScript