Objects, function with parameters

Question

Well, i am trying to make follow an element the mouse cursor. and i actually did it. with this simple code here:

let element = document.getElementsByTagName('div')[0];

const moves = (e) =>{
  element.style.left = e.pageX + 'px';
  element.style.top = e.pageY + 'px';
}
document.addEventListener('mousemove', moves);

<div style="background-color:black;width:50px;height:50px"></div>

but I would like to put this code into an object. After some attempts I have come to this conclusion:

let navicella = {
    navicella: document.getElementById('navicella'),
    volo: function (e) {
        console.log((e)); //problem here
        this.navicella.style.left = (e).pageX + 'px';
        this.navicella.style.top = (e).pageY + 'px';
        this.document.addEventListener('mousemove', update);
    }
};

function update() {
    navicella.volo();
}

<body onload="update()">
    <div id="navicella"></div>

And with it, problems came too. Any ideas?

`document.getElementsByTagName('div')[0]` is really bad code. [Read this](https://stackoverflow.com/questions/54952088/how-to-modify-style-to-html-elements-styled-externally-with-css-using-js/54952474#54952474) for why and a better way to do it. — Scott Marcus, Feb 23 '21 at 20:52

score 0 · Answer 1 · answered Feb 23 '21 at 20:50

0

let navicella = {
    navicella: document.getElementById('navicella'),
    volo: function (e) {
        console.log(e);
        this.navicella.style.left = e.pageX + 'px';
        this.navicella.style.top = e.pageY + 'px';
    }
};
document.addEventListener('mousemove', update);

Dont put your event variable in parenthesis after the function declaration. Also you don't need to do this.document document is globally available. Also dont call the event listener in the update function. That listener only needs to be called once.

answered Feb 23 '21 at 20:50

TheBigW

54
1

`update` is not defined. Did you mean `navicella.volo`? – Akxe Feb 23 '21 at 20:54
Having an extra set of parenthesis around `e` in the `console.log()` is not needed, but won't cause a problem. – Scott Marcus Feb 23 '21 at 20:55
He has a function declaration for update that calls navicella.volo. Scott, Yes that wouldnt cause the error, but recursively calling a event listener would. – TheBigW Feb 23 '21 at 20:57

Scott Marcus · Accepted Answer · 2021-02-24T15:08:08.560

Your primary problem is that you are hard-coding the DOM element into your object instead of passing it into your volo function, which makes your object more scalable in the first place.

Then e will be a reference to the DOM element and the rest of the function can operate on e, rather than this.

html,
body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

#navicella {
  position: absolute;
  top: 50%;
  left: 50%;
  width:20px;
  height: 20px;
  transform: translate(-50%, -50%);
  background-color: black
}

<div id="navicella"></div>

<!-- Instead of an onload event handler, just place your <script>
     just before the closing body tag so that by the time the script
     is reached all the HTML will have been parsed. -->
     
<script>
  let navicellaSystem = {
    volo: function(element) {
      document.addEventListener('mousemove', function(event) {update(event, element) });
    }
  };

  function update(event, element) {
    element.style.left = event.pageX + 'px';
    element.style.top = event.pageY + 'px';
  }
  
  navicellaSystem.volo(document.getElementById('navicella'));
</script>

Hey man thank you for the advises!, i studied your code and actually you made the reverse mode of what i had in mind. So i just reversed it, but i don't like it. Could you check it? — Zambon, Feb 23 '21 at 22:49

score 0 · Answer 3 · answered Feb 23 '21 at 22:48

Ok so i have done this:

let navicellaSystem = {
  navicella: document.getElementById('navicella'),
  volo: function(e) {
    e.addEventListener('mousemove', update);
  }
};
navicellaSystem.volo(document.body);

function update(x) {
  document.getElementById('navicella').style.left = x.pageX + 'px';
  document.getElementById('navicella').style.top = x.pageY + 'px';
}

html,
body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

#navicella {
  position: absolute;
  top: 50%;
  left: 50%;
  width:20px;
  height: 20px;
  transform: translate(-50%, -50%);
  background-color: black
}

<div id="navicella"></div>

But i don't really like the script... Are there any other ways?

Again, you shouldn't be storing the element that you wish to hook up an event handler to in the object, that should be passed in so that your object can handle many different objects. Also, `document.body` wouldn't really even be the right thing to pass in. It would just be `document`. Then, when you call `update()`, you should be passing a reference to the element, so that it doesn't have to be hard-coded again. — Scott Marcus, Feb 23 '21 at 22:55

Objects, function with parameters

3 Answers3