1

Estoy creando un formulario de campos para un proyecto de productos. Cada input muestra el valor que el usuario ingresa con un pequeño valor que se agrega.

En cuanto el usuario ingresa para hacer eso, lo que hice fue crear variables para cada campo. Sé, que tal vez, no es la manera correcta, pero mi conocimiento en el tema de JavaScript es limitado y pues, fue la manera en que pude hacerlo. Ahora, todo bien.

Sin embargo, al tener cada variable un trozo concatenado, si el usuario no ingresa nada en el campo, pues, va a lanzar el valor que tiene concatenado.

Ejemplo:

var oP1 = "//" + document.getElementById("oP1").value;

Si el usuario no ingresa texto en este campo, pues, igual. Va a lanzar el valor "//".

Ahora bien, si agrego una condición que indique que si el valor es igual a cero me funciona bien.

Ejemplo:

if (document.getElementById("oP1").value.length == 0) {
  oP1 = "";
}

Hasta ahí todo bien. El pequeño detalle es que son muchos inputs. Al ser muchos inputs tendría que agregarle una condición a cada uno.

Mi pregunta es, ¿existe alguna manera de hacer esto con alguna función para no tener que generar tantas condicionales?

Agradezco la ayuda.

Por acá dejo el código:

HTML

<input id="selectName1" class="" type="text" value="" placeholder="Nombre"> <br>
<input id="oP1" class="ops" type="text" value="" placeholder="Opcion">
<input id="oP1price" class="ops" type="text" value="" placeholder="Precio"><br>
<input id="oP2" class="ops" type="text" value="" placeholder="Opcion">
<input id="oP2price" class="ops" type="text" value="" placeholder="Precio"><br>
<input id="oP3" class="ops" type="text" value="" placeholder="Opcion">
<input id="oP3price" class="ops" type="text" value="" placeholder="Precio"><br>
<input id="oP4" class="ops" type="text" value="" placeholder="Opcion">
<input id="oP4price" class="ops" type="text" value="" placeholder="Precio"><br>
<input id="oP5" class="ops" type="text" value="" placeholder="Opcion">
<input id="oP5price" class="ops" type="text" value="" placeholder="Precio"><br>

JavaScript

var selectName1 = "::" + document.getElementById("selectName1").value;
var oP1 = "//" + document.getElementById("oP1").value;
var oP1price = "((" + document.getElementById("oP1price").value + "))";
var oP2 = "//" + document.getElementById("oP2").value;
var oP2price = "((" + document.getElementById("oP2price").value + "))";
var oP3 = "//" + document.getElementById("oP3").value;
var oP3price = "((" + document.getElementById("oP3price").value + "))";
var oP4 = "//" + document.getElementById("oP4").value;
var oP4price = "((" + document.getElementById("oP4price").value + "))";
var oP5 = "//" + document.getElementById("oP5").value;
4
  • 1
    Muchas gracias por la ayuda Commented el 14 feb. 2021 a las 19:46
  • Tranquilo @Angelo :) Commented el 14 feb. 2021 a las 19:47
  • Puedes intentar dando la misma clase a todos esos elementos, obtener todos ellos en una variable, iterarlos y con un condicional evaluar si no tienen valor y en caso de que no pues simplemente igualas a cero o una cadena vacía
    – user128299
    Commented el 14 feb. 2021 a las 19:56
  • @AngeloAguilar, efectivamente sí. Sin embargo, ¿nos podría indicar qué salida esperas? Es decir, que cadena de texto que esperas que se forme en función de los datos concatenados. Commented el 14 feb. 2021 a las 21:43

1 respuesta 1

0

En lugar de usar un id en cada elemento quizás deberías usar una clase para obtener todos los elementos deseados y luego iterar en una lista que los contenga todos y aplicar la condicional al interno del ciclo.

Acá un ejemplo de como hacerlo usando un ciclo for:

HTML

<input class="myInput" />
<input class="myInput" />

JavaScript

// Crea lista con todos los elementos de la clase myInput
var listaInputs = document.getElementsByClassName("myInput");

// Itera en los elementos de la lista
for (let i = 0; i < listaInputs.length; i++) {
    if (listaInputs[i].value == "") {
        // Si el valor del elemento está vacío
        // haz algo, por ejemplo:
        listaInputs[i].value = "test"; // cambia el valor del elemento
    } else {
        // Si el valor del elemento NO está vacío
        // haz algo diferente...
    }
};

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.