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. Commented el 1 may. 2020 a las 14:34
  • ¿Con class sucede lo mismo?
    – ret
    Commented el 1 may. 2020 a las 14:34
  • ¿Probablemente hay mejores alternativas para esto?
    – ret
    Commented 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
    Commented 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

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.