2

I am trying to write JavaScript in a modular way. I have written spagheeti code in the past to get things done. But I wanna do this correctly this time around.. I am trying to write a trivia application.. i am trying to use the object literal pattern.. So, i have list of events that i register.. when i trigger one of the events I need access to the element/button that triggered the click event..i also need access to the correctAnswer defined in the this context..

So, if i bind this while calling validateChoice - "this" is giving me the correctAnswer.. if i dont use bind - "this" is giving me the button name that was clicked.. i need both of them. how can i do this? any help would be really appreciated..

https://codepen.io/rajdhandus/pen/WzWrqJ

HTML

<body>
    <div class="container">
        <div class="row">
            <div class="col-xs-12">
                <h1 id="game-title">Trivia Game</h1>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12">
                <h1 id="time-remaining">Time Remaining: <span id="timeInSeconds">30</span> Seconds</h1>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12">
                <h1 id="questions"></h1>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12">
                <h1 id="choice-1" class="options">Option 1</h1>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12">
                <h1 id="choice-2" class="options">Option 2</h1>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12">
                <h1 id="choice-3" class="options">Option 3</h1>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12">
                <h1 id="choice-4" class="options">Option 4</h1>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12 text-center">
                <button id="nextQtnBtn" class="btn btn-large btn-primary">Next Question</button>
            </div>
        </div>
    </div>
</body>

JS

(function(){
var app = {
  questions: [
    {
      question: "What is your favorite color?",
      choice1: "red",
      choice2: "blue",
      choice3: "green",
      choice4: "yello",
      correctAnswer: "choice-1"
    }
  ],

  cacheDom : function() {
      this.$question = $("#questions");
      this.$choice1 = $("#choice-1");
      this.$choice2 = $("#choice-2");
      this.$choice3 = $("#choice-3");
      this.$choice4 = $("#choice-4");
      this.$options = $(".options");
      this.$nextQtnBtn = $("#nextQtnBtn");
  },

  getRandomQA: function() {
    var randNum = Math.floor(Math.random() * this.questions.length);
    return this.questions[randNum];
  },

  render: function(obj) {
    this.$question.text(obj.question);
    this.$choice1.text(obj.choice1);
    this.$choice2.text(obj.choice2);
    this.$choice3.text(obj.choice3);
    this.$choice4.text(obj.choice4);
    this.correctAnswer =obj.correctAnswer;
},

  eventRegistry : function () {
    this.$options.on("click", this.validateChoice);
    this.$nextQtnBtn.on("click", this.init.bind(this));

  },



  validateChoice : function() {

    console.log(this);

  },

  init : function(){
    var qObj = this.getRandomQA();
    this.render(qObj);
  },

  main: function() {
      this.cacheDom();
      this.init();
      this.eventRegistry();
  }
};

app.main();

})();
Ram
  • 628
  • 1
  • 6
  • 19
  • `this` is a real bastard in JavaScript. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this – Anthony Apr 11 '18 at 23:34
  • 1
    You have access to both. You assigned your app to a variable named `app` within your iife which means you can simply reference it as `app` from any of your functions such as `app.init();` just as you use `app.main();` – generalhenry Apr 11 '18 at 23:45

0 Answers0