Changing JavaScript Player Object based on keypress

Question

I'm currently working on a basic JavaScript top-down shooter and I've run into a dilemma. I'm trying to implement a basic toggle weapon system however when I press the key it changes the weapon properly but when I press it again to toggle back it doesn't work. I don't think it's an issue with the rendering because the drawing function is able to detect the different weapons properly. I feel it's an issue with the actual toggle system code.

Here's the code for the player class

class Player{
    constructor(set){
        this.cx = set.x;
        this.cy = set.y;
        this.r = set.r;
        this.color = set.color;
        this.angle = 0;
        this.toAngle = this.angle;
        this.state = 1;
        this.up = false;
        this.down = false;
        this.right = false;
        this.left = false;

        this.bind();
    }
    bind(){
        const self = this;
        c.addEventListener('mousemove', (e) => {
            self.update(e.clientX, e.clientY);
        });
        window.addEventListener('keydown', (e) => {
            if(e.keyCode == 81){
                if(self.state = 1)
                    self.state = 0;
                if(self.state = 0)
                    self.state = 1;
            }

        });
        //toggle code:
        window.addEventListener('keyup', (e) => {
            if(e.keyCode == 81){
                if(self.state = 1)
                    self.state = 0;
                if(self.state = 0)
                    self.state = 1;
            }

        });
    }
    update(ex, ey){
        this.toAngle = Math.atan2(ey - this.cy, ex - this.cx);
    }
    canv(){
        if(this.angle !== this.toAngle){
            clear();
            ctx.save();

            ctx.translate(this.cx, this.cy);
            ctx.rotate(this.toAngle - this.angle);
            ctx.translate(-this.cx, -this.cy);

            drawPlayer(this.cx, this.cy, this.r, 0, 180, this.color, this.state);

            this.angle = this.toAngle;
        }
    }
} 
//drawing code (above this one in the complete file)
function drawCircle(x, y, rad, startAngle, endAngle, color){
    ctx.fillStyle = color;
    ctx.beginPath();
    ctx.arc(x, y, rad, startAngle, endAngle);
    ctx.fill();

}
function drawPlayer(x, y, playerR, playerStartAng, playerEndAng, color, state){
    //left hand start
    if(state == 0){
        ctx.fillStyle = color;
        ctx.beginPath();
        ctx.arc(x - 15, y - 15, 10, 0, 180);
        ctx.fill();

        //border
        ctx.strokewidth = 10;
        ctx.strokeStyle = "brown";
        ctx.stroke();
        //end

        //right hand start
        ctx.beginPath();
        ctx.arc(x + 15, y - 15, 10, 0, 180);
        ctx.fill();

        //border
        ctx.strokewidth = 10;
        ctx.strokeStyle = "brown";
        ctx.stroke();
    }
    if(state == 1){
        //right hand start
        ctx.beginPath();
        ctx.arc(x + 7, y - 21, 10, 0, 180);
        ctx.fill();

        //border
        ctx.strokewidth = 10;
        ctx.strokeStyle = "brown";
        ctx.stroke();

        ctx.fillStyle = color;
        ctx.beginPath();
        ctx.arc(x - 7, y - 17, 10, 0, 180);
        ctx.fill();

        //border
        ctx.strokewidth = 10;
        ctx.strokeStyle = "brown";
        ctx.stroke();

        //gun start
        ctx.fillStyle = "black";
        ctx.beginPath();
        ctx.ellipse(x, y - 20, 3, 25, 0, 0, 2 * Math.PI);
        ctx.fill();

        //gun border
        ctx.strokewidth = 10;
        ctx.strokeStyle = "black";
        ctx.stroke();
        //end


    }

    //draw player
    drawCircle(x, y, playerR, playerStartAng, playerEndAng, color);
}

Answer 1

You are assigning (i.e. num = 0) instead of using a conditional (i.e. if (someBool === true) {/* Do stuff */}).

Your toggle code should look something like so:

// Easiest way to toggle any value used as a boolean
self.state = !self.state;

// Or if you still want this as an if statement
if (self.state) {
  self.state = 0;
} else {
  // We use an else statement since there can only be two possible values
  self.state = 1;
}

UPDATE: Remove the keydown event.

I just noticed that you have both a keyup and keydown event listener. Only the keyup event should be on since you want the player to press the key to toggle and then press the toggle key again