Q:

Running JavaScript function to gives "Uncaught SyntaxError: Unexpected token }"

I am creating a personal website and decided to add a "skills div" where the content of the div changes depending on what tab is selected. to do this i have created a function the changes the innerHTML of the div to a string containing all the <p>, <img> and <scripts>'s. this works fine for the paragraphs and images but when i run the function in the script it gives me an error
here is the code that changes the innerHTML (only including the  because it is just a big string with html elements and tags):
            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>','','','',''];

function PopulateWithTab(tab){
    div = document.getElementById("SkillsPane");
div.innerHTML = tabContents[tab];

}
this function is meant to change an image to cycle through a list however once the function is run this message is displayed in the console of the webpage:
Index.html:2     Uncaught SyntaxError: Unexpected token }

this is line 2 in index.html:
<html>

A:

InnerHtml Security considerations
Although this may look like a cross-site scripting attack, the result is harmless. HTML5 specifies that a <script> tag inserted via innerHTML should not execute.

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

InnerHtml wc3/specs
Conditional (ternary) Operators
Your if / else implementation it's hard to read / debug, use an inline implementation.  ( You probably have an extra })
condition ? expr1 : expr2  

