JSFiddle - React, Tailwind, and code Playground

by horhey

HTML

<body>
    <div>
        <select id='jdselect'>
          <option value='http://www.peru-machu-picchu.com/pics/machu-picchu-1.jpg'>Machu picchu</option>
          <option value='http://upload.wikimedia.org/wikipedia/commons/thumb/b/be/Sacsayhuaman_Inca.jpg/285px-Sacsayhuaman_Inca.jpg'>Saksaywaman</option>
            <option value='http://www.wyndham.com/property/XLVON/Images/42255_x1.jpg'>Niagra Falls</option>
              <option value='https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQHD23lc_0aDDoSBnOmy0pJcq2ZGt52aKaOGRj1ZYF1C4OpeugZ'>Nazca Lines</option>
             <option value='http://t1.gstatic.com/images?q=tbn:ANd9GcTNwMjxUdLpvcBCvYZR0bdG3-4cpeB9Ip7e63UWrb93f5K9zR19'>Cane Corso</option>
            
            
            
    </select>
    </div>
    <div>
    <button>Toggle Image</button>
    </div>    
    <div>
    <img id='image' src="http://www.quackit.com/pix/mueller_hut/mueller_hut_t.jpg" border="0" style="border:none;max-width:100%;" alt="beach" />
    </div>
</body>

JavaScript

$(function () {
    var hutImage = 'http://www.quackit.com/pix/mueller_hut/mueller_hut_t.jpg';
    var rabbitImage = 'http://www.quackit.com/pix/worlds_largest_rabbit_2_t.jpg';
    var imageSrc = '';
    var currentImage = '';
    var $image = "";
    

    $("button")
        .button()
        .click(function (event) {
        $image = $('#image');
        currentImage = $image.attr('src');
        if (currentImage == ''+ rabbitImage ) {
            imageSrc = hutImage;
             console.log("in IF ");
        } else {
             console.log("in else ");
            imageSrc = rabbitImage;
        }
        console.log("currentImage =" + currentImage);
        console.log("imageSrc =" + imageSrc);
       
        $image.attr('src', imageSrc);

    });
    
    //$selectList = $("#jdselect");
    $selectList = $("select");
    $selectList.change(function (event){
        var selectedImageURL = $selectList.val();
        //debugger;
         console.log("selectedImageURL " + selectedImageURL);
         console.log("select changed");
         $image = $('#image');
         $image.attr('src', selectedImageURL);
        
        
    });
});