2016-11-10 45 views
0

由於某些原因,此代碼未將輸入保存到數組中。我也無法使用循環顯示數組,但我確定這與無法將元素存儲到數組中有關。我怎樣才能解決這個問題?未保存並顯示的Javascript html數組

var full_name; 
 
    var dob; 
 
    var gender; 
 
    var nameList = new Array(); 
 
    var dateList = new Array(); 
 
    var genderList = new Array(); 
 
    var listLength = nameList.length; 
 

 
    function displayMembers(nameList, dateList, genderList, listLength) 
 
    { 
 
     var str = " "; 
 
     for(var i = 0;i < listLength; i++) { 
 
       document.write(nameList); 
 
       document.write(dateList); 
 
       document.write(genderList); 
 
     } 
 
    } 
 
    function saveMember(nameList, dateList, genderList) 
 
    { 
 
     nameList[0]=data.push(document.getElementByName("full_name").value); 
 
     dateList[0]=data.push(document.getElementByName("dob").value); 
 
     genderList[0]=data.push(document.getElementByName("gender").value); 
 
    } 
 
    function clearList() 
 
    { 
 
     nameList= []; 
 
     dateList= []; 
 
     genderList= []; 
 
    }
<html> 
 
<head> 
 
<title> INTERNET TECHNOLOGIES CLUB MEMBER LIST </title> 
 
</head> 
 
<body> 
 
    <form name="memberForm"> 
 
     <h1> 
 
     INTERNET TECHNOLOGIES CLUB MEMBER LIST 
 
     </h1> Full name: 
 
     <input type="text" name="full_name" value="" /> Date of Birth: 
 
     <input type="text" name="dob" value="" /> 
 
     <br> 
 
     <br> Gender: 
 
     <input type="text" name="gender" value="" /> 
 
     <br> 
 
     <br> 
 
     <textarea name="textBox" rows="10" cols="70"> 
 
      Full Name Date of Birth Gender 
 
     </textarea> 
 
     <br> 
 
     <input type="button" value="NEXT" onclick="saveMember()" /> 
 
     <input type="button" value="DISPLAY" onclick="displayMembers()" /> 
 
     <input type="button" value="CLEAR" onclick="clearList()" /> 
 
    </form> 
 
</body> 
 
</html>

+2

的結果,它會覆蓋整個文件,JavaScript和所有 – adeneo

+0

我應該使用,而不是文件撰寫什麼?我應該使用toString()嗎? –

+0

也許將所有內容存儲在本地變量中,然後使用文檔寫入? – Gino

回答

0

有多種問題,在你的代碼

var full_name; 
 
var dob; 
 
var gender; 
 
var nameList = new Array(); 
 
var dateList = new Array(); 
 
var genderList = new Array(); 
 

 
function displayMembers() {//since the arrays are global, no need to pass them as argument 
 
    var str = []; 
 
    //the list length should be read in the function else it will always be 0 
 
    var listLength = nameList.length; 
 
    //should not use document.write() as calling it after document is loaded will completely overwrite the dom 
 
    for (var i = 0; i < listLength; i++) { 
 
    str.push('Name: ' + nameList[0]) 
 
    str.push('Date: ' + dateList[0]) 
 
    str.push('Gender: ' + genderList[0]) 
 
    } 
 
    document.getElementById('display').innerHTML = str.join('<br />'); 
 
} 
 

 
function saveMember() {//since the arrays are global, no need to pass them as argument 
 
    //you need to push the values to the array, there is nothing called data 
 
    nameList.push(document.getElementsByName("full_name")[0].value); 
 
    dateList.push(document.getElementsByName("dob")[0].value); 
 
    genderList.push(document.getElementsByName("gender")[0].value); 
 
} 
 

 
function clearList() { 
 
    nameList = []; 
 
    dateList = []; 
 
    genderList = []; 
 
}
<form name="memberForm"> 
 
    <h1> 
 
INTERNET TECHNOLOGIES CLUB MEMBER LIST 
 
