Soy nuevo en js y estoy tratando de recorrer elementos por nombre de clase y hacer un cambio en el contenido de texto del elemento usando javascript. Lo siguiente es lo que tengo hasta ahora, pero esto no funciona.
<script type="text/javascript"> function dformat(i) { var hasDate = document.getElementsByClassName("dformat")[i].textContent.trim().includes("/"); if(hasDate === false) { window.setTimeout(dformat, 100); /* this checks the flag every 100 milliseconds*/ } else { dateString = document.getElementsByClassName("dformat")[i].textContent.trim(); const options = { year: 'numeric', month: 'short', day: 'numeric' }; let dateArr = dateString.split("/"); var sMonth = dateArr[0]; var sDay = dateArr[1]; var sYear = dateArr[2]; let newDateString = sYear + "/" + sMonth + "/" + sDay let newDate = new Date(newDateString); document.getElementsByClassName("dformat")[i].textContent=newDate.toLocaleDateString('en-us', options); } } var ditems = document.getElementsByClassName("dformat"); for (var i = 0; i < ditems.length; i++) { dformat(i); } </script>El siguiente es un ejemplo de uno de los elementos
<span class="dformat">26/06/1992</span>El resultado esperado sería haber cambiado el texto en cada uno de los elementos con clase dformat
Actualización: probé la misma función con getelementbyid en un solo elemento (es decir, sin un bucle for) y obtuve el resultado esperado. Tengo problemas para hacer lo mismo en un conjunto de elementos por nombre de clase en lugar de un solo elemento por id.
Supongo que algún valor te da una excepción.
Prueba esto:
var ditems = document.getElementsByClassName("dformat"); for (var i = 0; i < ditems.length; i++) { try { dformat(i); } catch (error) { console.error(error); } }Si funciona, registre la i en la excepción para ver el valor que falla.
setTimeout() olvidará en qué índice está ejecutando dformat . Debe usar setTimeout(dformat, 100, i) para pasar el parámetro a la siguiente llamada, de modo que pueda tener varias esperas independientes ejecutándose a la vez.
No hay nada malo con su bucle for, el problema está en su construcción de objeción de Date . Las Date no se pueden crear con el formato AAAA/MM/DD. (Consulte la sección de advertencia aquí ). Lo que debe hacer es pasar el año, el mes y el día como parámetros al constructor.
let newDate = new Date(sYear, sMonth, sDay);Algunas otras notas...
No necesita usar document.getElementsByClassName para encontrar los elementos cada vez. Simplemente puede pasar el elemento directamente a la función.
function dformat(e) { dateString = e.textContent.trim(); if (!dateString.includes('/')) { window.setTimeout(dformat, 100, e); return; } const options = { year: 'numeric', month: 'short', day: 'numeric' }; let dateArr = dateString.split("/"); var sMonth = dateArr[0]; var sDay = dateArr[1]; var sYear = dateArr[2]; let newDate = new Date(sYear, sMonth, sDay); e.textContent=newDate.toLocaleDateString('en-us', options); } var ditems = document.getElementsByClassName("dformat"); for (var i = 0; i < ditems.length; i++) { dformat(ditems[i]); }Aquí hay un fragmento de código que muestra esto en acción.
function dformat(e) { dateString = e.textContent.trim(); if (!dateString.includes('/')) { window.setTimeout(dformat, 100, e); return; } const options = { year: 'numeric', month: 'short', day: 'numeric' }; let dateArr = dateString.split("/"); var sMonth = dateArr[0]; var sDay = dateArr[1]; var sYear = dateArr[2]; let newDate = new Date(sYear, sMonth, sDay); e.textContent=newDate.toLocaleDateString('en-us', options); } var ditems = document.getElementsByClassName("dformat"); for (var i = 0; i < ditems.length; i++) { dformat(ditems[i]); } <span class="dformat">26/06/1992</span> <br> <span class="dformat">27/06/1992</span> <br> <span class="dformat">28/06/1992</span> <br> <span class="dformat">29/06/1992</span> En segundo lugar, si usa setTimeout , deberá pasar el elemento a la función. Tal como lo tiene, la función se llamará sin argumentos, por lo que se rompería si alguna vez encontrara algo sin / . Puedes ver cómo lo hice arriba para arreglar eso.
Sospecho un poco de usar setTimeout de esta manera. Esto solo permite formatear los intervalos una vez, si realmente desea un monitoreo continuo, deberá establecer constantemente el tiempo de setTimeout fuera de la definición de la función en el script principal. O si solo necesita esperar a que el documento esté listo, debe colocar sus scripts después de su contenido HTML y eso no será un problema. (Ver aquí ). No especularé más ya que ese no es el propósito de esta pregunta, pero quería hacerle saber que algo parece estar mal allí.