reversefungi posted:

The addEventListener function registers a callback function, whose execution is delayed until everything is exhausted in the main thread and you've entered the event loop. However the "registering" happens on that main thread, and in this case you were invoking a function and registering its output, hence the immediate call.

If you're not super familiar with the event loop and really want to dig in, this video is worth watching and will pay itself back quickly by saving you hours of debugging annoying js stuff:

https://youtu.be/8aGhZQkoFbQ

fakemirage posted:

Haven't gone through everything, but I noticed the following line.

This will execute the clickOnCrimeButton function and place the result as the event handler. You'll probably want something like this:

JavaScript code:

    // add function to the button for when it is clicked
   document.getElementById(structOfCrimesIterator.name).addEventListener("click", () => clickOnCrimeButton(buttonIndex));

Which means that you'll call clickOnCrimeButton when the event happens and not before then.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

EDIT: Yeah, I think that's the problem. It's basically the same as writing the following.

JavaScript code:

var clickOnCrimeButtonOutput = clickOnCrimeButton(buttonIndex); // undefined
document.getElementById(structOfCrimesIterator.name).addEventListener("click", clickOnCrimeButtonOutput); // .addEventListener("click", undefined)

echinopsis posted:

I watched this video and I think now your post makes more sense to me lol.

echinopsis posted:

I've been looking and trying to understand arrow functions, and I can't work out why changing it to an arrow function works?

when you post:

JavaScript code:

var clickOnCrimeButtonOutput = clickOnCrimeButton(buttonIndex); // undefined
document.getElementById(structOfCrimesIterator.name).addEventListener("click", clickOnCrimeButtonOutput); // .addEventListener("click", undefined)

you're trying to say that what I had originally posted is the equivalent to that... but why?

why does

code:

   document.getElementById(structOfCrimesIterator.name).addEventListener("click",clickOnCrimeButton(buttonIndex));

split into two commands? if I am understanding correctly? does anyone understand why I am confused?

quote:

Subclassing:
You may be thinking to yourself, that’s cool, but what if I wanted to use our redCar instantiation properties on some other car? Here’s where Subclassing comes into play. Much like Class Instantiation, we can create a Subclass based on the Class operator that inherits characteristics from the Class operator AND has its own unique properties:

var Location = function(color, movementSpeed, location) {
this.location = location;
Car.call(this, color, movementSpeed); // calling the previous
// Class operator allows our new subclass to inherit its
// properties.
}

Location.prototype = Object.create(Car.prototype); // this sets up
// the prototype relationship between the Subclass instantiation
// and the original Class (Car).
Location.protoytpe.constructor = Location.prototype; // since the
//previous line overwrote our prototype constructor, we must
//setup our Subclass relationship to its Constructor prototype
//object.
Now if we wanted to create a redCar and yellowCar with the same properties, we can do so without having to rewrite the location method one both of them:

var redCar = new Location("red", 10, 12);
//redCar = {color:"red", movementSpeed: 10, location: 12};
var yellowCar = new Location("yellow", 8, 15);
//yellowCar = {color:"yellow", movementSpeed: 8, location: 15};
var blueCar = new Car("blue", 6);
//blueCar = {color:"blue", movementSpeed: 6};
Since the blueCar is an instance of the Car Class, it does not have access to the Location subclass properties. This one-way relationship allows the Location Subclass to inherit properties from the Car Class while preventing the Car Class from accessing those properties.

AlphaKeny1 posted:

I'm doing a deep dive into JS to prepare for getting grilled in interviews. I read most of the "Javascript the good parts". I'm on class instantiation/OOP and prototyping right now and I think I somewhat get it. [...]

minato posted:

bigperm posted:

chaosbreather posted:

echinopsis posted:

the notion of arrow functions is less intuitive to me, but I am working on that.

AlphaKeny1 posted:

is the same as

AlphaKeny1 posted:

const example = (parameter) => {
}

AlphaKeny1 posted:

code:

addEventListener("click", e => handleClick(e));

AlphaKeny1 posted:

I'm doing a deep dive into JS to prepare for getting grilled in interviews.

smackfu posted:

Does it actually make any difference?

gbut posted:

No, not really. I haven't dug into it, but I would expect the optimizer to deal with it in this case. I just found that a lot of juniors I've been working with are not aware that you don't need to wrap a callback in a pass thru lambda like that. But in the end, whatever.

echinopsis posted:

idk what I've done to stop it applying any of that css

echinopsis posted:

at some stage while working on this I must have made a change and I don't know what, but I am unable to work out why a css selector isn't working on a div

when I inspect it in chrome, it's clear it's got the class on the div, but it's like the css isn't even there in my stylesheet. it's not like it's being overridden, just doesn't seem to be working at all.

I have this at the end of my css file

code:

.log {
  display: flex;
  border: 2xp;
  border-color: white;
  border-style: solid;
  flex: 0 0;
  height: 40%;

  color: white;
  text-transform: none;
  padding: 5px;
}

and there is a picture showing that class selected in the inspector but.. idk what I've done to stop it applying any of that css


you can view the source at http://crimecommitter.com

echinopsis posted:

oh my god what a fuckin numbnuts

thanks guys