How do I update the input value using an onchange event and get the value in vanilla Javascript?

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 '<---' on the line I am struggling with.

P.S I know my code isn't very good, I am new to this.

JavaScript

function getJson(breed) {
  fetch("https://dog.ceo/api/breed/" + breed + "/images/random")
    .then((response) => response.json())
    .then((responseJson) => displayResults(responseJson));
}

function displayResults(responseJson) {
  const dogImage = responseJson.message;
  let breedImage = "";
  let container = document.createElement("div");
  console.log(dogImage);
  breedImage += `<img src="${dogImage}">`;
  container.innerHTML = breedImage;
  document.querySelector(".results-img").innerHTML = "";
  document.querySelector(".results-img").appendChild(container);
}

function submitButton() {
  let breedName = document.querySelector("#numberValue").value;
  breedName.addEventListener().onchange.value; <---
  document.getElementById("dog-input").addEventListener("submit", (e) => {
    e.preventDefault();
    getJson(breedName);
  });
}

submitButton();

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Dog Api</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <form>
        <input id="numberValue" type="text" value="hound" />
        <button type="submit" class="submit-button">Submit</button>
      </form>
      <section class="results">
        <h2>Look at these Dogs!</h2>
        <div class="results-img"></div>
      </section>
    </div>
    <script src="main.js"></script>
  </body>
</html>

Solution

You don't need an onchange event handler. Currently you're storing the value of the input in breedName when you call submitButton. That means that breedName will never change because it is merely a reference to the value at that moment.

Instead create a reference to the element and read the value property in the submit event handler. That will get the value how it is at the time you submit.

function getJson(breedName) {
  console.log(breedName);
}

function submitButton() {
  const form = document.querySelector('#dog-form');
  const input = document.querySelector('#numberValue');
  form.addEventListener('submit', event => {
    event.preventDefault();
    const breedName = input.value;
    getJson(breedName);
  });
}

submitButton()

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Dog Api</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <form id="dog-form">
        <input id="numberValue" type="text" value="hound" />
        <button type="submit" class="submit-button">Submit</button>
      </form>
      <section class="results">
        <h2>Look at these Dogs!</h2>
        <div class="results-img"></div>
      </section>
    </div>
    <script src="main.js"></script>
  </body>
</html>