Skip to main content

Insertar datos de JavaScript en HTML

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>