javascript check if function parameter meets a condition

Question

I'm trying to write a basic "quest" function and have run into a few issues. This is what I've done so far

JS

var clicks = 0;
var coins = 10;

var Quests = function(type, required, reward, message) {
    this.type = type;
    this.required = required;
    this.reward = reward;
    this.message = message;
    this.quest = function() {
        if (this.type >= this.required) {
            coins += this.reward;
            return this.message;
        } else {
            alert('You don\'t have enough ' + required);
        }
    };
};
quest1 = new Quests(clicks, 10, 50, 'You completed this quest!');
quest2 = new Quests(clicks, 5, 50, 'You completed this quest!');

theQuests = [quest1, quest2];

$(document).ready(function() {
    $('#click').click(function() {
        clicks += 1;
        $('#queststuff').text(clicks);
    });
    $('#quest').click(function() {
        $('#queststuff').html(Quests[Math.floor(Math.random() * 2)].quest());
    });
});

HTML

   <button id="quest">quest</button>
   <button id="click">click me!</button>
   <div id="queststuff">   
   </div>

Eventually I'll be using something other than clicks, but for now I wanted to just get the basic function working. I'm fairly new to functions, but at the moment when clicking 'quest' nothing happens, while I'm wanting the alert to display. I've obviously gone wrong somewhere in my code. Is anyone able to point me in the right direction?

KooiInc · Accepted Answer · 2014-12-23 08:32:22Z

1

You are assigning clicks, an immutable Number, to this.type. Its value is 0 initially, and this.type thus stays 0 after the assignment. You should compare clicks to this.required within the quest method.

Here's a jsFiddle fork version using data-attributes

edited Dec 23, 2014 at 8:32

answered Oct 6, 2014 at 22:25

KooiInc

124k32 gold badges145 silver badges181 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Asteria Over a year ago

Thanks! I was fiddling around and figured out that using clicks works (was editing it into my question as you posted) but eventually I would like to use different things (Like needing a certain amount of strength or magic) which is why I was trying with this.type. Is there a way I can force this.type to update on click, so I can use different variables as the required type?

KooiInc Over a year ago

Nope, it would require another setup. You could try working with a data-attribute on the button. See this fork of the jsfiddle: jsfiddle.net/KooiInc/j5gcuwgt

akinuri · Accepted Answer · 2014-10-06 22:43:39Z

Your code has several issues.

When you create a new object quest1 with new Objects you pass clicks into it. At the time you pass clicks it equals to 0. And inside that object method quest1.quest(), you check if clicks (this.type) is greater/equal to required clicks (this.required). this.type equals to 0. It will never return true. Since you're creating multiple quests, clicks should be specific to these quests (objects). It shouldn't be global.
Another one is in this line:

$('#queststuff').html(Quests[Math.floor(Math.random() * 2)].quest());

I believe you wanted to address to your theQuests array. Quests[Math.floor(Math.random() * 2)].quest() simply won't work. Even if you change your code to theQuests[0].quest() or quest1.quest() it still won't work. See above, and since there are multiple quests, first you need to check which one is active.

You should review your code. Here's something to get you started. Of course, it needs further improvement and styling. FIDDLE

var Quest = function (requiredClicks, reward, message) {
    this.clicks = 0;
    this.coins = 0;
    this.requiredClicks = requiredClicks;
    this.reward = reward;
    this.message = message;
    this.check = function () {
        if (this.clicks >= this.requiredClicks) {
            this.coins += this.reward;
            return this.message;
        } else {
            alert('You don\'t have enough clicks: ' + this.clicks + "/" + this.requiredClicks);
        }
    };
    this.click = function() {
        this.clicks++;
    };
};
var quest1 = new Quest(10, 50, 'You completed this quest!');

$('#click').click(function () {
    quest1.click();
    $('#queststuff').text(quest1.clicks);
});
$('#quest').click(function () {
    $('#queststuff').html(quest1.check());
});

Collectives™ on Stack Overflow

javascript check if function parameter meets a condition

JS

HTML

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

JS

HTML

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related