Question

我正在遵循本教程https://www.learnwithjason.dev/blog/get-form-values-as-json/，但是在本教程的第一步（第1步：将侦听器添加到表单的Submit Event）中遇到了一个问题。我正在尝试制作一个函数，该函数在单击按钮时会得到按钮的结果。它应该以JSON形式返回数据。到目前为止，我的JavaScript文件中已有以下代码：

const handleFormSubmit = event => {  
    event.preventDefault();

    const data = {};

    const dataContainer = document.getElementsByClassName('results__display')[0];

    dataContainer.textContent = JSON.stringify(data, null, "  ");
}

const form = document.getElementsByClassName('contact-form')[0];
form.addEventListener('submit', handleFormSubmit);

错误： questionnaireGetData.js:4 Uncaught TypeError: Cannot read property 'addEventListener' of undefined at questionnaireGetData.js:4

QuestionnaireGetData 是javascript文件的名称。

这是我的HTML文件：

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

    <script src="js/questionnaire.js"></script>
    <script src="js/questionnaireGetData.js"></script>

    <title>Questionnaire</title>
</head>

<body>


<div id="outside">

    <form class="contact-form">
        <header>
            <ul id="data"></ul>
            <div id="radioButton"></div>
            <div id="checkbox"></div>
        </header>

        <nav class="navbar">
            <ul id="navbar-nav">
                <li><button class ="backBtn"
                            onclick="window.location.href = './index.html';"
                            type="button"> Back
                    </button>
                </li>

                <li><button class="backBtn" id="submit"
                            type="button">Submit
                    </button></li>
            </ul>
        </nav>
    </form>

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

我当前在控制台中遇到以下错误：

form.addEventListener('submit', handleFormSubmit);

我对JavaScript没有太多经验，也无法弄清楚自己在做什么错。

提交表单时将事件侦听器添加到按钮

0 个答案: