Because when using "document.getElementsByClassName" the border does not change?

Question

Because when using "document.getElementsByClassName" the border does not change?

Navigation

#1 by (5 votes)
#2 by (0 votes)

2

If instead of using "document.getElementsByClassName", I use "document.getElementById" and assign an Id to it, in that case if it works, what am I doing wrong?

function resalta(elEvento) {
  var evento = elEvento || window.event;
  switch(evento.type) {
    case 'mouseover':
      this.style.borderColor = 'red';
      break;
    case 'mouseout':
      this.style.borderColor = 'green';
      break;
  }
}
 
window.onload = function() {
  document.getElementsByClassName("texto").onmouseover = resalta;
  document.getElementsByClassName("texto").onmouseout = resalta;
}

.texto{
    height:60px;
    width: 150px;
    border: solid green;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel=stylesheet href="css/estilos.css" type="text/css"/>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="js/codigo.js"></script>
    <title>Document</title>
</head>
<body>
<div class="texto">¡¡¡ANUNCIO!!!</div>

</body>
</html>

javascript

asked by Carlos Andrés Pulido Campos 05.03.2018 в 04:27

source

2 answers

Script does not work although the logic is fine Data table misorders the hours

score 5 · Answer 1

It does not work because getElementsByClassName returns an object similar to an array, so you can not directly apply onmouseover as if it were a single element.

A little documentation: link

You would have to iterate through that object if you want to do "something" with each of its elements.

Here goes a quick solution, maybe not very clean:

function resalta(e) {
  var evento = e || window.event;
  switch(evento.type) {
    case 'mouseover':
      e.target.style.borderColor = 'red';
      break;
    case 'mouseout':
      e.target.style.borderColor = 'green';
      break;
  }
}
 
window.onload = function() {
  var textos = document.getElementsByClassName("texto");

  for (var i=0, len=textos.length; i<len; i++) { 
    textos[i].addEventListener('mouseover', function(e) {
        resalta(e);
    });
    textos[i].addEventListener('mouseout', function(e) {
        resalta(e);
    });
  }
}

.texto{
    height:60px;
    width: 150px;
    border: solid green;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel=stylesheet href="css/estilos.css" type="text/css"/>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="js/codigo.js"></script>
    <title>Document</title>
</head>
<body>
<div class="texto">¡¡¡ANUNCIO!!!</div>

</body>
</html>

score 0 · Answer 2

If you access the element using getElementsByClassName, and since it is possible to wait for several elements with the same class ([0], [1], [2] ...), you have to define which of them you are going to use, in this case and since you only have one item with class "text" you should choose the element [0] of the array as well has answered @Shaz.

If you notice, get "ELEMENTS" ByClassName, imply that you expect more than one element.

It would be something like this:

window.onload = function() {
  var texto1 = document.getElementsByClassName("texto");
  texto1[0].addEventListener(......
}