Tengo valores que extraigo de una API, que luego agrego dinámicamente al HTML. He escrito una función para asignar todos los valores que regresan como nulos para que se muestren como el texto "No disponible". Necesito apuntar a todas las etiquetas que contienen los valores nulos (por ejemplo, <h2></h2> en <h2>${input.value}</h2> y agregue una clase para mostrarlos de manera diferente al resto de las entradas. No hay forma de saber qué valor será nulo, y cambiará cada vez que alguien use el programa. También , el tipo de etiqueta contenedora cambiará dependiendo de dónde se muestre el valor en la página, a veces una h2, p u otra etiqueta. Lo he intentado,
const notAval = (input) => { if(!input) { input = 'Not Available' } const allInBody = document.querySelectorAll('body > *') allInBody.forEach (element => { if(input === 'Not Available') { element.classList.add('not-aval') } }) return input }esto es seleccionar el elemento principal, por ejemplo, si el pie de página tiene el texto de destino, el pie de página es el destino y le agrega la clase, pero necesito orientar la etiqueta que realmente contiene el texto.
Soy consciente de que puede usar: contiene en jQuery pero estoy tratando de usar Vanilla JS
¡¡Gracias por tu ayuda!!
Editar: el contenido de esta pregunta cambió después de que publiqué esta respuesta.
Estás cometiendo un par de errores en el código que pegaste.
const notAval = (input) => { if(!input) { input.classList.add('not-avail') } return input }En la función anterior, está comprobando si la entrada es nula. Entonces le está diciendo a su programa que le agregue una clase si es nulo. Esto siempre resultará en un error.
Debe verificar si la entrada es nula, luego agregue el texto que desea al elemento html en el que debería estar.
const el = document.textContent.includes('Not Available') if(!input) { el.classList.add('not-avail') return 'Not Available' }En la función anterior, está configurando el en un valor booleano y no en un elemento html. Obtiene un error porque está tratando de agregar una clase a un bool.
Debe verificar si el contenido del texto incluye la cadena que desea, luego agregue la clase al elemento en sí.