title: How do I update the input value using an onchange event and get the value in vanilla Javascript?
body: <p>I am doing an assignment where I make a simple API call using fetch to retrieve an image a of dog by breed. The one issue I can't resolve is that the input value never changes when I try to retrieve an image of a different breed. the default value, which is 'hound', reappears after I press submit. I know I need to attach an onchange event to my input but I am not sure how to write it or how to get the value after the onchange event is triggered. Any help would be greatly appreciated. I originally wrote this with jQuery but decided to rewrite it in vanilla Javascript so that's why there is no jQuery.
  I put a '&lt;---' on the line I am struggling with.</p>
  <p>P.S I know my code isn't very good, I am new to this.</p>
  <p>Javascript</p>
  <pre><code>function getJson(breed) {
    fetch(&quot;https://dog.ceo/api/breed/&quot; + breed + &quot;/images/random&quot;)
      .then((response) =&gt; response.json())
      .then((responseJson) =&gt; displayResults(responseJson));
  }
  
  function displayResults(responseJson) {
    const dogImage = responseJson.message;
    let breedImage = &quot;&quot;;
    let container = document.createElement(&quot;div&quot;);
    console.log(dogImage);
    breedImage += `&lt;img src=&quot;${dogImage}&quot;&gt;`;
    container.innerHTML = breedImage;
    document.querySelector(&quot;.results-img&quot;).innerHTML = &quot;&quot;;
    document.querySelector(&quot;.results-img&quot;).appendChild(container);
  }
  
  function submitButton() {
    let breedName = document.querySelector(&quot;#numberValue&quot;).value;
    breedName.addEventListener().onchange.value; &lt;---
    document.getElementById(&quot;dog-input&quot;).addEventListener(&quot;submit&quot;, (e) =&gt; {
      e.preventDefault();
      getJson(breedName);
    });
  }
  
  submitButton();
  </code></pre>
  <p>HTML</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
    &lt;head&gt;
      &lt;meta charset=&quot;UTF-8&quot; /&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot; /&gt;
      &lt;title&gt;Dog Api&lt;/title&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot; /&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div class=&quot;container&quot;&gt;
        &lt;form&gt;
          &lt;input id=&quot;numberValue&quot; type=&quot;text&quot; value=&quot;hound&quot; /&gt;
          &lt;button type=&quot;submit&quot; class=&quot;submit-button&quot;&gt;Submit&lt;/button&gt;
        &lt;/form&gt;
        &lt;section class=&quot;results&quot;&gt;
          &lt;h2&gt;Look at these Dogs!&lt;/h2&gt;
          &lt;div class=&quot;results-img&quot;&gt;&lt;/div&gt;
        &lt;/section&gt;
      &lt;/div&gt;
      &lt;script src=&quot;main.js&quot;&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>