Mouse eventListener does not work

Question

Mouse eventListener does not work

Navigation

#1 by (1 votes)

2

I took this example below the book "Eloquent JavaScript" 2nd edition in Portuguese pg.184.

The goal is to draw points on the screen using clicks: every time the mouse is clicked, a blue dot is created where the mouse is pointing.

But beyond the beige style that is applied to the background, nothing else happens. I have already reviewed for syntax errors and can not find anything ... I tried declaring the style in the head, and it also did not change anything.

Follow the code:

<!DOCTYPE html>
<html>
<body>
<!-- Estilo do body, e da classe .dot-->
<style>
    body {
        height:200px;
        background:beige;
    }
    .dot{
        height:8px; width:8px;
        border-radius: 4px;
        background: blue;
        position:absolute;
    }
</style>

<!-- Para obter informações precisas sobre o local onde aconteceu um evento do mouse você pode olhar para as
suas propriedades pageX e pageY , que contêm as coordenadas do evento(em pixels) em relação ao canto
superior esquerdo do documento. -->

<script>
    addEventListener("click", function(event){
                    var dot = document.createElement("div");
                    dot.className("dot");
                    dot.style.left = (event.pageX -4) + "px";
                    dot.style.top = (event.pageY -4) + "px";
                    document.body.appendChild(dot);
    });
</script>
</body>
</html>

javascript html css

asked by anonymous 15.04.2018 / 19:55

1 answer

I want to know how to pass an object to the activity using the following code How to add a class to an HTML element, through JavaScript. In my case, I need to add a class in the h1 element below

score 1 · Accepted Answer

className is not a function, the correct one would be className = "dot"

<!DOCTYPE html>
<html>

<body>
  <!-- Estilo do body, e da classe .dot-->
  <style>
    body {
      height: 200px;
      background: beige;
    }
    
    .dot {
      height: 8px;
      width: 8px;
      border-radius: 4px;
      background: blue;
      position: absolute;
    }
  </style>

  <!-- Para obter informações precisas sobre o local onde aconteceu um evento do mouse você pode olhar para as
suas propriedades pageX e pageY , que contêm as coordenadas do evento(em pixels) em relação ao canto
superior esquerdo do documento. -->

  <script>
    addEventListener("click", function(event) {
      var dot = document.createElement("div");
      dot.className = "dot";
      dot.style.left = (event.pageX - 4) + "px";
      dot.style.top = (event.pageY - 4) + "px";
      document.body.appendChild(dot);
    });
  </script>
</body>

</html>