Question

不确定我是否理解为什么显示此错误。在HandleSubmit.js中注释getCityData("username", where)时，错误似乎消失了。我已经检查了与此相关的答案，但似乎没有关联。

JS: Uncaught TypeError: object is not a function (onclick)

预先感谢

错误

HandleSubmit.js:16 Uncaught TypeError: Object(...) is not a function
    at HTMLButtonElement.addHandleSubmit (HandleSubmit.js:16)

getData.js

import axios from 'axios';

 async function getCityData(username, city) {
    const url=  "http://api.geonames.org/searchJSON?q=",
    completeURL = `${url}${city}&username=${username}`
    console.log(completeURL)

    try {
        let data = await axios.get(completeURL).then((response) => {
            console.log(response.data);
            console.log(response.status);
            console.log(response.statusText);
            console.log(response.headers);
            console.log(response.config);
            data = response;
          });
          return data;

    }
    catch(error) {
        console.log("error", error);
      }



}

export default  {
    getCityData
}

HandleSubmit.js

import getCityData from "./getData"



function addHandleSubmit (e) {
    e.preventDefault()
    const where = document.getElementById("where").value
    const when = document.getElementById("when").value

    // if (where=='' || when=='') {
    //     alert('Please make sure you have add a Where and When')
    // }
    console.log(`To ${where} departing ${when}`)


   getCityData("username", where)




}
export default {
    addHandleSubmit
}

index.js

import "./styles/styles.scss";
import addHandle from "./js/HandleSubmit";
import getCityData from "./js/getData";


document.getElementById("add-trip").addEventListener('click', addHandle.addHandleSubmit)

export {
    addHandle,
    getCityData

}

index.html

                 <div class="add-trip-form">
                        <form>
                            <label for="where"> where</label>
                            <input type="text" id="where"> 
                            <label for="when"> When</label>
                            <input type="date" id="when">
                            <button class="add-trip-class" id="add-trip"> Add Trip</button>
                        </form>
                    </div>

Answer 1

在HandleSubmit.js中，您应该这样导入：

import { getCityData } from "./getData"

否则，您将导入getCityData作为对象，而不是函数。这就是为什么您会收到该错误

未捕获的TypeError：Object（...）不是HTMLButtonElement.addHandleSubmit的函数

1 个答案: