title: HTML: Program a button to have an onclick, and use getmdl.io at the same time?
body: <p>the following is my code:</p>
  
  <p>
      </p>
  
  <pre><code>    &lt;script&gt;
  
          function changeImage(imgName)
          {
              image = document.getElementById('imgDisp');
              image.src = imgName;
          }
  
      &lt;/script&gt;
  
      &lt;link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"&gt;
      &lt;link rel="stylesheet" href="https://code.getmdl.io/1.1.1/material.indigo-pink.min.css"&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" type="button" OnClick="changeImage'https://cdn.pbrd.co/images/1N3JpOlC.png'"&gt;Change Image&lt;/button&gt;
  
      &lt;br /&gt;
  
      &lt;img id="imgDisp" src="https://cdn.pbrd.co/images/1N3JpOlC.png" /&gt;
  
  
  &lt;/body&gt;
  &lt;script defer src="https://code.getmdl.io/1.1.1/material.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p></p>
  
  <p>Please note that I am new to coding, so chances are the code looks messy and wrong. Anyway, I would like the button to have the style of material code which is the 'class' after the button</p>
  
  <p>As well, as having an onclick function to change the image. I will have an image as a start, and every time changeimage is pressed it will change to one of four images in the order of an array. But below is just a test of using the changeImage with the material design button.</p>
  
  <p>I'm not looking for it to get done for me, but instead, what methods should I take to fix it myself. Such as hints. Any help is appreciated, and once again. My code is not the clean, and I chances are I'm doing some fairly cringe worthy mistake.</p>
  
  <p>Thank you. </p>