Javascript查詢修復程序

我是JavaScript編程新手，任何人都可以幫助我修復下面的腳本。在這個腳本中，我從用戶那裏獲得一些輸入，然後將其添加到數組中。最後在表格中顯示它。但出於某種原因，數組中的最後一個條目將覆蓋它中的所有以前的條目。Javascript查詢修復程序

var CountryList = new Array(); 
 
var arrNum = 0; 
 

 
function initCountry(name, capital) { 
 
    this.name = name; 
 
    this.capital = capital; 
 
    //Comments 
 
    //alert(arrNum); 
 
    CountryList.push(this); 
 

 
    document.getElementsByName("countryName")[0].value = ""; 
 
    document.getElementsByName("capitalCity")[0].value = ""; 
 
} 
 

 
function funcSaveButton() { 
 
    var txt1 = document.getElementsByName("countryName")[0]; 
 
    var txt2 = document.getElementsByName("capitalCity")[0]; 
 

 
    initCountry(txt1.value, txt2.value); 
 
    //alert(txt1.value +":"+ txt2.value); 
 
    arrNum++; 
 
} 
 

 
function displayList() { 
 
    var i; 
 
    document.write("<table border='2'>"); 
 
    document.write("<tr> <td> Country Name </td> <td> Capital City </td> </tr>") 
 
    for (i = 0; i < CountryList.length; i++) { 
 
    //alert("i="+i); 
 
    document.write("<tr>"); 
 
    document.write("<td> " + CountryList[i].name + "</td>"); 
 
    document.write("<td> " + CountryList[i].capital + "</td>"); 
 
    document.write("</tr>"); 
 
    } 
 
    document.write("</table>"); 
 
}

Country Name: <input type="text" name="countryName" required></input> 
 
<Br> Capital City: <input type="text" name="capitalCity" required></input><br><br> 
 

 
<input type="button" name="saveButton" value="Save Details!!" onclick="funcSaveButton()"></input> 
 

 
<input type="button" name="displayButton" value="Display Country List!!" onclick="displayList()"></input>

來源

2017-05-27 Prakazz

'document.write（）的'覆蓋整個文檔，一旦它的加載完畢。總之，不要使用它 –

@SterlingArcher對不起，這不是我的查詢在這裏，我也知道這一點。但數組的最後一個條目覆蓋整個數組。 – Prakazz

你是推窗對象CountryList 內部功能這個對象是窗口。使用這種CountryList.push({name:name,capital:capital});

var CountryList = new Array(); 
 
var arrNum = 0; 
 

 
function initCountry(name, capital) 
 
{ 
 
    this.name = name; 
 
    this.capital = capital; 
 
    //Comments 
 
    //alert(arrNum); 
 
    CountryList.push({name:name,capital:capital}); 
 

 
    document.getElementsByName("countryName")[0].value = ""; 
 
    document.getElementsByName("capitalCity")[0].value = ""; 
 
} 
 

 
function funcSaveButton() 
 
{ 
 
    var txt1 = document.getElementsByName("countryName")[0]; 
 
    var txt2 = document.getElementsByName("capitalCity")[0]; 
 

 
    initCountry(txt1.value, txt2.value); 
 
    //alert(txt1.value +":"+ txt2.value); 
 
    arrNum++; 
 
} 
 

 
function displayList() 
 
{ 
 
console.log(CountryList); 
 

 
    var i; 
 
    document.write("<table border='2'>"); 
 
    document.write("<tr> <td> Country Name </td> <td> Capital City </td> </tr>") 
 
    for(i=0;i<CountryList.length;i++) 
 
    {  
 
     //alert("i="+i); 
 
     document.write("<tr>"); 
 
     document.write("<td> "+ CountryList[i].name + "</td>"); 
 
     document.write("<td> "+ CountryList[i].capital + "</td>"); 
 
     document.write("</tr>"); 
 
    } 
 
    document.write("</table>"); 
 
}

Country Name: <input type="text" name="countryName" required></input><Br> 
 
Capital City: <input type="text" name="capitalCity" required></input><br><br> 
 

 
<input type="button" name="saveButton" value="Save Details!!" onclick="funcSaveButton()"></input> 
 

 
<input type="button" name="displayButton" value="Display Country List!!" onclick="displayList()"></input>

來源

2017-05-27 04:35:07

Javascript查詢修復程序

回答

相關問題