我正在創建一個個人網站,並決定添加一個「技能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行index.html' - 是啊,但是這不是** **的JavaScript index.html中的2號線(這是在哪裏錯誤是在) - 同樣,你在問題中呈現的「字符串」結果是有效的腳本,所以錯誤不在問題中,但你錯過了一些東西 –
*「當我在腳本中運行函數時「* - 哪個功能?你如何運行它?把JS這樣的字符串包含起來似乎是一件很奇怪的事情,但是在任何情況下,您都沒有顯示該代碼的相關部分 - 是不是將字符串值分配給變量?陣列的開放位置在哪裏?你如何調用'PopulateWithTab()'? – nnnnnn
可能重複[Uncaught SyntaxError:Unexpected token {](https://stackoverflow.com/questions/41942368/uncaught-syntaxerror-unexpected-token) – btzr