2

En este caso lo que estoy queriendo lograr es ingresar el valor en el input y ver el resultado eso se ejecuta y se muestra correctamente el problema es que al darle click me mustra solo el resultado de la operacion pero no los titulos ej.: Curso de Javascript Ejercicio de tabla de multiplicar y la tabla

function multiplicar() {
  let cabeza = document.getElementById("cabecera").innerHTML;
  let input = document.getElementById("numero").value;
  let contador = 2;

  document.write(cabeza + "</br>");

  while (contador <= 10) {
    document.write(input + " x " + contador + " = " + contador * input + "</br>");
    contador++;
  }
}
<!DOCTYPE html>
<html lang="en">
  <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>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div id="cabecera">
    <h1>Curso de Javascript</h1>
    <h3>Ejercicio de tabla de multiplicar</h3>
    <form>
      <input type="number" id="numero" />
      <button  onclick="multiplicar()">Consultar</button>
      </div>
      <br/><br/>
    </form>
      </body>
</html>

5
  • Usar document.write luego de que el documento fue cargado completamente, borra todo el contenido html. El snippet está mal como tal, 2 de las etiquetas del html no cierran una con otra. Si nos indicas el resultado como dicen arriba, se puede ayudar.
    – javdromero
    Commented el 23 ene. 2023 a las 19:46
  • A que te refieres que no sale? yo lo ejecuto y luego de presionar el botón consultar, si puedo ver los textos de "Curso de Javascript" y de "Ejercicio de tabla de multiplicar"
    – Pipe
    Commented el 23 ene. 2023 a las 19:49
  • buenas cuando vuelvo a ingresar otro valor y consultar solo me sale la tabla del 1 al 10 con los resultado de cada uno pero no me vuleve a a mostrar "Curso de Javascript" y de "Ejercicio de tabla de multiplicar" y el input para volver a ingresar de vuelta otro valores Commented el 23 ene. 2023 a las 19:55
  • 1
    @MarceloJoseSosaSosa me avisas si mi respuesta es lo que necesitabas. Commented el 23 ene. 2023 a las 21:16
  • 1
    Muchisimas gracias por la ayuda Cris223511.dev es justo lo que necesitaba ni mas ni menos gracias a tu respuesta me ayudaste a comprender mejor muchas cosas genio Total !!!! Commented el 24 ene. 2023 a las 0:09

1 respuesta 1

2

Podrías usar innerHTML en vez de document.write(), tendrías que crear un nuevo div debajo para mostrar los resultados, y cuando digitas otro número, el contenido del nuevo div se va a sobrescribir con los nuevos resultados. También me percaté que al volver a digitar y enviar el formulario (ya que es un form), ocurre el evento del submit, redirigiéndote a una página en blanco y así estarías perdiendo todos los datos, puedes evitar esto usando preventDefault(). Ejemplo:

function multiplicar(e) {
  e.preventDefault(); // evito el evento por defecto del submit
  let input = document.getElementById("numero").value; // obtengo al número.
  let resultado = document.getElementById("resultado"); // obtengo al div "resultado".
  let contador = 2;

  resultado.innerHTML = ""; // vacío el contenido del div "resultado".

  resultado.innerHTML += "Tabla de multiplicar del " + input + ":</br></br>"

  while (contador <= 10) {
    let fila = input + " x " + contador + " = " + contador * input + "</br>";
    resultado.innerHTML += fila; // y cada fila (que será repetida por el while) lo muestro en el div "resultado".
    contador++;
  }
}
<div id="cabecera">
  <h1>Curso de Javascript</h1>
  <h3>Ejercicio de tabla de multiplicar</h3>
  <form>
    <input type="number" id="numero" />
    <button onclick="multiplicar(event)">Consultar</button>
    <br/><br/>
    <div id="resultado"></div>
  </form>
</div>

Tu Respuesta

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

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