</h1> Full name: 
 
    <input type="text" name="full_name" value="" />Date of Birth: 
 
    <input type="text" name="dob" value="" /> 
 
    <br> 
 
    <br>Gender: 
 
    <input type="text" name="gender" value="" /> 
 
    <br> 
 
    <br> 
 
    <textarea name="textBox" rows="10" cols="70"> 
 
    Full Name Date of Birth Gender 
 
    </textarea> 
 
    <br> 
 
    <input type="button" value="NEXT" onclick="saveMember()"> 
 
    <input type="button" value="DISPLAY" onclick="displayMembers()"> 
 
    <input type="button" value="CLEAR" onclick="clearList()"> 
 
</form> 
 
<div id="display"> 
 
</div>

0
var full_name; 
var dob; 
var gender; 
var nameList = new Array(); 
var dateList = new Array(); 
var genderList = new Array(); 
var listLength = nameList.length; 

取出參數,因爲你沒有傳遞任何

function displayMembers() 
    { 
     var str = " "; 
     for(var i = 0;i < listLength; i++) { 
       document.write(nameList); 
       document.write(dateList); 
       document.write(genderList); 
     } 
    } 

全部是全局變量。直接將值推送到數組。

function saveMember() 
    { 
     nameList.push(document.getElementsByName("full_name")[0].value); 
     dateList.push(document.getElementsByName("dob")[0].value); 
     genderList.push(document.getElementsByName("gender")[0].value); 
    } 

    function clearList() 
    { 
     nameList= []; 
     dateList= []; 
     genderList= []; 
    } 
0

你的代碼中有很多錯誤。查看差異,你會得到你做了,你儘量不要使用`document.write`需要

</html> 
<head> 
<script language = "javascript"> 
var full_name; 
var dob; 
var gender; 
var nameList = new Array(); 
var dateList = new Array(); 
var genderList = new Array(); 


function displayMembers() 
{ 
    var textArea = document.getElementsByName("textBox")[0]; 
    textArea.value +="\n"+nameList[nameList.length-1] + "\t\t\t"+dateList[dateList.length-1] + "\t\t\t"+genderList[genderList.length-1]; 

} 
function saveMember() 
{ 
    nametemp = document.getElementsByName("full_name"); 
    nameList.push(nametemp[0].value); 

    datetemp = document.getElementsByName("dob"); 
    dateList.push(datetemp[0].value); 

    gendertemp = document.getElementsByName("gender"); 
    genderList.push(gendertemp[0].value); 

} 
function clearList() 
{ 
    nameList= []; 
    dateList= []; 
    genderList= []; 

} 
</script> 
<title> INTERNET TECHNOLOGIES CLUB MEMBER LIST </title> 
</head> 
<body> 
<form name = "memberForm"> 
<h1> 
INTERNET TECHNOLOGIES CLUB MEMBER LIST 
</h1> 
Full name: <input type ="text" name= "full_name" value = ""/> 
Date of Birth: <input type="text" name= "dob" value = ""/> 
<br> 
<br> 
Gender: <input type="text" name= "gender" value = ""/> 
<br> 
<br> 
<textarea name="textBox" rows = "10" cols= "70"> 
Full Name    Date of Birth   Gender 
</textarea> 
<br> 
<input type= "button" value= "NEXT" onclick = "saveMember()"></button> 
<input type= "button" value= "DISPLAY" onclick = "displayMembers()"> </button> 
<input type= "button" value= "CLEAR" onclick = "clearList()"></button> 
</form> 
</body> 
</html> 
+0

這一切似乎工作正常。我試圖通過存儲每次用戶單擊下一個時輸入的值,然後在用戶選擇顯示時顯示數組來顯示文本區域中的列表。每當我用數據輸入字段並嘗試點擊下一個時,什麼都不會發生。所以我相信我在處理這些事件時遇到了麻煩。你有什麼建議如何解決這個問題,並顯示在文本區域? –

+0

您可以使用以下功能替換顯示屏成員,這些功能將使用某些格式來獲得適合您的功能** displayMembers() {0} {0} textArea = document.getElementsByName(「textBox」)[0]; textArea.value + =「\ n」+ nameList [nameList.length-1] +「\ t \ t \ t」+ dateList [dateList.length-1] +「\ t \ t \ t」+ genderList [genderList 。長度-1]; } ** –

相關問題