title: Change image src to a local image using javascript?
body: <p>First time ever touching javascript here, so bear with me.
  My file structure looks like so:<br>
  <a href="https://i.stack.imgur.com/jrfzT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jrfzT.png" alt="enter image description here" /></a></p>
  <p>I want to change the image in my HTML using js. Here's the relevant HTML code:</p>
  <pre><code>    &lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Assignment 3A&lt;/title&gt;
          &lt;meta charset=&quot;UTF-8&quot;&gt;
          &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;style/assignment_3.css&quot;&gt;
          &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js&quot;&gt;&lt;/script&gt;
          &lt;script src=&quot;data/data.js&quot;&gt;&lt;/script&gt;
          &lt;script src=&quot;script/htmlMaker.js&quot;&gt;&lt;/script&gt;
          &lt;script src=&quot;script/assignment_3.js&quot;&gt;&lt;/script&gt;
          &lt;script id=&quot;news-detail-template&quot; type=&quot;text/html&quot;&gt;
                      &lt;img class='news_photo' src='{{photo}}' &gt;
          &lt;div class='news_heading'&gt;{{heading}}&lt;/div&gt;
          &lt;div class='date'&gt;{{Date}}&lt;/div&gt;
          &lt;div class='news_detail'&gt;{{details}}&lt;/div&gt;          
          &lt;/script&gt;  
          &lt;script id=&quot;news-item-template&quot; type=&quot;text/html&quot;&gt;
          &lt;div news_id='{{id}}' class='news_item' &gt; {{heading}} &lt;/div&gt; 
          &lt;img class='news_img' src='data/NBA.jpg'&gt;
          &lt;/script&gt;         
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div class=&quot;newsDiv&quot;&gt;
              &lt;div class=&quot;left&quot;&gt;Latest&lt;/div&gt;
              &lt;div id=&quot;news&quot; class=&quot;marquee&quot;&gt;&lt;/div&gt;
              &lt;img id=&quot;toggle&quot; class=&quot;right&quot; src=&quot;data/pause.png&quot; onclick=&quot;toggle(this)&quot;&gt;
          &lt;/div&gt;
          &lt;div id=&quot;detail&quot; class=&quot;detail&quot;&gt;
  
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>And then the corresponding js code in assignment_3.js:<br></p>
  <pre><code>function toggle(image) {
      if (image.src != &quot;data/pause.png&quot;)
      {
          image.src='data/pause.png';
      }
      else if (image.src == &quot;data/pause.png&quot;)
      {
          image.src='data/play.png';
      }
  }
  </code></pre>
  <p>Obviously, something is amiss here, as the browser doesn't seem to recognize my image paths at all. How would I go about doing this correctly?</p>