Question

大家好，我是javascript的新手，有一段时间了，我一直在努力应对那些不应该那么难的东西。我正在尝试执行的是将用户输入存储在一个数组中，然后让它将收集的信息打印到一个特定的div中（稍后我将尝试使用DOM创建一个表并存储输入那里）。但我不能让它工作，下面是我的代码:)任何建议？

    JavaScript

    function submitInfo(){

    var nameInput = document.getElementById("name").value;
    var ageInput = document.getElementById("age").value;
    var fsInput = document.getElementById("fightingStyle").value;
    var weightInput = document.getElementById("weight").value;

    myArray[0]=nameInput;
    myArray[1]=ageInput;
    myArray[2]=fsInput;
    myArray[3]=weightInput;

    for(var i = 0; i<myArray.lenght; i++){
    document.getElementById("theResult").innerHTML=myArray[i];
    }

    }

    HTML

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" type="text/css" href="inl2a.css" />
    <script type="text/javascript" src="inl2a.js"></script>
    <title>Inlämning 2a</title>
    </head>
    <body>

    <div id="inputFields">
    <h3>Submit your fighters information:</h3>

    Name:<br><br>
    <input id="name" type="text" /><br><br>
    Age:<br><br>
    <input id="age" type="text" /><br><br>
    Fighting style:<br><br>
    <input id="fightingStyle" type="text" /><br><br>
    Weight:<br><br>
    <input id="weight" type="text" /><br><br>

    <input id="button" value="Submit" type="button" onclick="submitInfo();" /><br><br>
    </div>

    <div id="theResult">
    </div>

    </body>
    </html>

Answer 1

function submitInfo(){
    var myArray = []; // problem 1

    var nameInput = document.getElementById("name").value;
    var ageInput = document.getElementById("age").value;
    var fsInput = document.getElementById("fightingStyle").value;
    var weightInput = document.getElementById("weight").value;

    myArray[0]=nameInput;
    myArray[1]=ageInput;
    myArray[2]=fsInput;
    myArray[3]=weightInput;

    for(var i = 0; i<myArray.length; i++){ // problem 3
        document.getElementById("theResult").innerHTML+=myArray[i]; // problem 2
    }

}

你没有在任何地方初始化数组
您覆盖innerHTML属性，因此只剩下最后一个值
你有一个错字：lenght而不是length

您也可以直接在数组中设置值，不再使用中间变量。此外，您可以在循环之外获取一次theResult元素：

function submitInfo(){
    var myArray = []; // problem 1

    myArray.push(document.getElementById("name").value);
    myArray.push(document.getElementById("age").value);
    myArray.push(document.getElementById("fightingStyle").value);
    myArray.push(document.getElementById("weight").value);

    var element = document.getElementById("theResult");

    for(var i = 0; i<myArray.length; i++){
        element.innerHTML += myArray[i]; // problem 2
    }

}

Answer 2

假设用户输入是标题和名称，那么

var title   = document.getElementById("title").value;
var name    = document.getElementById("name").value;

您可以将所有这些放在一个数组中：

var m = [ title, name ];

然后使用title，

document.getElementById(your_divID).innerText=m[0];

您可以使用textContent代替innerText来获取mozilla支持。

用户输入使用JavaScript存储在数组中

2 个答案: