0

tengo lo siguiente, ya que como la clase product no la alcanza a leerla ni estando dentro del document ready, entonces que se repita cada x tiempo.

setInterval(displayHello, 2000);
function displayHello() {

    $(".product").each(function() {
        Skuquanty = $(this).text();
        $(this).html("<div><button class='menos' name='menos' type='button'>-</button><input name='contador' type='text' value='" + Skuquanty + "'><button class='mas' name='mas' type='button'>+</button></div>");
    });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="product" data-index="0">3</div>
<div class="product" data-index="1">3</div>
</body>

Pero el value se rompe sale "-+" en lugar de traer el numero "3".

Que estoy haciendo mal?

5
  • Ese código es incorrecto. Cómo estás incluyendo el script en el documento HTML? Si usar document.ready no funciona es un problema de implementación (tuyo), no de la funcionalidad.
    – Alfabravo
    Commented el 23 jun. 2022 a las 19:01
  • estan por separado, no puse las comillas para separarlo en la pregunta Commented el 23 jun. 2022 a las 19:03
  • cabe que aclarar que la función se ejecuta con normalidad solo que me rompe el value. Commented el 23 jun. 2022 a las 19:10
  • Con la edición que hice de tu pregunta, el problema es evidente. Necesitas actualizar eso cada 2 segundos??? EL problema es que un input no tiene text
    – Alfabravo
    Commented el 23 jun. 2022 a las 19:45
  • si cada cierto tiempo, ya sea 3 o 4 segundos. Entonces como podria obtener el 3 que no sea el .text? Commented el 23 jun. 2022 a las 19:48

1 respuesta 1

1

Gracias por la aclaración.

Mira lo que pasa ahora que tu ejemplo está en la pregunta de forma que puede ejecutarse (usando tus aclaraciones). Sí muestra el 3, al comienzo.

Lo que pasa después es que el .text() lee el contenido del div y lo pone en el fragmento HTML que creaste. La siguiente ejecución de setInterval lee ese .text() pues... dentro hay ahora todo un fragmento que no se procesa con text(), así que el resultado de ese selector es vacío. No es que se rompa la ejecución

Si eres ordenado con los input, los identificas como debe ser (con un id único) y luego usas ese ID para obtener el valor, puedes incluso validar en la primera ejecución si tienes el texto o el valor; después de la segunda ejecución, el texto estará vacío pero el val() de tu input tendrá el 3 que esperabas y se mantendrá.

setInterval(displayHello, 2000);
function displayHello() {
    i = 0;
    $(".product").each(function() {
        Skuquanty = $(this).text();
        pepito = $("#inputprod"+i).val();
        newVal = isNaN(pepito) ? Skuquanty : pepito;
        $(this).html("<div><button class='menos' name='menos' type='button'>-</button><input name='contador' type='text' id='inputprod"+i+"' value='" + newVal + "'><button class='mas' name='mas' type='button'>+</button></div>");
        i++;
    });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="product" data-index="0">3</div>
<div class="product" data-index="1">3</div>
</body>

1

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.