javascript - 尝试使用 javascript 对 html 表单上的数据使用react

Question

我不太确定这里出了什么问题。在表单上选择“提交”事件后，我没有看到记录到控制台的值。

这是我的 html:

<div>
                <form class="submit-film">
                    <p class="email">Email</p>
                    <input class="field" id="email" placeholder="youremail@example.com">
                    <p class="project_link">Link to your project:</p>
                    <input class="field" id="link" placeholder="https://vimeo.com/myfilm">
                    <p class="pw">Password to access film:</p>
                    <input class="field" id="pw" placeholder="(password to access project)"> 
                    <p class="number">How many screeners do you want?</p>
                    <input class="field" id="screenerAmount" placeholder="8 screeners">
                    <p class="please">Please attach a questionaire if you have one preparred:</p>
                    <button class="select">Select file</button>
                    <p class="length">How many minutes is your project?</p>
                    <input class="field" id="minutes" placeholder="15 minutes">
                    <p class="questions">Do you have any additional comments or questions?</p>
                    <input class="field" id="comments" placeholder="(insert comments/questions here)"> 
                    <input type="submit" class="button_type" class="button_type:hover" value="submit"> 
                </form>
            </div>
    </div>
    <script src="wescreen.js"></script>
</body>
</html>

这是 JavaScript:

const form = document.querySelector('.submit-film'); 

form.addEventListener('.submit', e=> {
    e.preventDefault(); 
    console.log(form.email.value); 
    console.log(form.link.value); 
    console.log(form.pw.value);
    console.log(form.screenerAmount.value); 
    console.log(form.minutes.value); 
    console.log(form.comments.value); 
}); 

Answer 1

刚刚将类更改为 id 并使用 getelementbyid 希望这会有所帮助

   <div>
    <form id="submit-film">
        <p class="email">Email</p>
        <input class="field" id="email" placeholder="youremail@example.com">
        <p class="project_link">Link to your project:</p>
        <input class="field" id="link" placeholder="https://vimeo.com/myfilm">
        <p class="pw">Password to access film:</p>
        <input class="field" id="pw" placeholder="(password to access project)">
        <p class="number">How many screeners do you want?</p>
        <input class="field" id="screenerAmount" placeholder="8 screeners">
        <p class="please">Please attach a questionaire if you have one preparred:</p>
        <button class="select">Select file</button>
        <p class="length">How many minutes is your project?</p>
        <input class="field" id="minutes" placeholder="15 minutes">
        <p class="questions">Do you have any additional comments or questions?</p>
        <input class="field" id="comments" placeholder="(insert comments/questions here)">
        <input type="submit" class="button_type" class="button_type:hover" value="submit">
    </form>
</div>
</div>
<script>
    const form = document.getElementById('submit-film');
    console.log(form);
    form.addEventListener('click', e => {
        e.preventDefault();
        console.log(form.email.value);
        console.log(form.link.value);
        console.log(form.pw.value);
        console.log(form.screenerAmount.value);
        console.log(form.minutes.value);
        console.log(form.comments.value);
    }); </script>