Swapping images using KineticJS

Hey Guys i'm trying to swap images using the code below:

     // NEW CODE FOR FLIPPING
    var mainImage2 = new Image();
    mainImage2.src = 'expedition2.gif';

    $("#flip").click(function(){

        var myRadio2 = $('input[name=car_selected]');
        var value2 = myRadio2.filter(':checked').val();



        if(value2 == "expedition"){
        alert("hi");
            expGroup.setImage(mainImage2);
            stage.draw();
        }
    });

    // END OF NEW CODE

basically i want the button to check what car they want to replace in this case and expedition facing one way, with an image facing the other way. Any idea why this wouldn't be working? Thanks so much!

Solution

I spot these glitches in your code:

make sure all your images are fully loaded by using an image loader.
listen for radiobutton changes with $('input[type=radio][name=group1').change
better coding practice: Redraw just the layer instead of the stage: layer.draw()

Here's annotated code and a Demo: http://jsfiddle.net/m1erickson/GP6ug/

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.1.min.js"></script>
<style>
body{padding:20px;}
#container{
  border:solid 1px #ccc;
  margin-top: 10px;
  width:350px;
  height:350px;
}
</style>        
<script>
$(function(){

    // create the Kinetic.Stage
    var stage = new Kinetic.Stage({
        container: 'container',
        width: 350,
        height: 350
    });
    var layer = new Kinetic.Layer();
    stage.add(layer);

    var theImage;

    // this loads all necessary images into the imgs[] array
    // and then calls the start() function
    var imagesOK=0;
    var imgs=[];
    // put the paths to your images in this array
    var imageURLs=[];  
    imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/multple/marioRunningLeft.png");
    imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/multple/marioRunningRight.png");
    loadAllImages(start);

    function loadAllImages(callback){
        for (var i=0; i<imageURLs.length; i++) {
            var img = new Image();
            imgs.push(img);
            img.onload = function(){ 
                imagesOK++; 
                if (imagesOK>=imageURLs.length ) {
                    callback();
                }
            };
            img.onerror=function(){alert("image load failed");} 
            img.crossOrigin="anonymous";
            img.src = imageURLs[i];
        }      
    }

    function start(){

        // create the Kinetic.Image
        theImage = new Kinetic.Image({
            x:30,
            y:30,
            image:imgs[0],
            draggable: true
        });
        layer.add(theImage);
        layer.draw();

        // listen from changes to the radio button group
        // change the Kinetic.Image based on which button is selected
        // be sure to redraw the layer so the results are displayed
        $('input[type=radio][name=group1').change(function(){
            var whichButton=parseInt(this.value-1);
            theImage.setImage(imgs[whichButton]);
            layer.draw();
        });

    }

}); // end $(function(){});

</script>       
</head>
<body>
    <input type=radio name=group1 value=1 checked>Image#1
    <input type=radio name=group1 value=2>Image#2
    <div id="container"></div>
</body>
</html>