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

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

javascript api

如何使用onchange事件更新输入值，并以Javascript获取值？,javascript,api,fetch,Javascript,Api,Fetch,我正在做一个任务，在这里我使用fetch进行一个简单的API调用，以按品种检索狗的图像。我无法解决的一个问题是，当我尝试检索不同品种的图像时，输入值从未改变。默认值为“hound”，在我按submit后重新出现。我知道我需要将onchange事件附加到输入中，但我不确定如何写入它，或者在触发onchange事件后如何获取值。任何帮助都将不胜感激。我最初是用jQuery编写的，但决定用普通Javascript重写它，所以没有jQuery。我放了一个“response.json（））。然后（（r

我正在做一个任务，在这里我使用fetch进行一个简单的API调用，以按品种检索狗的图像。我无法解决的一个问题是，当我尝试检索不同品种的图像时，输入值从未改变。默认值为“hound”，在我按submit后重新出现。我知道我需要将onchange事件附加到输入中，但我不确定如何写入它，或者在触发onchange事件后如何获取值。任何帮助都将不胜感激。我最初是用jQuery编写的，但决定用普通Javascript重写它，所以没有jQuery。我放了一个“response.json（））。然后（（responseJson）=>显示结果（responseJson））； } 函数显示结果（responseJson）{ const dogImage=responseJson.message；让breedImage=“”；让容器=document.createElement（“div”）； console.log（dogImage）；繁殖年龄+=`； container.innerHTML=breedImage； document.querySelector（“.results img”）.innerHTML=“”； document.querySelector（“.results img”）.appendChild（容器）； } 函数submitButton（）{ 让breedName=document.querySelector（“#numberValue”）.value； breedName.addEventListener（）.onchange.value{ e、预防默认值（）； getJson（breedName）； }); } submitButton（）； HTML


狗用空气污染指数
提交
看这些狗！

您不需要一个

onchange

事件处理程序。当前，当您调用

submitButton

时，您正在将输入值存储在

breedName

中。这意味着，

breedName

永远不会更改，因为它只是当时对值的引用

而是创建对元素的引用，并读取submit事件处理程序中的

值

属性。这将得到您提交时的值。函数getJson（breedName）{ 控制台日志（breedName）； } 函数submitButton（）{ const form=document.querySelector（“#dog form”）；常量输入=document.querySelector（“#numberValue”）； form.addEventListener（'submit'，event=>{ event.preventDefault（）； const breedName=输入值； getJson（breedName）； }); } submitButton（）


狗用空气污染指数
提交
看这些狗！

非常感谢您的回复！我更改了功能，但它没有显示任何内容。我应该保留submit事件侦听器还是您要将其全部废弃？submit事件侦听器在

#dog input

元素上侦听事件，但我在您的示例中看不到它，因此它不会做任何事情。如果调用了

submitButton

函数，那么事件侦听器应该正在工作。您的控制台有错误吗？没有错误，它只是不显示任何图像。我真的很感谢你的意见！如果在

const breedName=…

行之后的更改事件处理程序中使用

console.log（breedName）

，它会说什么？您的

submitButton

是否被调用？我放置了一个console.log，但没有显示任何内容，事件侦听器一定出了问题。正在底部调用函数

submitButton

。

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();

<!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>