CODEWITHSUNDEEP
javascripthtmlcolors
max s
max s

Reputation: 11

JS RandomColor Change on hover

I want to change the color randomly on hovering <a class="c-link" but it doesn't work and I wonder what I am doing wrong here.

<!doctype html>
<html>

<script>
  window.onload = function() {
    function randomColor() {
      let color = [];
      for (let i = 0; i < 3; i++) {
        color.push(Math.floor(Math.random() * 256));
      }
      return 'rgb(' + color.join(', ') + ')';
    }

    document.querySelector('c-link').addEventListener("mouseover", function() {
      document.a.style.fontcolor = randomColor();
    });
  }
</script>
</head>

<body>

  <div class="c-text__layer">
    <div class="c-text">Lorem ipsum dolor sit amet consetetur,<br> sadipscing elitr,
      <a class="c-link" href="https://stackoverflow.com/"> sit amet dolor</a></div>
  </div>
</body>

</html>

Upvotes: 1

Views: 91

Answers (1)

F. M&#252;ller
F. M&#252;ller

Reputation: 4062

You need to specify the class with a . within the query selector. Therefore querySelector('.c-link').

You cannot just call document.a because a is not a property or method of the document object.

Also, there is style.color and style.font but not fontcolor.

Instead use another selector: querySelector('a') to select all the anchors in the document. This will affect every link though. If you only want it to work for one or a few elements you could use the data-attribute, an id or even other CSS classes instead of targeting a in the querySelector.

You can also read a bit on MDN to learn more about JS and the web.

<!doctype html>
<html>
<script>
  window.onload = function() {
    function randomColor() {
      let color = [];
      for (let i = 0; i < 3; i++) {
        color.push(Math.floor(Math.random() * 256));
      }
      return 'rgb(' + color.join(', ') + ')';
    }

    document.querySelector('.c-link').addEventListener("mouseover", function() {
      document.querySelector('a').style.color = randomColor();
    });
  }
</script>
</head>

<body>

  <div class="c-text__layer">
    <div class="c-text">Lorem ipsum dolor sit amet consetetur,<br> sadipscing elitr,
      <a class="c-link" href="https://stackoverflow.com/"> sit amet dolor</a></div>
  </div>
</body>

</html>

Upvotes: 2

Related Questions