为什么我无法在表单中获取输入值

Question

我在页脚中有一个表单，现在我只想记录name字段的值，这是通过在我的queryselector的末尾添加.value属性来实现的。 不幸的是，这不能正常工作。

我的JS看起来像这样

submit.addEventListener('click', function(e) {
    e.preventDefault();
    let name = document.querySelector('#name').value;
    console.log(name);
})

由于某种原因，我得到了一个空字符串。 有任何想法吗

 const navLinks = document.querySelectorAll('.nav-links .link'); const linksArray = Array.from(document.querySelectorAll('.links div')); const header = document.querySelector('header'); const submit = document.querySelector('#submit'); for (var i = 0; i < navLinks.length; i++) { navLinks[i].addEventListener('click', changeColor); } for (var i = 0; i < linksArray.length; i++) { linksArray[i].addEventListener('click', shuffle); } function changeColor() { let hexArray = [0, 1, 2, 3, 4, 5, 6, 'A', 'B', 'C', 'D', 'E', 'F']; let hexColor = '#'; for(let i = 0; i < 6; i++) { let random = Math.floor(Math.random()*hexArray.length); hexColor += hexArray[random]; } header.style.background = hexColor; setTimeout(function() { header.style.backgroundImage = 'url(img/canada.jpeg)'; }, 2000); } function shuffle() { // Fisher-Yates shuffle algorithm for (let i = linksArray.length - 1; i > 0; i--) { let j = Math.floor(Math.random() * (i + 1)); [linksArray[i].innerHTML, linksArray[j].innerHTML] = [linksArray[j].innerHTML, linksArray[i].innerHTML]; } } submit.addEventListener('click', function(e) { e.preventDefault(); let name = document.querySelector('#name').value; console.log(name); }) 

 html, body { margin: 0; padding: 0; } body { font-family: 'Verdana'; box-sizing: border-box; color: #63889b; } /* * { outline: 1px solid red; }*/ /*------NAV-----*/ nav { display: flex; justify-content: space-between; font-size: 1.8rem; padding: 25px 0; position: fixed; background-color: #fff; width: 100%; top: 0; left: 0; right: 0; z-index: 10; } .brand, .nav-links { display: flex; align-items: center; } .brand { margin-left: 6%; } .logo { max-width: 70px; max-height: 45px; margin-right: 25px; } .nav-links { position: relative; margin-right: 6%; } .nav-links .link { text-transform: uppercase; margin-right: 20px; cursor: pointer; transition: all .2s ease; } .nav-links .link:hover { color: #014263; } /*-----HEADER-----*/ header { margin-top: 92px; background-image: url(img/canada.jpeg); /*background-position: center; background-size: cover;*/ padding-top: 7%; padding-bottom: 25%; } .header-info { color: #fff; font-size: 1.5rem; width: 22.5%; background-color: rgba(0,0,0,0.6); padding: 35px; margin-left: 10%; } header p { margin: 0; padding: 0; } header p:first-child { margin-bottom: 25px; } /*-----MAIN-----*/ main { display: flex; background-color: #fff; } .col { flex-basis: 33.33%; padding: 50px 0; } .col p { width: 65%; font-size: 1.25rem; text-align: center; margin-left: auto; margin-right: auto; } .col img { display: block; margin: 0 auto; } .col-3 img { width: 280px; height: 155px; } .col-3 img, .col-3 h3, .col-3 p { position: relative; top: -8px; } .col-2 img, .col-2 h3, .col-2 p { position: relative; top: 30px; } .col-1 { margin-left: 7%; } .col-3 { margin-right: 7%; } h3 { text-align: center; } /*------FOOTER-----*/ footer { font-family: 'Helvetica'; background-color: #63889b; display: flex; justify-content: space-between; color: #fff; padding-bottom: 30px; } .internal-links { padding-left: 15%; font-size: 1.5rem; } .links div { margin:2px 0; cursor: pointer; } .internal-links h4 { text-decoration: underline; text-align: center; margin-bottom: 8px; margin-top: 30PX; color: #fff; } .links { font-size: 1.2rem; display: flex; flex-direction: column; } .form-wrap { padding-top: 30px; display: flex; align-items: flex-end; flex-basis: 50%; } form { margin: 0 100px 0 0; display: flex; flex-direction: column; width: 100%; } input { border: none; outline: none; font-size: 1.6rem; } label { font-size: 1.3rem; padding: 3px 0; } button { margin-top: 20px; border: 1px solid #fff; width: 50%; font-size: 1.3rem; background-color: #1090d1; align-self: flex-end; color: #fff; padding: 4px 30px; } /*.dialog-wrap { background-color: rgba(0,0,0,0.7); position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; z-index: 1000; }*/ /*dialog { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 500px; height: 215px; border: none; display: flex; flex-direction: column; justify-content: flex-start; } dialog div { font-size: 1.4rem; color: #fff; margin: 10px 0; outline: 1px solid #63889b; } dialog div:first-child { margin-top: 0px; } dialog .label { background-color: #63889b; padding: 7px; display: inline-block; width: 30%; margin: 0; text-align: center; } dialog .info { display: inline-block; } dialog .buttons { outline: none; display: flex; justify-content: space-between; } dialog button { border: none; width: 49%; margin: 0; }*/ 

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Chapman Automotive Skills Assessment</title> <link rel="stylesheet" href="style.css"> </head> <body> <nav> <div class="brand"> <img src="img/Logo.png" alt="logo" class="logo"> <div class="comp-name">CHAPMAN</div> </div> <div class="nav-links"> <div class="link">Home</div> <div class="link">Sales</div> <div class="link">Blog</div> <div class="link">Login</div> </div> </nav> <header> <div class="header-info"> <p>We are a company that does stuff.</p> <p>Car and web stuff.</p> </div> </header> <main> <div class="col col-1"> <img src="img/car1.jpg" alt="car1"> <h3>Some Header</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo tempore quia enim quod, perferendis illum quae id, natus dolores temporibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati, rem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus tenetur mollitia officiis laudantium dolore ipsa.</p> </div> <div class="col col-2"> <img src="img/car2.jpg" alt="car2"> <h3>More Stuff</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo tempore quia enim quod, perferendis illum quae id, natus dolores temporibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, dolor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis, neque. Corporis quisquam eligendi libero omnis.</p> </div> <div class="col col-3"> <img src="img/car3.jpg" alt="car3"> <h3>Last Column</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo tempore quia enim quod, perferendis illum quae id, natus dolores temporibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, ipsa. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod quae, nihil error delectus voluptatum deserunt.</p> </div> </main> <footer id="footer"> <div class="internal-links"> <h4>Internal Links</h4> <div class="links"> <div>Page One</div> <div>Another Page</div> <div>Sales Page</div> <div>Page Three</div> <div>Keep Going</div> <div>Last One</div> <div>Just Kidding</div> </div> </div> <div class="form-wrap"> <form> <label for="Name">Name</label> <input type="text" id="Name" required> <label for="Name">Address</label> <input type="text" id="Address" required> <label for="Name">City</label> <input type="text" id="City" required> <button type="submit" id="submit">Submit Form</button> </form> <div class="dialog-wrap"> <dialog> <div><span class="label">Name:</span><input type="text" class="info"></div> <div><span class="label">Address:</span><input type="text" class="info"></div> <div><span class="label">City:</span><input type="text" class="info"></div> <div class="buttons"><button>Edit</button><button>Correct</button></div> </dialog> </div> </footer> <script src="script.js"></script> </body> </html> 

Answer 1

您没有得到一个空字符串，它TypeError: Cannot read property 'value' of null错误的TypeError: Cannot read property 'value' of null ，因为该元素的ID为“ Name”且您的查询选择器为'#name' （而不是"Name" ）。

这是您的代码的有效版本：

 const navLinks = document.querySelectorAll('.nav-links .link'); const linksArray = Array.from(document.querySelectorAll('.links div')); const header = document.querySelector('header'); const submit = document.querySelector('#submit'); for (var i = 0; i < navLinks.length; i++) { navLinks[i].addEventListener('click', changeColor); } for (var i = 0; i < linksArray.length; i++) { linksArray[i].addEventListener('click', shuffle); } function changeColor() { let hexArray = [0, 1, 2, 3, 4, 5, 6, 'A', 'B', 'C', 'D', 'E', 'F']; let hexColor = '#'; for(let i = 0; i < 6; i++) { let random = Math.floor(Math.random()*hexArray.length); hexColor += hexArray[random]; } header.style.background = hexColor; setTimeout(function() { header.style.backgroundImage = 'url(img/canada.jpeg)'; }, 2000); } function shuffle() { // Fisher-Yates shuffle algorithm for (let i = linksArray.length - 1; i > 0; i--) { let j = Math.floor(Math.random() * (i + 1)); [linksArray[i].innerHTML, linksArray[j].innerHTML] = [linksArray[j].innerHTML, linksArray[i].innerHTML]; } } submit.addEventListener('click', function(e) { e.preventDefault(); let name = document.querySelector('#Name').value; console.log(name); }) 

 html, body { margin: 0; padding: 0; } body { font-family: 'Verdana'; box-sizing: border-box; color: #63889b; } /* * { outline: 1px solid red; }*/ /*------NAV-----*/ nav { display: flex; justify-content: space-between; font-size: 1.8rem; padding: 25px 0; position: fixed; background-color: #fff; width: 100%; top: 0; left: 0; right: 0; z-index: 10; } .brand, .nav-links { display: flex; align-items: center; } .brand { margin-left: 6%; } .logo { max-width: 70px; max-height: 45px; margin-right: 25px; } .nav-links { position: relative; margin-right: 6%; } .nav-links .link { text-transform: uppercase; margin-right: 20px; cursor: pointer; transition: all .2s ease; } .nav-links .link:hover { color: #014263; } /*-----HEADER-----*/ header { margin-top: 92px; background-image: url(img/canada.jpeg); /*background-position: center; background-size: cover;*/ padding-top: 7%; padding-bottom: 25%; } .header-info { color: #fff; font-size: 1.5rem; width: 22.5%; background-color: rgba(0,0,0,0.6); padding: 35px; margin-left: 10%; } header p { margin: 0; padding: 0; } header p:first-child { margin-bottom: 25px; } /*-----MAIN-----*/ main { display: flex; background-color: #fff; } .col { flex-basis: 33.33%; padding: 50px 0; } .col p { width: 65%; font-size: 1.25rem; text-align: center; margin-left: auto; margin-right: auto; } .col img { display: block; margin: 0 auto; } .col-3 img { width: 280px; height: 155px; } .col-3 img, .col-3 h3, .col-3 p { position: relative; top: -8px; } .col-2 img, .col-2 h3, .col-2 p { position: relative; top: 30px; } .col-1 { margin-left: 7%; } .col-3 { margin-right: 7%; } h3 { text-align: center; } /*------FOOTER-----*/ footer { font-family: 'Helvetica'; background-color: #63889b; display: flex; justify-content: space-between; color: #fff; padding-bottom: 30px; } .internal-links { padding-left: 15%; font-size: 1.5rem; } .links div { margin:2px 0; cursor: pointer; } .internal-links h4 { text-decoration: underline; text-align: center; margin-bottom: 8px; margin-top: 30PX; color: #fff; } .links { font-size: 1.2rem; display: flex; flex-direction: column; } .form-wrap { padding-top: 30px; display: flex; align-items: flex-end; flex-basis: 50%; } form { margin: 0 100px 0 0; display: flex; flex-direction: column; width: 100%; } input { border: none; outline: none; font-size: 1.6rem; } label { font-size: 1.3rem; padding: 3px 0; } button { margin-top: 20px; border: 1px solid #fff; width: 50%; font-size: 1.3rem; background-color: #1090d1; align-self: flex-end; color: #fff; padding: 4px 30px; } /*.dialog-wrap { background-color: rgba(0,0,0,0.7); position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; z-index: 1000; }*/ /*dialog { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 500px; height: 215px; border: none; display: flex; flex-direction: column; justify-content: flex-start; } dialog div { font-size: 1.4rem; color: #fff; margin: 10px 0; outline: 1px solid #63889b; } dialog div:first-child { margin-top: 0px; } dialog .label { background-color: #63889b; padding: 7px; display: inline-block; width: 30%; margin: 0; text-align: center; } dialog .info { display: inline-block; } dialog .buttons { outline: none; display: flex; justify-content: space-between; } dialog button { border: none; width: 49%; margin: 0; }*/ 

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Chapman Automotive Skills Assessment</title> <link rel="stylesheet" href="style.css"> </head> <body> <nav> <div class="brand"> <img src="img/Logo.png" alt="logo" class="logo"> <div class="comp-name">CHAPMAN</div> </div> <div class="nav-links"> <div class="link">Home</div> <div class="link">Sales</div> <div class="link">Blog</div> <div class="link">Login</div> </div> </nav> <header> <div class="header-info"> <p>We are a company that does stuff.</p> <p>Car and web stuff.</p> </div> </header> <main> <div class="col col-1"> <img src="img/car1.jpg" alt="car1"> <h3>Some Header</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo tempore quia enim quod, perferendis illum quae id, natus dolores temporibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati, rem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus tenetur mollitia officiis laudantium dolore ipsa.</p> </div> <div class="col col-2"> <img src="img/car2.jpg" alt="car2"> <h3>More Stuff</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo tempore quia enim quod, perferendis illum quae id, natus dolores temporibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, dolor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis, neque. Corporis quisquam eligendi libero omnis.</p> </div> <div class="col col-3"> <img src="img/car3.jpg" alt="car3"> <h3>Last Column</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo tempore quia enim quod, perferendis illum quae id, natus dolores temporibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, ipsa. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod quae, nihil error delectus voluptatum deserunt.</p> </div> </main> <footer id="footer"> <div class="internal-links"> <h4>Internal Links</h4> <div class="links"> <div>Page One</div> <div>Another Page</div> <div>Sales Page</div> <div>Page Three</div> <div>Keep Going</div> <div>Last One</div> <div>Just Kidding</div> </div> </div> <div class="form-wrap"> <form> <label for="Name">Name</label> <input type="text" id="Name" required> <label for="Name">Address</label> <input type="text" id="Address" required> <label for="Name">City</label> <input type="text" id="City" required> <button type="submit" id="submit">Submit Form</button> </form> <div class="dialog-wrap"> <dialog> <div><span class="label">Name:</span><input type="text" class="info"></div> <div><span class="label">Address:</span><input type="text" class="info"></div> <div><span class="label">City:</span><input type="text" class="info"></div> <div class="buttons"><button>Edit</button><button>Correct</button></div> </dialog> </div> </footer> <script src="script.js"></script> </body> </html> 

Answer 2

我发现您的代码在控制台中显示此错误：

TypeError：无法读取空错误的属性“值”

这意味着，当您尝试检索#name的值时，会得到一个空字符串，这是因为定义的元素的id在这里是Name ： <input type="text" id="Name" required> 。

我该如何解决？

好吧，只需将您的id定义替换为name ， address和city ：

<input type="text" id="name" required>
<input type="text" id="address" required>
<input type="text" id="city" required>

这是一个例子：

 const submit = document.querySelector('#submit'); submit.addEventListener('click', function(e) { e.preventDefault(); let name = document.querySelector('#name').value; let address = document.querySelector('#address').value; let city = document.querySelector('#city').value; console.log({name: name, address: address, city: city}); }) 

 html, body { margin: 0; padding: 0; } body { font-family: 'Verdana'; box-sizing: border-box; color: #63889b; } /* * { outline: 1px solid red; }*/ /*------NAV-----*/ nav { display: flex; justify-content: space-between; font-size: 1.8rem; padding: 25px 0; position: fixed; background-color: #fff; width: 100%; top: 0; left: 0; right: 0; z-index: 10; } .brand, .nav-links { display: flex; align-items: center; } .brand { margin-left: 6%; } .logo { max-width: 70px; max-height: 45px; margin-right: 25px; } .nav-links { position: relative; margin-right: 6%; } .nav-links .link { text-transform: uppercase; margin-right: 20px; cursor: pointer; transition: all .2s ease; } .nav-links .link:hover { color: #014263; } /*------FOOTER-----*/ footer { font-family: 'Helvetica'; background-color: #63889b; display: flex; justify-content: space-between; color: #fff; padding-bottom: 30px; } .internal-links { padding-left: 15%; font-size: 1.5rem; } .links div { margin: 2px 0; cursor: pointer; } .internal-links h4 { text-decoration: underline; text-align: center; margin-bottom: 8px; margin-top: 30PX; color: #fff; } .links { font-size: 1.2rem; display: flex; flex-direction: column; } .form-wrap { padding-top: 30px; display: flex; align-items: flex-end; flex-basis: 50%; } form { margin: 0 100px 0 0; display: flex; flex-direction: column; width: 100%; } input { border: none; outline: none; font-size: 1.6rem; } label { font-size: 1.3rem; padding: 3px 0; } button { margin-top: 20px; border: 1px solid #fff; width: 50%; font-size: 1.3rem; background-color: #1090d1; align-self: flex-end; color: #fff; padding: 4px 30px; } 

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Chapman Automotive Skills Assessment</title> <link rel="stylesheet" href="style.css"> </head> <body> <footer id="footer"> <div class="internal-links"> <h4>Internal Links</h4> <div class="links"> <div>Page One</div> </div> </div> <div class="form-wrap"> <form> <label for="Name">Name</label> <input type="text" id="name" required> <label for="Name">Address</label> <input type="text" id="address" required> <label for="Name">City</label> <input type="text" id="city" required> <button type="submit" id="submit">Submit Form</button> </form> <div class="dialog-wrap"> <dialog> <div><span class="label">Name:</span><input type="text" class="info"></div> <div><span class="label">Address:</span><input type="text" class="info"></div> <div><span class="label">City:</span><input type="text" class="info"></div> <div class="buttons"><button>Edit</button><button>Correct</button></div> </dialog> </div> </footer> <script src="script.js"></script> </body> </html>