时间戳

首页 > 解决方案 > 如何使用 onchange 事件更新输入值并在 vanilla Javascript 中获取值？

javascript - 如何使用 onchange 事件更新输入值并在 vanilla Javascript 中获取值？

问题描述

我正在做一个任务，我使用 fetch 进行简单的 API 调用，以按品种检索狗的图像。我无法解决的一个问题是，当我尝试检索不同品种的图像时，输入值永远不会改变。默认值，即“猎犬”，在我按下提交后重新出现。我知道我需要将 onchange 事件附加到我的输入中，但我不确定如何编写它或在触发 onchange 事件后如何获取值。任何帮助将不胜感激。我最初是用 jQuery 编写的，但决定用 vanilla Javascript 重写它，所以这就是没有 jQuery 的原因。我在我正在努力解决的问题上加了一个“<---”。

PS我知道我的代码不是很好，我是新手。

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>

标签： javascriptapifetch

解决方案

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

而是创建对元素的引用并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>

推荐阅读