Generate a result for each document.getElementById

Question

Generate a result for each document.getElementById

Navigation

#1 by (0 votes)

0

I have the following code js that does the following:

Shows in an orderly fashion what it recovers from an array in a select but I do not know how to make print on it if the selected product is solid or liquid .. I have blocked, and therefore I use your help. I leave only the JS code.

It is worth mentioning that you already try to place document.getElementById("tipo").innerHTML = tipo; after document.getElementById("lista").innerHTML = document.write(text); but it does not work.

producto = [
    /*
    a: Abreviacion Formula
    n: Nombre con espacio igual espacio ( = )
    v: valor inicial
    t: tipo de producto true para liq y false para sol
    */
    { c: " ", n: 'Jabon en Pasta', v: 0, t: "sol" },
    { c: " ", n: 'Ambientador', v: 0, t: "liq" },
    { c: " ", n: 'Cloro', v: 0, t: "liq" }
];
producto.sort(function(a, b) {
    if (a.n > b.n) {
        return 1;
    }
    if (a.n < b.n) {
        return -1;
    }
    // a must be equal to b
    return 0;
});
function selector() {
    // document.getElementsByTagName("option").addEventListener("click", location.reload());
    var selec = document.getElementById("mySelect").value;
    document.getElementById("formula").innerHTML = selec;
    document.getElementById("mySelect").value = "";
    document.getElementById("entrada").value = "";
    document.getElementById("salida").innerHTML = "";
    document.getElementById("procedimiento").innerHTML = "";
}

function salidaproducto() {
    text = "<select class='form-control' id='mySelect' onchange='selector();'>";
    for (li in producto) {
        var tipo = "";
        if (producto[li].t == "liq") { tipo = "Liquido"; } else { tipo = "Solido"; };
        text += "<option>" + producto[li].n + "</option>";
    }
    text += "<option value='' disabled selected hidden>Seleccione un Producto...</option>";
    text += "</select>";
    document.getElementById("lista").innerHTML = document.write(text);
}

javascript array object dom

asked by Jose M Herrera V 03.02.2018 в 21:42

source

1 answer

Variable returns me nil finishing a function Modify values in table with Laravel ajax

score 0 · Accepted Answer

If all you want is to show in the option if it is "Solid" or "liquid" you only have to add the literal to the text of the option:

producto = [
    /*
    a: Abreviacion Formula
    n: Nombre con espacio igual espacio ( = )
    v: valor inicial
    t: tipo de producto true para liq y false para sol
    */
    { c: " ", n: 'Jabon en Pasta', v: 0, t: "sol" },
    { c: " ", n: 'Ambientador', v: 0, t: "liq" },
    { c: " ", n: 'Cloro', v: 0, t: "liq" }
];

function salidaproducto() {
    text = "<select class='form-control' id='mySelect' onchange='selector();'>";
    for (li in producto) {
        var tipo = "";
        if (producto[li].t == "liq") { tipo = "Liquido"; } else { tipo = "Solido"; };
        text += "<option>" + producto[li].n + " (" + tipo + ")</option>";
    }
    text += "<option value='' disabled selected hidden>Seleccione un Producto...</option>";
    text += "</select>";
    document.getElementById("lista").innerHTML = text;
}

salidaproducto();

<div id="lista"></div>

As you can see I have also changed the way to assign the HTML code to the lista element, directly setting the value of text to the property innerHTML .

In any case I would recommend creating the HTML elements with createElement and use the DOM methods to add the elements to it:

producto = [
    /*
    a: Abreviacion Formula
    n: Nombre con espacio igual espacio ( = )
    v: valor inicial
    t: tipo de producto true para liq y false para sol
    */
    { c: " ", n: 'Jabon en Pasta', v: 0, t: "sol" },
    { c: " ", n: 'Ambientador', v: 0, t: "liq" },
    { c: " ", n: 'Cloro', v: 0, t: "liq" }
];

function salidaproducto() {
  var select = document.createElement('select');
  select.id = 'mySelect';
  select.classList.add('form-control');
  var option = document.createElement('option');
  option.disabled = true;
  option.selected = true;
  option.textContent = 'Seleccione un Producto...';
  select.appendChild(option);
  for (li in producto){
    option = document.createElement('option');
    option.textContent = producto[li].n +
      ' (' + (producto[li].t === 'liq' ? 'Líquido' : 'Sólido') + ')';
      select.appendChild(option);
  }
  document.getElementById('lista').appendChild(select);
}

salidaproducto();

<div id="lista"></div>

If you only want to show the name and show the type of the selected item in the select in another site you should use the value of option to identify the selected item. The type can be obtained from the corresponding element of the producto array:

var producto = [
    /*
    a: Abreviacion Formula
    n: Nombre con espacio igual espacio ( = )
    v: valor inicial
    t: tipo de producto true para liq y false para sol
    */
    { c: " ", n: 'Jabon en Pasta', v: 0, t: "sol" },
    { c: " ", n: 'Ambientador', v: 0, t: "liq" },
    { c: " ", n: 'Cloro', v: 0, t: "liq" }
];

function salidaproducto() {
  var select = document.createElement('select');
  select.id = 'mySelect';
  select.classList.add('form-control');
  var option = document.createElement('option');
  option.disabled = true;
  option.selected = true;
  option.textContent = 'Seleccione un Producto...';
  select.appendChild(option);
  for (li in producto){
    option = document.createElement('option');
    option.textContent = producto[li].n;
    option.value = producto[li].n;
    select.appendChild(option);
  }
  select.addEventListener('change', selector);
  document.getElementById('lista').appendChild(select);
}

function selector(){
  var productoSeleccionado = 
    producto.find(x => x.n === this.value);
  var tipoEl = document.getElementById('tipo');
  if (productoSeleccionado){
    tipoEl.innerText = (productoSeleccionado.t === 'liq'
      ? 'Líquido' : 'Sólido');
  }
  else{
    tipoEl.innerText = '';
  }
}

salidaproducto();

div{
  padding: 10px;
}

<div id="lista"></div>
<div id="tipo"></div>