Hide dynamic JS buttons based on a var value

Question

I am having a similar problem to this: Hide dynamically added buttons based on an if statement. With a JS mod for A Dark Room I am working on to increase my JS skills. Neither of these snippets are mine, and both are working perfectly.

This is the code snippet to create the buttons:

build: function(buildBtn) {
        var thing = $(buildBtn).attr('buildThing');
        if($SM.get('game.temperature.value') <= Room.TempEnum.Cold.value) {
            Notifications.notify(Room, _("builder just shivers"));
            return false;
        }

This snippet makes sure that buttons stay visible, but I would like to change it so that when a max value is met the button is hidden.

//show button if one has already been built
if($SM.get('game.buildings["'+thing+'"]') > 0){
    Room.buttons[thing] = true;
    return true;
}

score 0 · Answer 1 · answered May 25 '16 at 17:55

Hiding and showing elements is typically done through a class. Have a css class like this

.hidden {
  display : none'
}

Then in your javascript, add or remove hidden class according to your condition

 if(condition) {
    $(element).addClass('hidden');
  } else {
    $(element).removeClass('hidden');
  }

score 0 · Answer 2 · answered May 25 '16 at 18:08

It's hard to suggest because there isn't enough context. The snippet you show may not just be exclusively responsible for controlling the visibility of the button (despite the inline comment saying it is). As a result the following suggestion may not work and more information on what you're trying to do and more code would be needed.

If you have access to modify the snippet then you can include the max value there. If the max value is a variable (i.e myCustomMaxValue) and it's in scope then my best guess would be to add it here:

var myCustomMaxValue = 88;
var someOtherVariableInScope = 50

//show button if one has already been built
if($SM.get('game.buildings["'+thing+'"]') > 0){
    //add your condition here and yield true/false
    var myCustomCondition = someVariableInScope > myCustomMaxValue;
    Room.buttons[thing] = myCustomCondition;
    return myCustomCondition;
}

I would suggest the debug; keyword. Place it in the snippet and open your browsers' developer tools and its debugger will get hit. You can then inspect the variables in scope and verify the snippet is in fact responsible for dynamically showing and hiding the button.

//show button if one has already been built
if($SM.get('game.buildings["'+thing+'"]') > 0){
    debug;
    Room.buttons[thing] = myCustomCondition;
    return myCustomCondition;
}

Hide dynamic JS buttons based on a var value

2 Answers2