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

Question

I have a form in the footer and right now I just want to log the value of the name field.I'm doing this by adding the .value property ay the end of my queryselector. This isn't working unfortunately.

My JS looks like this

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

I'm getting an empty string for some reason. Any Ideas

 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

You are not getting an empty string, it's throwing TypeError: Cannot read property 'value' of null error, because the id of the element is "Name" and your query selector is '#name' (instead of "Name" ).

Here is a working version of your code:

 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

I found that your code shows this error in the console:

TypeError: Cannot read property 'value' of null error

This means that when you are trying to retrieve the value of #name you got an empty string, This is because the id of the element you defined is Name here: <input type="text" id="Name" required> .

How can I fix it?

Well just replace your id definitions to name , address and city :

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

This is an example:

 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>