用戶輸入使用JavaScript存儲在數組中

嗨，大家好，我對JavaScript有點新鮮，現在有一段時間，我一直在努力應對那些困難。我試圖執行的事情是讓用戶輸入存儲在一個數組中，然後讓它將收集到的信息打印到一個特定的div中（稍後我將嘗試使用DOM創建一個表並存儲在那裏輸入）。但我不能得到它的工作，下面是我的代碼:)任何建議？用戶輸入使用JavaScript存儲在數組中

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>

來源

2013-11-25 BuzzLajtjer

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而不是長度

您也可以直接在數組中設置值，不再使用中間變量。此外，您還可以得到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 
    } 

}

來源

2013-11-25 16:59:05 Tibos

感謝您的幫助，是否有任何快速的方法來分配輸入到一個新的行元素？ – BuzzLajtjer

當然，不是將它添加到#theResult中，您可以創建一個新的tr，爲每個值創建一個新的td，並將td作爲子tr和tr添加爲表的子級。我假設你的數據是表格性質的，否則你會被建議不使用表格。 – Tibos

假設用戶輸入的標題和名字，然後

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。

來源

2013-11-25 17:13:29

用戶輸入使用JavaScript存儲在數組中

回答

相關問題