Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #35372

the definition of this

Show key headers only | View raw

I was reviewing this simple program from the w3schools tutorials and it
confused me.  A short version of it looks like this:

 77     transition: 0.3s;
 78 }
 79
 80 .close:hover,
 81 .close:focus {
 82     color: #bbb;
 83     text-decoration: none;
 84     cursor: pointer;
 85 }
 86
 87 /* 100% Image Width on Smaller Screens */
 88 @media only screen and (max-width: 700px){
 89     .modal-content {
 90         width: 100%;
 91     }
 92 }
 93 </style>
 94 </head>
 95 <body>
 96
 97 <h2>Image Modal</h2>
 98 <p>In this example, we use CSS to create a modal (dialog box) that
is hidden by default.</p>
 99 <p>We use JavaScript to trigger the modal and to display the current
image inside the modal when it is clicked on. Also note that we use the
value from the image's "alt" attr    ibute as an image caption text
inside the modal.</p>
100
101 <img id="myImg"
src="http://www.mrbrklyn.com/images/comics/action_78.jpg" alt="Action
Comics" style="width:100%;max-width:300px">
102
103 <!-- The Modal -->
104 <div id="myModal" class="modal">
105   <span class="close">&times;</span>
106   <img class="modal-content" id="img01">
107   <div id="caption"></div>
108 </div>
109
110 <script>
111 // Get the modal
112 var modal = document.getElementById('myModal');
113
114 // Get the image and insert it inside the modal - use its "alt" text
as a caption
115 var lc_img = document.getElementById('myImg');
116 var mo = document.getElementById("img01");
117 var captionText = document.getElementById("caption");
118 lc_img.onclick = function(){
119    ¦modal.style.display = "block";
120    ¦mo.src = this.src;
121    ¦captionText.innerHTML = this.alt;
122 }
123
124 // Get the <span> element that closes the modal
125 var span = document.getElementsByClassName("close")[0];
126
127 // When the user clicks on <span> (x), close the modal
128 span.onclick = function() {
129    ¦modal.style.display = "none";
130 }
131 </script>
132
133 </body>
134 </html>


So line 120 assigns the url for the clicked upon image into the mo.src
variable and turns it on.  But I would have thought that this would be a
reference to the document object, not the image that was clicked, so
obviously I am confused about the rules of object heiarchy.  Otherwise,
how is var mo visible within the function?

Back to comp.lang.javascript | Previous | Next — Next in thread | Find similar | Unroll thread

Thread

the definition of this ruben safir <ruben@mrbrklyn.com> - 2018-07-07 20:59 -0400
  Re: the definition of this ruben safir <ruben@mrbrklyn.com> - 2018-07-07 21:02 -0400
    Re: the definition of this Robert Heller <heller@deepsoft.com> - 2018-07-07 21:15 -0500
    Re: the definition of this JJ <jj4public@vfemail.net> - 2018-07-08 10:17 +0700
  Re: the definition of this Julio Di Egidio <julio@diegidio.name> - 2018-07-08 04:49 -0700
  Re: the definition of this ruben safir <ruben@mrbrklyn.com> - 2018-07-08 12:17 -0400
    Re: the definition of this Julio Di Egidio <julio@diegidio.name> - 2018-07-08 10:43 -0700
    Re: the definition of this Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2018-07-08 22:49 +0200
      Re: the definition of this Julio Di Egidio <julio@diegidio.name> - 2018-07-08 13:55 -0700
  Re: the definition of this Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2018-07-08 21:51 +0200
    Re: the definition of this Julio Di Egidio <julio@diegidio.name> - 2018-07-08 13:00 -0700
      Re: the definition of this Julio Di Egidio <julio@diegidio.name> - 2018-07-08 13:04 -0700
        Re: the definition of this "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2018-07-08 13:48 -0700
          Re: the definition of this Julio Di Egidio <julio@diegidio.name> - 2018-07-08 13:51 -0700
      Re: the definition of this "Christoph M. Becker" <cmbecker69@arcor.de> - 2018-07-08 22:26 +0200
        Re: the definition of this Julio Di Egidio <julio@diegidio.name> - 2018-07-08 13:44 -0700

csiph-web