addEventListener not working, No Error

I’m just starting to learn JavaScript.
I’ve been wracking my brain and searching online for possible mistakes I could have made, but I’m just not seeing where I went wrong. I think I’ve been looking at it too long.

I just learned about classes, so this is inside a method called fire. I’ve attached the fire method to a fire button. I ran the method in the button with the () and it ran on it’s own once. I removed the () and it doesn’t run at all.

const fireBtn = document.getElementById("fire");
fireBtn.textContent = "FIRE!";

class Ship {
  constructor(hull, firepower, accuracy) {
    this.hull = hull;
    this.firepower = firepower;
    this.accuracy = accuracy;
  }

  fire() {
    if (this === alienShip) {
      if (ussHelloWorld.hull > 0) {
        if (Math.random() < this.accuracy) {
          console.log("USS Hello World has been hit!");
          ussHelloWorld.hull -= this.firepower;
        } else {
          console.log("Missed USS Hello World target");
        }
      } else {
        console.log("You Loose");
      }
    }
    if (this === ussHelloWorld) {
      if (this.hull > 0) {
        if (Math.random() < this.accuracy) {
          console.log("Alien has been hit!");
          alienShip.hull -= this.firepower;
          if (alienShip.hull <= 0) {
            console.log("Ship has gone down");
            alienShip = generateShip();
          }
        } else {
          console.log("Missed alien target");
        }
      } else {
        console.log("You Loose");
      }
    }
  }
}

fireBtn.addEventListener("click", ussHelloWorld.fire);

Any help is appreciated.

I’m just starting to learn JavaScript.

and you are using class. I have been coding for a year and didn’t need to use them. I feel like I have been hit by friendly fire.:rofl:

Jokes aside. if it isn’t running at all. check if fireBtn connected to the DOM something like

const resetBtn = document.getElementById("reset");
const fireBtn = document.getElementById("fire")
fireBtn.textContent = "FIRE!";

if this doesn’t help, I would love to check your repo.

Thank you for your help!

Please ignore the index1.html and the script1.js files.

I have console.log(this) and console.log(airship) in fire()

  fire() {
    console.log(this)
    console.log(alienShip)
    if (this === alienShip) {
      if (ussHelloWorld.hull > 0) {
        Math.random() < this.accuracy 
          ?ussHelloWorld.hull -= this.firepower
          :alert("Missed USS Hello World target")
        
      } else {
        alert("You Loose");
      }
    }
    if (this === ussHelloWorld) {
      if (this.hull > 0) {
        if (Math.random() < this.accuracy) {
          console.log("Alien has been hit!");
          alienShip.hull -= this.firepower;
          if (alienShip.hull <= 0) {
            console.log("Ship has gone down");
            alienShip = generateShip();
          }
        } else {
          console.log("Missed alien target");
        }
      } else {
        console.log("You Loose");
      }
      alienShip.fire();
    }
  }

the log showed that both of them have different values. so the arguments in if statements will never run. but the fireBtn is working perfectly so you don’t have to worry about it

decide what this should be representing, change this to that value and see if it works like you intended. then we can go from there if you need anything more. :+1:

Thank you! I didn’t think to console log “this”.

1 Like