GET http://0.0.0.0:8080/index.html?age=8&rel= 404（/找不到对象）

Question

I am trying to see the values entered into the form via console.log, but I am getting this error message.我正在尝试查看通过 console.log 输入表单的值，但收到此错误消息。 I am not sure why this is happening.我不确定为什么会这样。 Is it somehow connected to the local server?它是否以某种方式连接到本地服务器？ or is it a JS problem?还是 JS 的问题？ Would appreciate any light that can be shed.将不胜感激任何可以散发的光芒。 thank you!谢谢你！

this is the JavaScript code (index.js)这是 JavaScript 代码（index.js）

// Person Constructor
  function Person(age, relationship, smoker){
    this.age = age;
    this.relationship = relationship;
    this.smoker = smoker;
  }

  // UI Constructor
  function UI() {}

  // Event Listeners
  document.querySelector('form').addEventListener('submit',
   function(e){
    const age = document.getElementsByName("age")[0].value,
          relationship = document.getElementsByName("relationship")[0].value,
          smoker = document.getElementsByName("smoker")[0].value
    console.log(age, relationship, smoker)
    e.preventDefault();
   });

and this is index.html这是 index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Household builder</title>
        <style>
            .debug {
                font-family: monospace;
                border: 1px solid black;
                padding: 10px;
                display: none;
            }
        </style>
    </head>
    <body>
        <h1>Household builder</h1>
        <div class="builder">
            <ol class="household"></ol>
            <form>
                <div>
                    <label>Age
                        <input type="text" name="age">
                    </label>
                </div>
                <div>
                    <label>Relationship
                        <select name="rel">
                            <option value="">---</option>
                            <option value="self">Self</option>
                            <option value="spouse">Spouse</option>
                            <option value="child">Child</option>
                            <option value="parent">Parent</option>
                            <option value="grandparent">Grandparent</option>
                            <option value="other">Other</option>
                        </select>
                    </label>
                </div>
                <div>
                    <label>Smoker?
                        <input type="checkbox" name="smoker">
                    </label>
                </div>
                <div>
                    <button class="add">add</button>
                </div>
                <div>
                    <button type="submit">submit</button>
                </div>
            </form>
        </div>
        <pre class="debug"></pre>
        <script type="text/javascript" src="./index.js"></script>
    </body>
</html>

Answer 1

You're using document.getElementsByName("relationship") , but your relationship element is actually using name="rel" ;您正在使用document.getElementsByName("relationship") ，但您的关系元素实际上是在使用name="rel" ； switch that line to document.getElementsByName("rel") and you should be good!将该行切换到document.getElementsByName("rel")你应该很好！

You're getting the error message because that line of JS is failing, which means the later e.preventDefault();您收到错误消息是因为那一行 JS 失败，这意味着后面的e.preventDefault(); line never executes, which means your form is actually posting.行从不执行，这意味着您的表单实际上正在发布。 If you check the JS console, you should see an error like TypeError: document.getElementsByName(...)[0] is undefined如果您检查 JS 控制台，您应该会看到类似TypeError: document.getElementsByName(...)[0] is undefined的错误

Note also that for your checkbox, you are right now retrieving the value attribute, which will always just be the string "on";另请注意，对于您的复选框，您现在正在检索value属性，该属性始终只是字符串“on”； you probably want to be using the checked attribute, which will tell you whether or not the box has been checked.您可能想要使用checked属性，它会告诉您该框是否已被选中。

GET http://0.0.0.0:8080/index.html?age=8&rel= 404（/找不到对象）

问题描述

1 个解决方案

解决方案1
1 2020-04-23 17:53:42

GET http://0.0.0.0:8080/index.html?age=8&amp;rel= 404（/找不到对象）

问题描述

1 个解决方案

解决方案1 1 2020-04-23 17:53:42

GET http://0.0.0.0:8080/index.html?age=8&rel= 404（/找不到对象）

解决方案1
1 2020-04-23 17:53:42