2017-12-02 146 views
-1

我用走對象的數組這是在我的JavaScript文件,使對象在陣列中爲選擇列表上我的網站上掙扎的形式將其放置在IFRAME html和iframe。我製作了一個iframe ID,但我不確定該從哪裏去,並在網頁上顯示某些內容。以對象的數組,並在選擇

HTML代碼

<!DOCTYPE html> 
<html> 
<head> 
<title>Assessed Assignment A8</title> 
<link rel="stylesheet" type="text/css" href="style.css"> 
<script src="fruits.js"></script> 


</head> 
<body> 

<iframe id="Containers"></iframe> 



</body> 
    </html> 

Javascript代碼

items = [{"title":"Apple"},{"title":"Orange"},{"title":"Pear"},{"title":"Banana"}]; 

基本上,我想使它看起來像這樣:https://gyazo.com/9877c7ae75c3d0f2425c31642e48cc01

乾杯

+0

爲什麼你需要的是一個iframe? –

+0

我雖然這將是採取一個數組,並把在網頁上 – wertyj

+0

沒有它不:-)你可以只使用一個div爲或更好的列表(UL)的最佳選擇。你能發佈腳本文件的全部內容嗎?你想用它來插入數據,或者你想使用額外的腳本? –

回答

0

你可以這樣做: 我寫了一些註釋來說明我的意思:

<!DOCTYPE html> 
<html> 
<head> 
<title>Assessed Assignment A8</title> 
<link rel="stylesheet" type="text/css" href="style.css"> 
<script src="fruits.js"></script> 
</head> 
<body> 

<ul id="containers"></ul> 

</body> 
</html> 

在你fruits.js:

document.addEventListener('DOMContentLoaded', function() { // wait for content to load in order to be sure you can select your dom nodes 
    var items = [{"title":"Apple"},{"title":"Orange"},{"title":"Pear"},{"title":"Banana"}]; 
    var myListElement = document.getElementById('containers'); // select your DOM - list element 
    for (prop of items) { // traverse your object items 
     myListElement.innerHTML += '<li>'+prop.title+'</li>'; // add listitems containing the values from the item object 
    } 
}); 
+0

我想這一點上JS小提琴,但什麼都沒有發生https://jsfiddle.net/#&togetherjs=wLkLbtfj7L – wertyj

+0

中的jsfiddle你不需要document.addEventListener(「DOMContentLoaded」, 。函數(){檢查了這一點:https://jsfiddle.net/9pd3dk10/ –

+0

Waow它的工作!非常感謝您 – wertyj