1

Estoy programando una página para calcular múltiplos, pero cuando doy click al botón para generar, mi botón no da ni una señal de vida. Probé programarlo para escribir un simple "hola", y nada. Le tengo que poner los datos en los input, y tengo que darle click al botón Generar (está señalado con un comentario que dice "Botón de generar"), procesar los datos con JavaScript y regresar escritos. Pero cuando le doy el click simplemente el botón no da señal de vida; probé con ponerle un document.write("Hola"); y nada, no se escribe.

Aquí les dejo el código:

HTML

    <!-- Número base -->
        <li><p>N&uacute;mero base:</p><input name="base_number" type="number" placeholder="N&uacute;mero" id="base_number"></li>
        
    <!-- Número de múltiplos -->
        <li><p>N&uacutemero de m&uacute;ltiplos:</p><input name="multiples_number" type="number" placeholder="N&uacute;mero" id="multiples_number"></li>
        <p>Nota: si no escribes n&uacute;meros no podr&aacute;s calcular nada.</p>
    </ul>
    <br><br>
    
    <!-- Botón de generar -->
    <div class="button" id="generate" style="margin-left: 50px;"><h4 id="generate_itext">Generar</h4></div>
    
    <br><br><br><br>
    
    <!-- Área de resultados -->
    <h2 style="font-size: 40px; margin-left: 40px;">Resultado</h2>
    
    <p id="resultArea">Aqu&iacute; saldr&aacute;n los resultados.</p>
    

JS


this.base_number = base_number;
this.multiples_number = multiples_number;
    
var times = 1;
var currentNumber = 0;
var result;
    
while (times < multiples_number) {
    
currentNumber = base_number * times;
        result = result + currentNumber;
    if (times = multiples_number){
            
} else {
currentNumber = currentNumber + ",";
}
times++;
        
    }

document.querySelector("resultArea").write(result);
}

 var resultArea = document.querySelector("resultArea");

//Parte donde se supone que debería estar el evento de escuchar los clicks del susodicho botón
const generate = document.querySelector("generate");
generate.addEventListener("click", function (generate_itext){
        var base_number = document.querySelector("base_number");
        var multiples_number = 
document.querySelector("multiples_number");
        calculateMultiples(base_number, multiples_number);
});

const generate_itext = document.querySelector("generate_itext");
generate.addEventListener("click", function (generate_itext){
        var base_number = document.querySelector("base_number");
        var multiples_number = 
document.querySelector("multiples_number");
        calculateMultiples(base_number, multiples_number);
});

P.D.: El botón está hecho con div para tener más opciones de estilo. El problema es que no escucha los clicks.

1
  • Muchas gracias por tu ayuda, pero el botón sigue sin escuchar los clicks. No sé si sea porque estoy en celular y se necesite un evento especial para eso, pero muchas gracias. el 20 jul. 2021 a las 0:16

1 respuesta 1

0

La idea y el planteamiento va bien. Pero hay algunos errores de código Este es el código funcionando.
¿Qué estaba equivocado? Una comparación con signo = ((times = multiples_number) debes poner == ó ===
Un if else con la primera parte vacía Usas querySelect, eso devuelve colecciones. Debes usar getElementById(id) Para anotar en la página no uses write, usa innerHTML = "mensaje" Para leer de los input usa getElementById(id del input).value Creo que es todo.
En cuando a la lógica te lo he corregido para considerar el número base como múltiplo de si mismo y calcula los siguientes, por eso times comienza en 2.

function calculateMultiples (base_number,multiples_number)
{
  var times = 2;
  var currentNumber = 0;
  var result= base_number;
  while (times <= multiples_number) { 
        currentNumber = base_number * times;
        result = result + ", "+currentNumber;
        times++;
  }

document.getElementById("resultArea").innerHTML = result;
}

 var resultArea = document.querySelector("resultArea");

//Parte donde se supone que debería estar el evento de escuchar los clicks del susodicho botón
const generate = document.getElementById("generate");
generate.addEventListener("click", function (generate_itext){
        var base_number = document.getElementById("base_number").value;
        var multiples_number = document.getElementById("multiples_number").value;
        calculateMultiples(base_number, multiples_number);
});
 <!-- Número base -->
        <li><p>N&uacute;mero base:</p><input name="base_number" type="number" placeholder="N&uacute;mero" id="base_number"></li>
        
    <!-- Número de múltiplos -->
        <li><p>N&uacutemero de m&uacute;ltiplos:</p><input name="multiples_number" type="number" placeholder="N&uacute;mero" id="multiples_number"></li>
        <p>Nota: si no escribes n&uacute;meros no podr&aacute;s calcular nada.</p>
    </ul>
    <br><br>
    
    <!-- Botón de generar -->
    <div class="button" id="generate" style="margin-left: 50px;"><h4 id="generate_itext">Generar</h4></div>
    <br><br><br><br> 
    <!-- Área de resultados -->
    <h2 style="font-size: 40px; margin-left: 40px;">Resultado</h2>
    
    <p id="resultArea">Aqu&iacute; saldr&aacute;n los resultados.</p>
   

EDITO
Después de leer el comentario creo que se cual es el problema. Este script debe aparecer cuando la página está cargada, para permitir que encuentre el botón. Así que lo más simple es colocarlo al final de la página justo antes del body (por simplicidad).
También puede lanzarse con un evento y en la función iniciar meteríamos la parte que asigna el evento.

4
  • Muchas gracias por tu ayuda, pero el botón sigue sin escuchar los clicks. No sé si sea porque estoy en celular y se necesite un evento especial para eso, pero muchas gracias. el 19 jul. 2021 a las 23:39
  • Algo se te escapa porque funciona bien. Pruébalo aquí o si quieres verlo on line lo tienes aquí javascript.espaciolatino.com/muestras/multiplos.htm
    – Juan
    el 20 jul. 2021 a las 9:39
  • ¡Gracias, Juan! Al final ese resultó ser el problema: no encontrar el botón. También, muchísimas gracias por corregir mi código; es una de mis primeras programaciones en JavaScript y no sabía cambiar el orden de carga. Muchas gracias, Juan. Ten un excelente día. :D el 20 jul. 2021 a las 17:23
  • Me alegra que te haya servido y hayas aprendido cosas.
    – Juan
    el 20 jul. 2021 a las 17:33

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.