Question

我正在做一个作业，我使用fetch进行简单的API调用，以按品种检索狗的图像。我无法解决的一个问题是，当我尝试检索不同品种的图像时，输入值永远不会改变。按提交后，将再次显示默认值“ hound”。我知道我需要将onchange事件附加到我的输入上，但是我不确定在onchange事件触发后如何编写它或如何获取值。任何帮助将不胜感激。我最初是用jQuery编写的，但后来决定用香草Javascript重写它，所以这就是为什么没有jQuery的原因。我在苦苦挣扎的线上加了“ <---”。

P.S我知道我的代码不是很好，这是我的新手。

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>

Answer 1

您不需要onchange事件处理程序。当前，您在调用breedName时会将输入的值存储在submitButton中。这意味着breedName永远不会改变，因为它只是那时对值的引用。

相反，创建对元素的引用，并在Submit事件处理程序中读取value属性。这将获得您提交时的价值。

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>

如何使用onchange事件更新输入值并使用Vanilla Javascript获取值？

1 个答案: