两个文件位于同一目录中。我不知道为什么addFormEventListenernull，因为我在HTML中编写了完全相同的代码并且它正在工作。
有什么想法吗？谢谢！
项目文件
安慰
形式
表单详细信息
来源
新上市
添加作业.js
window.onload=function(){
const addForm = document.querySelector(".add");
addForm.addEventListener("submit", e =>{
e.preventDefault();
const todo = addForm.add.value.trim();
console.log(todo);
});
};``
添加作业.php
<!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>
<h1>Add A Job</h1>
<form id="new-listing" action="add-database.php" method="POST">
<p>
<label for="position">Position : </label>
<input name="position" type="text" placeholder="e.g Assistant CEO" required>
</p>
<p>
<label for="job-type">Type : </label>
<select name="job-type">
<option value="fulltime">Full-time</option>
<option value="parttime">Part-time</option>
<option value="temporary">Temporary</option>
</select>
</p>
<p>
<label for="location">Location : </label>
<input name="location" type="text" placeholder="e.g Bangkok" required>
</p>
<p>
<label for="salary">Salary (per year) : </label>
<input name="salary" type="number">
<select name="currency">
<option value="usd">USD</option>
<option value="mmk" selected data-default>MMK</option>
</select>
</p>
<p>
<label for="requirements">Requirements : </label>
<select name="job-type">
<option value="fulltime">Full-time</option>
<option value="parttime">Part-time</option>
<option value="temporary">Temporary</option>
</select>
</p>
<form class="add">
<label for="keywords">Keywords : </label>
<input type="text" name="add" value=""/>
</form>
<ul class="list-keywords">
</ul>
<p>
<label for="description">Description : </label>
<br>
<textarea name="description" id="" cols="30" rows="10" required></textarea>
</p>
<?php
$tm = time();
$publisheddate = date("m/d/y",$tm);
echo "Date of publication : ". $publisheddate."<br>";
?>
<button type="submit" name="submit">Submit</button>
</form>
</body>
<script src="./add-jobs.js"></script>
</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">
<title>Document</title>
</head>
<body>
<h1>Add A Job</h1>
<form id="new-listing" action="add-database.php" method="POST">
<p>
<label for="position">Position : </label>
<input name="position" type="text" placeholder="e.g Assistant CEO" required>
</p>
<p>
<label for="job-type">Type : </label>
<select name="job-type">
<option value="fulltime">Full-time</option>
<option value="parttime">Part-time</option>
<option value="temporary">Temporary</option>
</select>
</p>
<p>
<label for="location">Location : </label>
<input name="location" type="text" placeholder="e.g Bangkok" required>
</p>
<p>
<label for="salary">Salary (per year) : </label>
<input name="salary" type="number">
<select name="currency">
<option value="usd">USD</option>
<option value="mmk" selected data-default>MMK</option>
</select>
</p>
<p>
<label for="requirements">Requirements : </label>
<select name="job-type">
<option value="fulltime">Full-time</option>
<option value="parttime">Part-time</option>
<option value="temporary">Temporary</option>
</select>
</p>
<div id="add">
<label for="keywords">Keywords : </label>
<input type="text" name="add" value=""/>
</div>
<ul class="list-keywords">
</ul>
<p>
<label for="description">Description : </label>
<br>
<textarea name="description" id="" cols="30" rows="10" required></textarea>
</p>
Date of publication : 08/17/19<br> <button type="submit" name="submit">Submit</button>
</form>
</body>
<script src="./add-jobs.js"></script>
</html>
替换
addForm.addEventListener("submit", e =>{
e.preventDefault();
const todo = addForm.add.value.trim();
console.log(todo);
});
由
addForm[0].addEventListener("submit", e =>{
e.preventDefault();
const todo = addForm[0].add.value.trim();
console.log(todo);
});
或者简单地给你的表格一个 id exid="frm" 并使用
const addForm = document.querySelector("#frm"(;