1

Estoy intentando meter en el HTML de una página unos valores de variables. Lo estoy haciendo modificando el contenido de unos div y usando el innerHTML .

Pero el problema es que si los insertan no duran, es como que aparecen un instante y desaparecen.

class Productosalimenticios {
  constructor(codigo, nombre, precio) {
    this.codigo = codigo;
    this.nombre = nombre;
    this.precio = precio;
  }
  imprimedatos() {
    return (
      "el producto" +
      this.nombre +
      "con el codigo" +
      this.codigo +
      "con un precio" +
      this.precio
    );
  }
}

function Create_products() {
  var codigo = document.getElementById("codigo").value;
  var nombre = document.getElementById("nombre").value;
  var precio = document.getElementById("precio").value;

  var producto1 = new Productosalimenticios(codigo, nombre, precio);

  codigo = document.getElementById("codigo2").value;
  nombre = document.getElementById("nombre2").value;
  precio = document.getElementById("precio2").value;

  var producto2 = new Productosalimenticios(codigo, nombre, precio);

  codigo = document.getElementById("codigo3").value;
  nombre = document.getElementById("nombre3").value;
  precio = document.getElementById("precio3").value;

  var producto3 = new Productosalimenticios(codigo, nombre, precio);

  var productos = [producto1, producto2, producto3];

  for (var i = 0; i < 3; i++) {
    document.getElementById("salida" + (i + 1)).innerHTML = productos[
      i
    ].imprimedatos();
  }
}
<div class="salida1" id="salida1"></div>
<div class="salida2" id="salida2"></div>
<div class="salida3" id="salida3"></div>

11
  • Puedes añadir de donde viene productos y la función imprimedatos();
    – DevMind
    Commented el 6 abr. 2019 a las 20:15
  • ya lo tienes implementado en la pregunta Commented el 6 abr. 2019 a las 20:20
  • ¿Acaso productos es un Array? Commented el 6 abr. 2019 a las 20:47
  • si es un array var producto3 = new Productosalimenticios(codigo,nombre,precio); Commented el 6 abr. 2019 a las 20:48
  • el caso es que los muestra en el documento html pero dura 1 milisegundo. Commented el 6 abr. 2019 a las 20:51

2 respuestas 2

1

Prueba este código, me funciono espero te sea util

class Productosalimenticios {
  constructor(codigo, nombre, precio) {
    this.codigo = codigo;
    this.nombre = nombre;
    this.precio = precio;
  }

  imprimedatos() {
    return 'el producto ' + this.nombre + ' con el codigo ' + this.codigo + ' con un precio ' + this.precio;
  }
}

function producto(codigo, nombre, precio) {
  function obtValor(id) {
    return document.getElementById(id).value;
  }

  var codigo = obtValor(codigo);
  var nombre = obtValor(nombre);
  var precio = obtValor(precio);
  return new Productosalimenticios(codigo, nombre, precio);
}

function Create_products() {
  var producto1 = producto("codigo", "nombre", "precio");
  var producto2 = producto("codigo2", "nombre2", "precio2");
  var producto3 = producto("codigo3", "nombre3", "precio3");

  var productos = [producto1, producto2, producto3];

  for(var i = 0; i < productos.length; i ++) {
    document.getElementById('salida'+(i+1)).innerHTML = productos[i].imprimedatos();
  }
}
2
  • 2
    Por favor siempre considera explicar el código de tus respuestas, pues solo poner un fragmento de código sin más contexto se considera de baja calidad
    – user75901
    Commented el 7 abr. 2019 a las 0:29
  • buenas muchas gracias por el comentario, pero la he provado y no funciona. he porvado en diferentes navegadores como (safari, google chrome, firefox) y en todos pasa exactamente lo mismo dura una milesima de segundo. lo unico que se me ocurre es probar en un sistema que no sea MacOS. Commented el 7 abr. 2019 a las 12:42
1

he encontrado el error pero quisiera una explicacion o que creeis vosotros.

la solucion consta de llamar en el HTML en vez de con un input de tipo submit como lo tenia es cambiarlo por un button.

  <form class="formulario">
      <h1>producto 1</h1>
          Codigo: <input type="text" name="codigo" id="codigo" value="Codigo del producto">
          Nombre: <input type="text" name="nombre" id="nombre" value="nombre">
          precio: <input type="text" name="precio" id="precio" value="precio">
      <h1>  producto 2</h1>
          Codigo: <input type="text" name="codigo" id="codigo2" value="Codigo del producto">
          Nombre: <input type="text" name="nombre" id="nombre2" value="nombre">
          precio: <input type="text" name="precio" id="precio2" value="precio">
      <h1>  producto 2 </h1>
          Codigo: <input type="text" name="codigo" id="codigo3" value="Codigo del producto">
          Nombre: <input type="text" name="nombre" id="nombre3" value="nombre">
          precio: <input type="text" name="precio" id="precio3" value="precio">
          <input type="submit"  value="enviar" onclick="Create_products()">
    </form>

lo he cambiado a esto

        <form class="formulario">
      <h1>producto 1</h1>
          Codigo: <input type="text" name="codigo" id="codigo" value="Codigo del producto">
          Nombre: <input type="text" name="nombre" id="nombre" value="nombre">
          precio: <input type="text" name="precio" id="precio" value="precio">
      <h1>  producto 2</h1>
          Codigo: <input type="text" name="codigo" id="codigo2" value="Codigo del producto">
          Nombre: <input type="text" name="nombre" id="nombre2" value="nombre">
          precio: <input type="text" name="precio" id="precio2" value="precio">
      <h1>  producto 2 </h1>
          Codigo: <input type="text" name="codigo" id="codigo3" value="Codigo del producto">
          Nombre: <input type="text" name="nombre" id="nombre3" value="nombre">
          precio: <input type="text" name="precio" id="precio3" value="precio">

    </form>
  <button onclick="Create_products()">enviar</button>  

a si he tenido un resultado correcto pero no entiendo porque. Supongo que el sumbit va mas relacionado con el envio del formulario y durara lo que dura la ejecucion del mismo. Y el input pues es mas como para ejecutar algo. vamos que aun asi no lo tengo muy claro.

2
  • Estimado @andres ribeiro, el boton submit envia el formulario al servidor para ser procesado y te devuelve una respuesta que este caso la misma pagina, pero antes de que ocurra todo este se ejecuta el evento onclick que despliega los valores lo cual hace bien pero dura apenas unos segundos porque el submit treae nuevamente la pagina refrescando su contenido.
    – fwBasic
    Commented el 7 abr. 2019 a las 13:50
  • muchas gracias por la explicacion ahora lo entiendo. muchas gracias Commented el 7 abr. 2019 a las 13:52

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.