Question

我正在使用 React 构建一个基于 API 的小型 Web 应用程序，但遇到了问题。我正在学习教程，这段代码适用于他 - 但不适用于我。我完全不知道该怎么做！我的html：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1> Geodoggies </h1>

    <div id = "breed">

    </div>
</body>
</html>

我的JS

//fetches the breed list
async function start() {
  const response = await fetch('https://dog.ceo/api/breeds/list/all')
  const data = await response.json()
  createBreedList(data.message)
}
start()

//creates the select element for dog breeds
function createBreedList(breedList) {
  document.getElementById('breed').innerHTML = `
    <select onchange="loadByBreed(this.value)">
      
    <option>Choose a dog breed</option>
      ${Object.keys(breedList)
        .map(function (breed) {
          return `<option>${breed}</option>`
        })
        .join('')}
     </select>
  `
}

function loadByBreed(breed) {
  alert(breed)
  // if (breed !== 'Choose a dog breed') {
  //   const response = await fetch(`https://dog.ceo/api/breed/${breed}/images`)
  //   const data = await response.json()
  //   console.log(data)
  // }
}

如有任何帮助，将不胜感激，谢谢！

(index):1 Uncaught ReferenceError:(function) is not defined at HTMLSelectElement.onchange

0 个答案: