Question

您好我正在尝试获取表单的值，将它们转换为Object，然后在页面底部显示所述对象。我最终想学习从API发送和访问。但我希望看到我的对象首先出现。

<!doctype html>
<html>
<body>
<form id="submitF" class="formClass" >


    <input id="inp1" type="text" /></br></br>

    <input id="inp2" type="text"/></br></br>

    <input id="inp3" type="text"/> </br></br>

    <input id="inp4" type="text" /> </br></br>

    <input id="inp5" type="text"/></br></br>

      <button id="btn" type="submit" OnClick=button() > Submit </button>
</form>

<script>
var myObject = new Object(); {
inp1 = document.getElementById('inp1');
inp2 = document.getElementById('inp2');
inp3 = document.getElementById('inp3');
inp4 = document.getElementById('inp4');
inp5 = document.getElementById('inp5');
}


var button = function(myObject){

for(var i = 0; i < apartment.length; i++ ){
console.log(myObject(i));
}

};

</script>

Answer 1

您创建对象的语法错误，您不需要new Object();，并且在;之后使用对象 - 文字语法意味着将忽略该表达式。将其更改为：
```
var myObject = {
    inp1 = ...
};
```
document.getElementById( id )返回HTMLElement个对象，而不是其中包含的值，您将需要使用.value属性：
```
inp1 = document.getElementById('inp1').value
```

定义object-literal时不要使用分号，请使用逗号：

inp1 = document.getElementById('inp1').value,
inp2 = document.getElementById('inp2').value,
inp3 = document.getElementById('inp3').value

避免使用onclick（作为属性或onclick=""属性）。而是使用addEventListener DOM方法：

var button = document.getElementById("btn");
button.addEventListener( 'click', function(e) {

    alert("you clicked the button.")
} );

您的代码引用了一个名为apartment的对象，该对象不存在。我假设您的意思是myObject，但是您正在迭代整数索引，这些索引不存在，因为myObject不是array而是object（数组具有索引值，对象具有命名属性。）

Answer 2

将按钮类型从提交更改为按钮，并按如下方式更改脚本：

<form id="submitF" class="formClass" >
    <input id="inp1" type="text" />

    <input id="inp2" type="text"/>

    <input id="inp3" type="text"/>

    <input id="inp4" type="text" />

    <input id="inp5" type="text"/>

    <button id="btn" type="button" onclick="button()"> Submit </button>
</form>

<script>
    var button = function(){
      var myObject = {
        inp1: document.getElementById('inp1').value,
        inp2: document.getElementById('inp2').value,
        inp3: document.getElementById('inp3').value,
        inp4: document.getElementById('inp4').value,
        inp5: document.getElementById('inp5').value,
      }
      console.log(myObject);
    }
</script>

将对象发送到数据库和API的javascript中

2 个答案: