Attribute String Test

 1  <!DOCTYPE html>
 2  <html>
 3  <head>
 4    <meta charset="utf-8">
 5    <title>Attribute String Test</title>
 6  
 7  <!--
 8    File:  http://cssdweb.edu/Student Resources/Website Development I/CodeSamples/AttributeStringTest.html
 9    maintained by Jesse M. Heines
10    Copyright (c) 2022 by Jesse Heines.  All rights reserved.  May be freely
11      copied or excerpted for educational purposes with credit to the author.
12    updated by JMH on August 7, 2022 at 9:24 AM
13  -->
14  
15  <style>
16    code {
17      font-size: 1.2em ;  /* make text enclosed in code tags slightly larger than */
18                          /*    the default size */
19      font-weight: bold ; /* display the text in code tags in boldface type */
20    }
21  </style>
22  
23  </head>
24  
25  <body>
26    <!-- main code to display text and graphic -->
27    <p><em>This text appears before the image.</em></p>
28    <img id="cover" src="..\PRO_Manual\Graphics\pro cover.jpg" width=200>
29    <p><em>This text appears after the image.</em></p>
30  
31    <!-- explanation of how the graphic is displayed -->
32    <p>The image above is being displayed by the HTML code:</p>
33    <blockquote>
34      <code>&lt;img id="cover" src="..\PRO_Manual\Graphics\pro cover.jpg" width=200></code></p>
35    </blockquote>
36  
37    <!-- placeholder for message to be displayed by JavaScript -->
38    <p id="message"></p>
39  
40    <script>
41      // get a reference to the img element with id="cover"
42      var elemImg = document.getElementById( "cover" ) ;
43      // get the value of the img element's width attribute
44      var imgWidth = elemImg.getAttribute( "width" ) ;
45      // show the type of that value in the browser console
46      console.log( "typeof imgWidth = " + typeof imgWidth ) ;
47      console.log( "imgWidth + imgWidth = " + ( imgWidth + imgWidth ) ) ;
48      console.log( "eval(imgWidth) + eval(imgWidth) = " + ( eval(imgWidth) + eval(imgWidth) ) ) ;
49  
50      // get a reference to the p element with id="message"
51      var elemMsg = document.getElementById( "message" ) ;
52      // show the type of the img element's width attribute value
53      elemMsg.innerHTML =
54          "<code>img </code>attribute<code> width </code> is of " +
55              "type:<code> " + typeof imgWidth + "<br>" +
56          "imgWidth + imgWidth = " + ( imgWidth + imgWidth ) + "<br>" +
57          "eval(imgWidth) + eval(imgWidth) = " + ( eval(imgWidth) + eval(imgWidth) ) +
58          "</code>" ;
59          ;
60    </script>
61  </body>
62  
63  </html>