0

No aplica style al utilizar name="area" como referencia de las etiquetas: ¿Qué sucede?

Javascript:

<script>
  var area = document.getElementsByName("area").innerHTML;
  if (area == "Superior") {
    document.getElementsByName("area").style.backgroundColor = "#ff0000";
  }
  if (area == "Inferior") {
    document.getElementsByName("area").style.backgroundColor = "#0000ff";
  }
</script>

HTML:

<p name="area">Superior</p>
<p name="area">Inferior</p>
<p name="area">Inferior</p>
<p name="area">Superior</p>
4
  • 1
    El método getElementsByName devuelve una colección de elementos, tendrás que iterar por ellos para aplicar el estilo. el 1 may. 2020 a las 14:34
  • ¿Con class sucede lo mismo?
    – ret
    el 1 may. 2020 a las 14:34
  • ¿Probablemente hay mejores alternativas para esto?
    – ret
    el 1 may. 2020 a las 14:35
  • Julián, sucede lo mismo con todos los métodos para obtener elementos que su nombre comienza con getElements, en plural. Son arrays y nadie tiene problema con ellos, exceptuando los que no lo saben aún. Otras opciones pueden ser usar jQuery
    – Mateo
    el 1 may. 2020 a las 14:54

2 respuestas 2

2

Si lo que deseas es que se indpendiente a su posicion, deberas hacer un for que recorra todos los elementos con name="area"

var areas = document.getElementsByName("area");
areas.forEach((area) => {
  if (area.innerText == "Superior") {
    area.style.backgroundColor = "#ff0000";
  } else if (area.innerText == "Inferior") {
    area.style.backgroundColor = "#0000ff";
  }
})
<p name="area">Superior</p>
<p name="area">Inferior</p>
<p name="area">Inferior</p>
<p name="area">Superior</p>

1

Como bien ya te mencionaron al tener un conjunto de valores devueltos, deberías:

  • Iterar sobre ellos
  • Elegir los deseados por medio del índice que ocupa el valor deseado

Puedes por ejemplo a través de getElementsByName recuperar los elementos que tengan un name con el valor de area, posterior verificar si los elementos en los índices 0 y 1 cumplen con una condición y en caso afirmativo darle un valor

Lo anterior lo lograrás colocando el índice entre corchetes

<p name="area">Superior</p>
<p name="area">Inferior</p>
<p name="area">Inferior</p>
<p name="area">Superior</p>

<script>
  var area = document.getElementsByName("area");
  if (area[0].innerText == "Superior") {
    document.getElementsByName("area")[0].style.backgroundColor = "#ff0000";
  }
  if (area[1].innerText == "Inferior") {
    document.getElementsByName("area")[1].style.backgroundColor = "#0000ff";
  }
</script>

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.