How to use JavaScript constructor-class variables in if / else conditions?

Question

I'm getting an error message in the console that "this.cardPlace" and "this.flipPlace" are both undefined. I ran a console.log before the if/else condition and they were both functioning correctly. There's probably something small that I'm missing. (I'm quite new to coding, so please don't stone me, haha!) Thanks for your help!

class CardSection {
    constructor(_cardPlace, _flipPlace, _cat_section, _flipButton, _min, _max) {
        this.cardPlace = _cardPlace;
        this.flipPlace = _flipPlace;
        this.flippy = function() {
            if (_flipButton.value == "side-one") {
                this.flipPlace++;
                _flipButton.value = "side-two";
                document.getElementsByClassName("location").innerHTML = "Answer Side";
                _cat_section.src = "cards/" + this.cardPlace + "-" + this.flipPlace + ".tiff";
            } else if (_flipButton.value == "side-two") {
                this.flipPlace--;
                _flipButton.value = "side-one";
                document.getElementsByClassName("location").innerHTML = "Question Side";
                _cat_section.src = "cards/" + this.cardPlace + "-" + this.flipPlace + ".tiff";
            }
        }; 

...

var cat_section = document.getElementById("catechism-section-1");
var flipButton = document.getElementById("flip-button1");

var sect1 = new CardSection(1, 1, cat_section, flipButton, 1, 9);

enter image description here

How are you calling `flippy()`? And why is that defined as a `this.flippy` rather than a `flippy(){ ... }` on the class? — Taplar, Jun 03 '20 at 22:56
"flippy()" is being called when a button is clicked on the webpage — document.getElementById("flip-button1").addEventListener("click", sect1.flippy); — Ben Rogol, Jun 03 '20 at 23:00
`addEventListener('click', sect1.flippy)` is most likely your problem. Try changing it to `addEventListener('click', () => sect1.flippy())` — Taplar, Jun 03 '20 at 23:01
Does this answer your question? [How does the "this" keyword work?](https://stackoverflow.com/questions/3127429/how-does-the-this-keyword-work) — Taplar, Jun 03 '20 at 23:04
It worked—thank you so much! I know that is modern JS syntax. Is there a way to write it in pre-ES6 syntax? — Ben Rogol, Jun 03 '20 at 23:05

How to use JavaScript constructor-class variables in if / else conditions?

0 Answers0