2016-11-21 82 views
1

我想讓代碼爲我的marzipano項目創建一個數據文件,它使用這個data.js,我不想爲每個項目創建每個鏈接,所以我試圖循環它,但它並沒有打印到我的HTML頁面。我想將其打印爲文本,以便將結果複製並粘貼到我的js文件中,是否有解決我的代碼的方法或更好的方法?Javascript document.write問題循環

PS:我是用JavaScript共小白

預先感謝您

function auto(number){ 
 
\t i = 0; 
 
\t while (i < number) { 
 
\t \t //Fist Scene 
 
\t \t if(i === 0){ 
 
\t \t \t document.write(' 
 
\t \t \t <p>  
 
\t \t \t \t { 
 
\t \t \t \t "id": "0", 
 
\t \t \t \t "name": "0", 
 
\t \t \t \t "levels": [ 
 
\t \t \t \t \t { 
 
\t \t \t \t \t "tileSize": 256, 
 
\t \t \t \t \t "size": 256, 
 
\t \t \t \t \t "fallbackOnly": true 
 
\t \t \t \t \t }, 
 
\t \t \t \t \t { 
 
\t \t \t \t \t "tileSize": 512, 
 
\t \t \t \t \t "size": 512 
 
\t \t \t \t \t }, 
 
\t \t \t \t \t { 
 
\t \t \t \t \t "tileSize": 512, 
 
\t \t \t \t \t "size": 1024 
 
\t \t \t \t \t }, 
 
\t \t \t \t \t { 
 
\t \t \t \t \t "tileSize": 512, 
 
\t \t \t \t \t "size": 2048 
 
\t \t \t \t \t } 
 
\t \t \t \t ], 
 
\t \t \t \t "faceSize": 2000, 
 
\t \t \t \t "initialViewParameters": { 
 
\t \t \t \t \t "yaw": -3.0907815953112916, 
 
\t \t \t \t \t "pitch": 0.06648956035942888, 
 
\t \t \t \t \t "fov": 1.5707963267948966 
 
\t \t \t \t }, 
 
\t \t \t \t "linkHotspots": [ 
 
\t \t \t \t \t { 
 
\t \t \t \t \t "yaw": -3.128953846954726, 
 
\t \t \t \t \t "pitch": 0.47317799909128944, 
 
\t \t \t \t \t "rotation": 0, 
 
\t \t \t \t \t "target": "1" \t \t 
 
\t \t \t \t \t } 
 
\t \t \t \t ], 
 
\t \t \t \t "infoHotspots": [] 
 
\t \t \t \t },</p> 
 
\t \t \t \t ') 
 
\t \t } 
 
\t \t 
 
\t \t //Last Scene 
 
\t \t else if (i === number){ 
 
\t \t \t document.write(' 
 
\t \t \t <p> 
 
\t \t \t { 
 
\t \t \t "id": "'i'", 
 
\t \t \t "name": "'i'", 
 
\t \t \t "levels": [ 
 
\t \t \t \t { 
 
\t \t \t \t "tileSize": 256, 
 
\t \t \t \t "size": 256, 
 
\t \t \t \t "fallbackOnly": true 
 
\t \t \t \t }, 
 
\t \t \t \t { 
 
\t \t \t \t "tileSize": 512, 
 
\t \t \t \t "size": 512 
 
\t \t \t \t }, 
 
\t \t \t \t { 
 
\t \t \t \t "tileSize": 512, 
 
\t \t \t \t "size": 1024 
 
\t \t \t \t }, 
 
\t \t \t \t { 
 
\t \t \t \t "tileSize": 512, 
 
\t \t \t \t "size": 2048 
 
\t \t \t \t } 
 
\t \t \t ], 
 
\t \t \t "faceSize": 2000, 
 
\t \t \t "initialViewParameters": { 
 
\t \t \t \t "yaw": -3.1332154632455715, 
 
\t \t \t \t "pitch": 0.062442602034723294, 
 
\t \t \t \t "fov": 1.5707963267948966 
 
\t \t \t }, 
 
\t \t \t "linkHotspots": [ 
 
\t \t \t \t { 
 
\t \t \t \t "yaw": 0.008275683165861025, 
 
\t \t \t \t "pitch": 0.3876084470351344, 
 
\t \t \t \t "rotation": 0, 
 
\t \t \t \t "target": "'i-1'" 
 
\t \t \t \t } 
 
\t \t \t ], 
 
\t \t \t "infoHotspots": [] 
 
\t \t \t }</p>' 
 
\t \t \t) 
 
\t \t } 
 
\t \t 
 
\t \t //Actual loop 
 
\t \t else if (i < number){ 
 
\t \t \t document.write(' 
 
\t \t \t { 
 
\t \t \t "id": "i", 
 
\t \t \t "name": "i", 
 
\t \t \t "levels": [ 
 
\t \t \t \t { 
 
\t \t \t \t "tileSize": 256, 
 
\t \t \t \t "size": 256, 
 
\t \t \t \t "fallbackOnly": true 
 
\t \t \t \t }, 
 
\t \t \t \t { 
 
\t \t \t \t "tileSize": 512, 
 
\t \t \t \t "size": 512 
 
\t \t \t \t }, 
 
\t \t \t \t { 
 
\t \t \t \t "tileSize": 512, 
 
\t \t \t \t "size": 1024 
 
\t \t \t \t }, 
 
\t \t \t \t { 
 
\t \t \t \t "tileSize": 512, 
 
\t \t \t \t "size": 2048 
 
\t \t \t \t } 
 
\t \t \t ], 
 
\t \t \t "faceSize": 2000, 
 
\t \t \t "initialViewParameters": { 
 
\t \t \t \t "yaw": -3.0859786632885857, 
 
\t \t \t \t "pitch": 0.058860826755053, 
 
\t \t \t \t "fov": 1.5707963267948966 
 
\t \t \t }, 
 
\t \t \t "linkHotspots": [ 
 
\t \t \t \t { 
 
\t \t \t \t "yaw": 0.007751782217697567, 
 
\t \t \t \t "pitch": 0.39202518148107757, 
 
\t \t \t \t "rotation": 0, 
 
\t \t \t \t "target": "'i-1'" 
 
\t \t \t \t }, 
 
\t \t \t \t { 
 
\t \t \t \t "yaw": -3.1285088198075375, 
 
\t \t \t \t "pitch": 0.48530966110218543, 
 
\t \t \t \t "rotation": 0, 
 
\t \t \t \t "target": "'i+1'" 
 
\t \t \t \t } 
 
\t \t \t ], 
 
\t \t \t "infoHotspots": [] 
 
\t \t \t },<br> 
 
\t \t \t ') 
 
\t \t } 
 
\t 
 
\t \t } 
 
\t \t \t 
 
\t \t 
 
\t } 
 
} 
 

 
auto(13);
<html> 
 
\t <head> 
 
\t </head> 
 
\t <body> 
 
\t \t <script src="auto.js"></script> \t 
 
\t \t 
 
\t </body> 
 
</html>

+0

一個錯誤我立刻看到的是,JavaScript並沒有允許多個線串,除非你使用反引號 –

+0

另外,還要確保你增加'裏面你'while'否則你會i'得到一個無限循環。 – Damian

+0

所以我試過這個:https://gist.github.com/thriskel/3209b4d969131451ee5e5184775a0ad9,但它提供了一個錯誤「Uncaught SyntaxError:missing)」之後「document.write('」 – Thriskel

回答

0

首先不得不說的事:

  1. 唐在循環中不使用document.write()。它會重寫你的文檔本身。
  2. 使用反引號(`)來包裝字符串時,它是多行字符串。
  3. 最好使用pre標記來顯示格式化數據,如JSON或任何code片段。
  4. 在使用while循環時請注意incrementerdecrementer在您的while區塊中,以防止infinite循環。

我認爲下面的解決方案適合你。

function auto(number){ 
 
    var e = document.getElementById("data"); 
 
\t i = 0; 
 
    var html = ""; 
 
\t while (i <= number) { 
 
\t \t //Fist Scene 
 
\t \t if(i === 0){ 
 
\t \t \t html += ` 
 
\t \t \t <pre>  
 
\t \t \t \t { 
 
\t \t \t \t "id": "` + i + `", 
 
\t \t \t \t "name": "0", 
 
\t \t \t \t "levels": [ 
 
\t \t \t \t \t { 
 
\t \t \t \t \t "tileSize": 256, 
 
\t \t \t \t \t "size": 256, 
 
\t \t \t \t \t "fallbackOnly": true 
 
\t \t \t \t \t }, 
 
\t \t \t \t \t { 
 
\t \t \t \t \t "tileSize": 512, 
 
\t \t \t \t \t "size": 512 
 
\t \t \t \t \t }, 
 
\t \t \t \t \t { 
 
\t \t \t \t \t "tileSize": 512, 
 
\t \t \t \t \t "size": 1024 
 
\t \t \t \t \t }, 
 
\t \t \t \t \t { 
 
\t \t \t \t \t "tileSize": 512, 
 
\t \t \t \t \t "size": 2048 
 
\t \t \t \t \t } 
 
\t \t \t \t ], 
 
\t \t \t \t "faceSize": 2000, 
 
\t \t \t \t "initialViewParameters": { 
 
\t \t \t \t \t "yaw": -3.0907815953112916, 
 
\t \t \t \t \t "pitch": 0.06648956035942888, 
 
\t \t \t \t \t "fov": 1.5707963267948966 
 
\t \t \t \t }, 
 
\t \t \t \t "linkHotspots": [ 
 
\t \t \t \t \t { 
 
\t \t \t \t \t "yaw": -3.128953846954726, 
 
\t \t \t \t \t "pitch": 0.47317799909128944, 
 
\t \t \t \t \t "rotation": 0, 
 
\t \t \t \t \t "target": "1" \t \t 
 
\t \t \t \t \t } 
 
\t \t \t \t ], 
 
\t \t \t \t "infoHotspots": [] 
 
\t \t \t \t },</pre> 
 
\t \t \t \t `; 
 
\t \t } 
 
\t \t 
 
\t \t //Last Scene 
 
\t \t else if (i === number){ 
 
\t \t \t html += ` 
 
\t \t \t <pre> 
 
\t \t \t { 
 
\t \t \t "id": "` + i + `", 
 
\t \t \t "name": "` + i + `", 
 
\t \t \t "levels": [ 
 
\t \t \t \t { 
 
\t \t \t \t "tileSize": 256, 
 
\t \t \t \t "size": 256, 
 
\t \t \t \t "fallbackOnly": true 
 
\t \t \t \t }, 
 
\t \t \t \t { 
 
\t \t \t \t "tileSize": 512, 
 
\t \t \t \t "size": 512 
 
\t \t \t \t }, 
 
\t \t \t \t { 
 
\t \t \t \t "tileSize": 512, 
 
\t \t \t \t "size": 1024 
 
\t \t \t \t }, 
 
\t \t \t \t { 
 
\t \t \t \t "tileSize": 512, 
 
\t \t \t \t "size": 2048 
 
\t \t \t \t } 
 
\t \t \t ], 
 
\t \t \t "faceSize": 2000, 
 
\t \t \t "initialViewParameters": { 
 
\t \t \t \t "yaw": -3.1332154632455715, 
 
\t \t \t \t "pitch": 0.062442602034723294, 
 
\t \t \t \t "fov": 1.5707963267948966 
 
\t \t \t }, 
 
\t \t \t "linkHotspots": [ 
 
\t \t \t \t { 
 
\t \t \t \t "yaw": 0.008275683165861025, 
 
\t \t \t \t "pitch": 0.3876084470351344, 
 
\t \t \t \t "rotation": 0, 
 
\t \t \t \t "target": "` + (i-1) + `" 
 
\t \t \t \t } 
 
\t \t \t ], 
 
\t \t \t "infoHotspots": [] 
 
\t \t \t }</pre> 
 
\t \t \t `; 
 
\t \t } 
 
\t \t 
 
\t \t //Actual loop 
 
\t \t else if (i < number){ 
 
\t \t \t html += ` 
 
\t \t \t <pre>{ 
 
\t \t \t "id": "` + i + `", 
 
\t \t \t "name": "` + i + `", 
 
\t \t \t "levels": [ 
 
\t \t \t \t { 
 
\t \t \t \t "tileSize": 256, 
 
\t \t \t \t "size": 256, 
 
\t \t \t \t "fallbackOnly": true 
 
\t \t \t \t }, 
 
\t \t \t \t { 
 
\t \t \t \t "tileSize": 512, 
 
\t \t \t \t "size": 512 
 
\t \t \t \t }, 
 
\t \t \t \t { 
 
\t \t \t \t "tileSize": 512, 
 
\t \t \t \t "size": 1024 
 
\t \t \t \t }, 
 
\t \t \t \t { 
 
\t \t \t \t "tileSize": 512, 
 
\t \t \t \t "size": 2048 
 
\t \t \t \t } 
 
\t \t \t ], 
 
\t \t \t "faceSize": 2000, 
 
\t \t \t "initialViewParameters": { 
 
\t \t \t \t "yaw": -3.0859786632885857, 
 
\t \t \t \t "pitch": 0.058860826755053, 
 
\t \t \t \t "fov": 1.5707963267948966 
 
\t \t \t }, 
 
\t \t \t "linkHotspots": [ 
 
\t \t \t \t { 
 
\t \t \t \t "yaw": 0.007751782217697567, 
 
\t \t \t \t "pitch": 0.39202518148107757, 
 
\t \t \t \t "rotation": 0, 
 
\t \t \t \t "target": "` + (i-1) + `" 
 
\t \t \t \t }, 
 
\t \t \t \t { 
 
\t \t \t \t "yaw": -3.1285088198075375, 
 
\t \t \t \t "pitch": 0.48530966110218543, 
 
\t \t \t \t "rotation":0, 
 
\t \t \t \t "target": "` + (i+1) + `" 
 
\t \t \t \t } 
 
\t \t \t ], 
 
\t \t \t "infoHotspots": [] 
 
\t \t \t }</pre> 
 
\t \t \t `; 
 
\t \t } 
 
\t i++; 
 
\t \t } 
 
    e.innerHTML = html; 
 
} 
 

 
auto(13);
<html> 
 
\t <head> 
 
\t </head> 
 
\t <body> 
 
\t \t <script src="auto.js"></script> \t 
 
\t \t <div id="data"><div> 
 
\t </body> 
 
</html>

+0

非常感謝你,但怎麼做我得到的代碼增加了「ID」,「名稱」和「目標?」的號碼。 – Thriskel

+0

你想給'id's? –

+0

我在哪裏評論上面的代碼,// heeere,我也嘗試過使用瀏覽器調試器給出了這個錯誤「Uncaught TypeError:無法設置爲null的屬性'innerHTML'」 – Thriskel