Results 1 to 7 of 7
  1.    #1  
    Hey guys,

    Trying to make first WebOS app.. a little game I made porting from TI calculator.

    I have five hold buttons. Each requires a start 'hold' state, with a 5 length array each set to '0' for off. I made two images, one 'hold' image, and one 'held' image. I want to change the div element style visibility = 'hidden' / 'visible' for the 'held'/'hold' image on button click, and also change the state of the array from 1 => 0 / 0 => 1.

    What could I be doing wrong? Was frustrated all day yesterday over this..

    css
    Code:
    .holdButton {
        height: 12px;
        width: 79px;
        top: 265px;
        background: url("../images/HOLD.png");
        position: absolute;
    }
    
    .heldButton {
        height: 12px;
        width: 79px;
        top: 265px;
        background: url("../images/HELD.png");
        position: absolute;
    }
    scene
    Code:
        <div id="holdButton1" class="holdButton" style="left:11px;"></div>
        <div id="holdButton2" class="holdButton" style="left:107px;"></div>
        <div id="holdButton3" class="holdButton" style="left:201px;"></div>
        <div id="holdButton4" class="holdButton" style="left:297px;"></div>
        <div id="holdButton5" class="holdButton" style="left:391px;"></div>
        <div id="heldButton1" class="heldButton" style="left:11px;"></div>
        <div id="heldButton2" class="heldButton" style="left:107px;"></div>
        <div id="heldButton3" class="heldButton" style="left:201px;"></div>
        <div id="heldButton4" class="heldButton" style="left:297px;"></div>
        <div id="heldButton5" class="heldButton" style="left:391px;"></div>
    assistant
    Code:
    function WildngameAssistant() {
    
    };
    
    WildngameAssistant.prototype.setup = function() {
        
            //SET UP THE BUTTONS
            document.getElementById("heldButton1").style.visibility = "hidden";
            document.getElementById("heldButton2").style.visibility = "hidden";
            document.getElementById("heldButton3").style.visibility = "hidden";
            document.getElementById("heldButton4").style.visibility = "hidden";
            document.getElementById("heldButton5").style.visibility = "hidden";
            document.getElementById("holdButton1").style.visibility = "visible";
            document.getElementById("holdButton2").style.visibility = "visible";
            document.getElementById("holdButton3").style.visibility = "visible";
            document.getElementById("holdButton4").style.visibility = "visible";
            document.getElementById("holdButton5").style.visibility = "visible";
                
            var held = new Array(); //create an array that contains the status of the cards..
            var i;
            for(i = 0; i < 5; i++){ //all cards are not held by default, so fill array with '0's
                held[i] = 0;
                };
    
    
            //INITIALIZE THE BUTTONS
                Mojo.Event.listen(this.controller.get("holdButton1"), Mojo.Event.tap,
                this.Held1.bind(this));
            
                Mojo.Event.listen(this.controller.get("holdButton2"), Mojo.Event.tap,
                this.Held2.bind(this));
                
                Mojo.Event.listen(this.controller.get("holdButton3"), Mojo.Event.tap,
                this.Held3.bind(this));
                
                Mojo.Event.listen(this.controller.get("holdButton4"), Mojo.Event.tap,
                this.Held4.bind(this));
                
                Mojo.Event.listen(this.controller.get("holdButton5"), Mojo.Event.tap,
                this.Held5.bind(this));
                
                Mojo.Event.listen(this.controller.get("heldButton1"), Mojo.Event.tap,
                this.Held1.bind(this));
                
                Mojo.Event.listen(this.controller.get("heldButton2"), Mojo.Event.tap,
                this.Held2.bind(this));
                
                Mojo.Event.listen(this.controller.get("heldButton3"), Mojo.Event.tap,
                this.Held3.bind(this));
                
                Mojo.Event.listen(this.controller.get("heldButton4"), Mojo.Event.tap,
                this.Held4.bind(this));
                
                Mojo.Event.listen(this.controller.get("heldButton5"), Mojo.Event.tap,
                this.Held5.bind(this));
                
    
            
    };
    
    WildngameAssistant.prototype.activate = function(event) {
    };
    
    WildngameAssistant.prototype.deactivate = function(event) {
    };
    
    WildngameAssistant.prototype.cleanup = function(event) {
    };
    
    WildngameAssistant.prototype.handleCommand = function (event) {
        if (event.type === Mojo.Event.back) {
            scene = "wildngame";
            Mojo.Controller.stageController.popScene();
            Mojo.Controller.stageController.pushScene("pausemenu", scene);
            event.stop();
        };
    };
    
    WildngameAssistant.prototype.refreshButtons = function () {
        //IF ANY HOLD OR HELD BUTTON IS PRESSED, REFRESH THE BUTTONS
        refreshButtons = function(event){
            var i = new int;
            for (i = 0; i < 5; i++) {
                if (!held[i]) { //show the hold button
                    switch (i) {
                        case 1:
                            document.getElementById("heldButton1").style.visibility = "hidden";
                            document.getElementById("holdButton1").style.visibility = "visible";
                            break;
                        case 2:
                            document.getElementById("heldButton2").style.visibility = "hidden";
                            document.getElementById("holdButton2").style.visibility = "visible";
                            break;
                        case 3:
                            document.getElementById("heldButton3").style.visibility = "hidden";
                            document.getElementById("holdButton3").style.visibility = "visible";
                            break;
                        case 4:
                            document.getElementById("heldButton4").style.visibility = "hidden";
                            document.getElementById("holdButton4").style.visibility = "visible";
                            break;
                        case 5:
                            document.getElementById("heldButton5").style.visibility = "hidden";
                            document.getElementById("holdButton5").style.visibility = "visible";
                            break;
                        };
                } else {    //else show the held button
                    switch (i) {
                        case 1:
                            document.getElementById("holdButton1").style.visibility = "hidden";
                            document.getElementById("heldButton1").style.visibility = "visible";
                            break;
                        case 2:
                            document.getElementById("holdButton2").style.visibility = "hidden";
                            document.getElementById("heldButton2").style.visibility = "visible";
                            break;
                        case 3:
                            document.getElementById("holdButton3").style.visibility = "hidden";
                            document.getElementById("heldButton3").style.visibility = "visible";
                            break;
                        case 4:
                            document.getElementById("holdButton4").style.visibility = "hidden";
                            document.getElementById("heldButton4").style.visibility = "visible";
                            break;
                        case 5:
                            document.getElementById("holdButton5").style.visibility = "hidden";
                            document.getElementById("heldButton5").style.visibility = "visible";
                            break;
                            };
                        };
                    };
                };
    
    };
        
    WildngameAssistant.prototype.Held1 = function(event){
            if (held[0]=0) {
                held[1]=1;
                document.getElementById('holdButton1').style.visibility = 'hidden';
                document.getElementById('heldButton1').style.visibility = 'visible';
            } else {
                held[0]=0;
                document.getElementById('holdButton1').style.visibility = 'visible';
                document.getElementById('heldButton1').style.visibility = 'hidden';
            };
            refreshButtons();
    };
        
    WildngameAssistant.prototype.Held2 = function(event){
            if (!held[1]) {
                held[1] = 1;
                } else {
                held[1] = 0;
                };
            refreshButtons();
    };
        
    WildngameAssistant.prototype.Held3 = function(event){
            if (!held[2]) {
                held[2] = 1;
                } else {
                held[2] = 0;
                };
            refreshButtons();
    };
        
    WildngameAssistant.prototype.Held4 = function(event){
            if (!held[3]) {
                held[3] = 1;
                } else {
                held[3] = 0;
                };
            refreshButtons();
    };
        
    WildngameAssistant.prototype.Held5 = function(event){
            if (!held[4]) {
                held[4] = 1;
                } else {
                held[4] = 0;
                };
            refreshButtons();
    };
    It's probably something extremely stupid that I'm missing, or it could be something elementary.....

    The button taps are moving to the 'Held (x)' functions...
    The button taps are not moving to the refreshButtons function after.. (could be a problem with my understanding of referencing functions)..

    -Notice 'Held1' function is different from other four, this is my test to see if the image would hide / unhide, inside the function, and it is not...

    PLEASE HELP!

    Once I get this done, I can actually work on the dang thing...

    /frustrated novice
    Neo Enyo 2.0 Twitter App: NOW AVAILABLE | WON REVIEW
    clearview - clear card app for HP TOUCHPAD
    Wild'n Video Poker - AVAILABLE FOR ALL WEBOS DEVICES! | follow for latest updates - @fxspec06

  2.    #2  
    Also, if / when I get this code to work, I would like to know if it's possible to remove the redundancy of the hide/show button code.. i.e. instead of 'holdbutton1' 'holdbutton2' etc do a for statement..

    Code:
    for (i=1, i < 6, i++) { document.getElementById('heldButton' + i).style.visibility = 'visible'; document.getElementById('holdButton' + i).style.visibility = 'hidden'; held[i]=1; } //(plus the if statements..)
    Or if I have to, create a string for the holdButton ID and do the same..

    Code:
    var holdButton = "holdButton" + i;
    I'm pretty sure it'd work, I just can't get the code to "swap" the images..
    Neo Enyo 2.0 Twitter App: NOW AVAILABLE | WON REVIEW
    clearview - clear card app for HP TOUCHPAD
    Wild'n Video Poker - AVAILABLE FOR ALL WEBOS DEVICES! | follow for latest updates - @fxspec06

  3. #3  
    To call your refreshButtons function, just add this to it: this.refreshButtons();

    You can definitely remove all the redundancy and you can even point all of the listeners to one responding function which checks to see which div it was called from and then executes the appropriate response.

    You can use the same functions to "get" your element => use this.controller.get('x') everywhere instead of only in the listen calls. You can also just query the current state of a particular div instead of maintaining a separate array of the values.
  4.    #4  
    o.m.f.g.!!

    I got it to work! I'm so excited. lol

    this.controller.get works...

    this.document.getElementById for some reason doesn't..

    gonna have a fun day minimizing my code and hopefully i can finally port this game!

    w00t developing is so fun when you have no idea what you're doing and then figure it out...
    Neo Enyo 2.0 Twitter App: NOW AVAILABLE | WON REVIEW
    clearview - clear card app for HP TOUCHPAD
    Wild'n Video Poker - AVAILABLE FOR ALL WEBOS DEVICES! | follow for latest updates - @fxspec06

  5.    #5  
    Quote Originally Posted by appsotutely View Post
    You can definitely remove all the redundancy and you can even point all of the listeners to one responding function which checks to see which div it was called from and then executes the appropriate response.

    How do I do this?

    I <3 javascript BTW... farrrrr better than the restrictions of BASIC..
    Neo Enyo 2.0 Twitter App: NOW AVAILABLE | WON REVIEW
    clearview - clear card app for HP TOUCHPAD
    Wild'n Video Poker - AVAILABLE FOR ALL WEBOS DEVICES! | follow for latest updates - @fxspec06

  6. #6  
    event.target.id will give you the "id" of the div that was tapped:

    Code:
    var tappedId = event.target.id;
    or
    var tappedDiv = this.controller.get(event.target.id);
    
    then:
    
    if (tappedDiv.style.visibility === "hidden") {
      tappedDiv.style.visibility = "visible";
    } else {
      tappedDiv.style.visibility = "hidden";
    }
    if you need the number of the div, just use some regular expression to pull out the digits.
  7.    #7  
    Thank you!
    Neo Enyo 2.0 Twitter App: NOW AVAILABLE | WON REVIEW
    clearview - clear card app for HP TOUCHPAD
    Wild'n Video Poker - AVAILABLE FOR ALL WEBOS DEVICES! | follow for latest updates - @fxspec06

Posting Permissions