时间戳

首页 > 解决方案 > GET http://0.0.0.0:8080/index.html?age=8&rel= 404 (/找不到对象)

javascript - GET http://0.0.0.0:8080/index.html?age=8&rel= 404 (/找不到对象)

问题描述

我正在尝试查看通过 console.log 输入表单的值，但收到此错误消息。我不确定为什么会这样。它是否以某种方式连接到本地服务器？还是 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();
   });

这是 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>

标签： javascripthtml

解决方案

您正在使用document.getElementsByName("relationship")，但您的关系元素实际上正在使用name="rel"; 切换那条线document.getElementsByName("rel")，你应该很好！

您收到错误消息是因为该 JS 行失败，这意味着后面的e.preventDefault();行永远不会执行，这意味着您的表单实际上正在发布。如果你检查 JS 控制台，你应该会看到类似的错误TypeError: document.getElementsByName(...)[0] is undefined

另请注意，对于您的复选框，您现在正在检索value属性，该属性始终只是字符串“on”；您可能想要使用该checked属性，它会告诉您该框是否已被选中。

推荐阅读