2017-07-25 44 views
-2

我正在創建一個個人網站,並決定添加一個「技能div」,div的內容根據所選的選項卡而變化。爲此,我創建了一個函數,將div的innerHTML更改爲包含所有<p><img><scripts>的字符串。這對段落和圖像工作正常,但是當我運行腳本中的功能,它給了我一個錯誤運行JavaScript函數以提供「未捕獲的SyntaxError:意外的令牌}」

這裏是更改innerHTML的代碼(只包括因爲它只是一個大的字符串與html元素和標籤):

  var tabContents = ['', '<img src="Skills/3DModelling/Night_Swarz.png" alt="ModelImage1.png" style="position: absolute; top: 10px; left: 10px; height: 200px;">' + 
     '<img src="Skills/3DModelling/Night_Swarz_AllClothes.png" alt="ModelImage2.png" style="position: absolute; bottom: 10px; left: 10px; height: 200px;">' + 
     '<p style="position: absolute; top: calc(50% - 50px); left: 0px; width: 170px; text-align: center; font-size: 180%;">Character 1</p>' + 
     '<img src="Skills/3DModelling/Samurai_Render.png" alt="ModelImage3.png" style="position: absolute; top: 10px; right: 30px; height: 200px;">' + 
     '<img src="Skills/3DModelling/Samurai_Posed.png" alt="ModelImage4.png" style="position: absolute; bottom: 10px; right: 10px; height: 200px;">' + 
     '<p style="position: absolute; top: calc(50% - 50px); right: 0px; width: 170px; text-align: center; font-size: 180%;">Character 2</p>' + 
     '<p style="position: absolute; top: 0px; left: 175px; height: calc(100% - 20px); width: calc(100% - 330px); text-align: center;"> I have been 3D modelling since January of 2014. I have been doing so as a recreational activity in order to provide myself with objects to move around in a gaming environment. I enjoy the coding challanges I face more so than 3D modelling, however through developing my skills I have acquired a talent and satasfaction through the models I have created. I started with very basic designs and now I am confident in my abilities to create models based on 2D sketches, texture and paint the models as well as pose and render them to create images. The tools I have always used are the <i>Blender</i> 3D Modelling program. This is a free program that is mainly used in low budget game making.</p>' + 
     '<p style="position: absolute; top: 220px; left: 175px; height: calc(100% - 20px); width: calc(100% - 330px); text-align: center; font-size: 200%;">Some More Models</p>' +   
     '<img id="ChangingImage" style="position: absolute; top: 300px; left: calc(50%); height: 200px;">' + 
     '<img src="Images/LeftArrow.png" style="position: absolute; top: 350px; left: calc(50% - 200px); height: 50px; cursor: pointer;" onclick="ChangeToNext("false"");">' + 
     '<img src="Images/RightArrow.png" style="position: absolute; top: 350px; right: calc(50% - 200px); height: 50px; cursor: pointer;" onclick="ChangeToNext("true");">' + 
     '' + 
     '<script>' + 
     '' + 
     'var currentImage = 0;' + 
     'var imageID = ["Night_Swarz.png", "Night_Swarz_AllClothes.png", "Samurai_Posed.png", "Samurai_Render.png"];' + 
     '' + 
     'function ChangeImageTo(number){' + 
      'img = document.getElementById("ChangingImage");' + 
      'currentImage = number;' + 
      'img.src = "Skills/3DModelling/" + imageID[number];' + 
      'img.setAttribute("style", "height: 200px;");' + 
      'var width = img.clientWidth/2;' + 
      'img.setAttribute("style", "position: absolute; top: 300px; left: calc(50% - " + width.toString() + "px); height: 200px;");' + 
     '}' + 
     '' + 
     'function ChangeToNext(forward){' + 
      'if(forward == "true"){' + 
       'if(currentImage == imageID.length-1){' + 
        'ChangeImageTo(0);' + 
       '} else {' + 
        'ChangeImageTo(currentImage+1);' + 
       '}' + 
      '} else {' + 
       'if(currentImage == 0){' + 
        'ChangeImageTo(imageID.length-1);' + 
       '} else {' + 
        'ChangeImageTo(currentImage-1);' + 
       '}' + 
      '}' + 
     '}' + 
     '' + 
     'ChangeImageTo(0);' + 
     '</script>','','','','']; 

功能PopulateWithTab(製表符){​​ DIV =的document.getElementById( 「SkillsPane」);

div.innerHTML = tabContents[tab]; 

}

該功能是指然而通過列表改變爲週期的圖像一次運行該功能被顯示在網頁的控制檯此消息:

Index.html:2  Uncaught SyntaxError: Unexpected token } 

此是index.html中的第2行:

<html> 
+2

'這是第2行index.html' - 是啊,但是這不是** **的JavaScript index.html中的2號線(這是在哪裏錯誤是在) - 同樣,你在問題中呈現的「字符串」結果是有效的腳本,所以錯誤不在問題中,但你錯過了一些東西 –

+1

*「當我在腳本中運行函數時「* - 哪個功能?你如何運行它?把JS這樣的字符串包含起來似乎是一件很奇怪的事情,但是在任何情況下,您都沒有顯示該代碼的相關部分 - 是不是將字符串值分配給變量?陣列的開放位置在哪裏?你如何調用'PopulateWithTab()'? – nnnnnn

+0

可能重複[Uncaught SyntaxError:Unexpected token {](https://stackoverflow.com/questions/41942368/uncaught-syntaxerror-unexpected-token) – btzr

回答

0

InnerHtml Security considerations

雖然這可能看起來像是一個跨站點腳本攻擊,但結果是無害的。 HTML5指定不應執行通過innerHTML插入的<script>標記。

Note: script elements inserted using innerHTML do not execute when they are inserted.

InnerHtml wc3/specs

Conditional (ternary) Operators

if/else實現很難讀/調試,使用inline實現。
(你可能有一個額外的}

condition ? expr1 : expr2 
+0

你應該使用jQuery或遵循這個簡單的教程:[如何創建選項卡](https://www.w3schools.com/howto/howto_js_tabs.asp) – btzr

+0

非常感謝,我很抱歉,如果這個問題有點混淆,這是我在這個網站上的第一個問題 – Cameron

相關問題