JavaScript 如何使用公共 API 和純 JavaScript 更改輸入值

Question

誰能向我解釋為什么單擊提交按鈕后無法更新輸入值？ 我的目標是寫一個數字，單擊提交按鈕並找到具有該數字的神奇寶貝。

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> </head> <body> <div class="pokemon"></div> <button id="btn" onclick="testFunc(inputValue)">SUBMIT</button> <input type="text" value="" id="myInput"> <script> const btn = document.getElementById("btn"); const input = document.getElementById("myInput"); let inputValue = input.value; const testFunc = function(a) { const apiData = { url: 'https://pokeapi.co/api/v2/', type: 'pokemon', id: a, } const { url, type, id } = apiData const apiUrl = `${url}${type}/${id}` fetch(apiUrl) .then((data) => { if (data.ok) { return data.json() } throw new Error('Response not ok.'); }) .then(pokemon => generateHtml(pokemon)) .catch(error => console.error('Error:', error)) const generateHtml = (data) => { console.log(data) const html = ` <div class="name">${data.name}</div> <img src=${data.sprites.front_default}> <div class="details"> <span>Height: ${data.height}</span> <span>Weight: ${data.weight}</span> </div> ` const pokemonDiv = document.querySelector('.pokemon') pokemonDiv.innerHTML = html } } </script> </body> </html>

我將不勝感激任何建議。

此致

Answer 1

您需要在testFunc函數內移動inputValue檢索。

const testFunc = function() {
  let inputValue = input.value;
  const apiData = {
    url: 'https://pokeapi.co/api/v2/',
    type: 'pokemon',
    id: inputValue,
  }

按鈕的onclick只知道它自己，它不能引用input 。

 const btn = document.getElementById("btn"); const input = document.getElementById("myInput"); const testFunc = function() { let inputValue = input.value; const apiData = { url: 'https://pokeapi.co/api/v2/', type: 'pokemon', id: inputValue, } const { url, type, id } = apiData const apiUrl = `${url}${type}/${id}` fetch(apiUrl) .then((data) => { if (data.ok) { return data.json() } throw new Error('Response not ok.'); }) .then(pokemon => generateHtml(pokemon)) .catch(error => console.error('Error:', error)) const generateHtml = (data) => { //console.log(data) <-- Slows down the result const html = ` <div class="name">${data.name}</div> <img src=${data.sprites.front_default}> <div class="details"> <span>Height: ${data.height}</span> <span>Weight: ${data.weight}</span> </div> ` const pokemonDiv = document.querySelector('.pokemon') pokemonDiv.innerHTML = html } }

 <div class="pokemon"></div> <button id="btn" onclick="testFunc()">SUBMIT</button> <input type="text" value="25" id="myInput"> <!-- Default to Pikachu -->

JavaScript 如何使用公共 API 和純 JavaScript 更改輸入值

問題描述

1 個解決方案

解決方案1
1 2020-01-02 18:33:17

JavaScript 如何使用公共 API 和純 JavaScript 更改輸入值

問題描述

1 個解決方案

解決方案1 1 2020-01-02 18:33:17

解決方案1
1 2020-01-02 18:33:17