title: What does each line of this code do?
body: <p>I'm new to Javascript coding and I've come across this TryIt page on w3schools. I understand that the code creates two buttons, which turn a bulb on and off when clicked, but I'd like some more detailed explanation from some Javascript experts on what each line in this code exactly does.</p>
  
  <p>For example, does </p>
  
  <pre><code>&lt;button onclick="document.getElementById('myImage').src='pic_bulbon.gif'"&gt;
  </code></pre>
  
  <p>just create a button and make the image titled bulbon.gif appear when clicked? I'm slightly confused. Here is the code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;body&gt;
  
  &lt;h2&gt;What Can JavaScript Do?&lt;/h2&gt;
  
  &lt;p&gt;JavaScript can change HTML attributes.&lt;/p&gt;
  
  &lt;p&gt;In this case JavaScript changes the src (source) attribute of an image.    &lt;/p&gt;
  
  &lt;button onclick="document.getElementById('myImage').src='pic_bulbon.gif'"&gt;Turn on the light&lt;/button&gt;
  
  &lt;img id="myImage" src="pic_bulboff.gif" style="width:100px"&gt;
  
  &lt;button onclick="document.getElementById('myImage').src='pic_bulboff.gif'"&gt;Turn off the light&lt;/button&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Thanks.</p>