Home/ Questions/Q 9177205
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T17:16:20+00:00

Initial stages of learning backbone.js (even Js infact). The html page has 3 images.

  • 0

Initial stages of learning backbone.js (even Js infact).
The html page has 3 images. I want to replace the first image on clicking. I’m doing this as a learning process. Please tell me what is wrong with the code or my logic.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
   <title>Hello World in Backbone.js</title>
</head>
<body>

  <!-- HTML CODE -->

        <div align="center">
            <img src="pic1.jpg" id = "pic1" />
            <img src="pic2.jpg" id = "pic2" />
            <img src="pic3.jpg" id = "pic3" />
        </div>

  <!-- Libraries -->
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js" type="text/javascript"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js" type="text/javascript"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/backbone-localstorage.js/1.0/backbone.localStorage-min.js" type="text/javascript"></script>  

  <!-- Javascript code -->
  <script type="text/javascript">
        var AppView = Backbone.View.extend({
            el: 'body',
            initialize: function(){
                this.render();
            },

            events: function(){
                "click #pic1": "replacePic1"
            },

            render: function(){
                console.log('view rendered. try clicking pic1');
                //this.$el.html(this.template({who: 'world!'}));
            },

            replacePic1: function(){
                alert("You can replace Pic1");
            }
        });

        var appView = new AppView();

  </script>

</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    There is a lot you can improve but just to get things going try the following and remove the onClick that you have.

    <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Hello World in Backbone.js</title>
</head>
<body>

    <!-- HTML CODE -->
    <div align="center">
        <img src="pic1.jpg" id = "pic1"/>
        <img src="pic2.jpg" id = "pic2" />
        <img src="pic3.jpg" id = "pic3" />
    </div>

    <!-- Libraries -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js" type="text/javascript"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js" type="text/javascript"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/backbone-localstorage.js/1.0/backbone.localStorage-min.js" type="text/javascript"></script>  

    <!-- Javascript code -->
    <script type="text/javascript">
        var AppView = Backbone.View.extend({
            el: 'body',
            initialize: function(){
                this.render();
            },

            events: {
                "click #pic1": "replacePic1"
            },

            render: function(){
                console.log('view rendered. try clicking pic1');
                //this.$el.html(this.template({who: 'world!'}));
            },

            replacePic1: function(){
                $("#pic1").attr('src',"new/url.jpg");
            }
        });

        var appView = new AppView();
    </script>

</body>
</html>

    Obviously this is not the way you want to go about things but might be worth trying out. A great backbone tutorial series I had found was a Wine Cellar Tutorial. Follow the whole series and you will learn a lot. Follow it up with the Lessons Learned article and enjoy 🙂

    • 0