How did a doctype break my JavaScript?

css, doctype, html, javascript

Solution

You need to add `"px"` to `marginLeft` and `width`. Setting CSS style which requires units will not work without unit. And you are missing `<html></html>` tags.

function expand(x) {
    if (document.all && !(window.opera)) {
        return
    }
    var shrink = new Array();
    for (var i=1;i<6;i++){
        if (i === x) {
            var expander = i;
        }
        else {
            var d = shrink.length;
            shrink[d] = i;
        }
    }
    for (var i=0;i<4;i++){
        s = slideid(shrink[i]);
        var slide_shrink = ((total_width-(5*slide_margin)) - expand_width) / (slide_number-1);
        s[1].style.marginLeft=(slide_shrink-icon_width)/2 +"px";
        s[0].style.width=slide_shrink +"px";
        s[2].style.display="none";
        s[3].style.width="0"
    }
    s = slideid(expander);
    s[1].style.marginLeft=icon_margin +"px";
    s[0].style.width=expand_width + "px";
    s[2].style.display="inline-block";
    s[3].style.width= (expand_width-icon_width-icon_margin-7) +"px";
}

function shrink() {
    if (document.all && !(window.opera)) {
        return
    }
    for (var i=1;i<6;i++){
        s = slideid(i);
        s[1].style.marginLeft=(slide_width-icon_width)/2 +"px";
        s[0].style.width=slide_width + "px";
        s[2].style.display="none";
        s[3].style.width="0";
    }
}

Problem

I made a menu, and just now I added ``` <!DOCTYPE html> ``` to the document, and it ceases to function. However the code is still running, will still print to console on mouseover etc. I tried other doctypes and they break it too, it just stays static. What is it about a doctype that could cause JavaScript to not work? JS: ``` var total_width = "960"; var slide_width = "182"; var slide_margin = "10"; var expand_width = "374"; var icon_width = "32"; var icon_margin = "15"; var slide_number = "5"; function slideid(i) { var m = document.getElementById("slide"+i); var l = document.getElementById("slideimg"+i); var k = document.getElementById("slidetext"+i); var j = document.getElementById("slidediv"+i); return [m, l, k, j] } function compat() { if (window.opera) { for (var i=1;i<6;i++) { s = slideid(i); s[3].style.position="relative"; s[3].style.bottom="46px"; } } if (document.all && !(window.opera)) { for (var i=1;i<6;i++) { s = slideid(i); s[0].style.height="60px"; s[1].style.display="none"; var iecontents = s[2].innerHTML; s[0].innerHTML=iecontents; s[0].style.fontFamily="'astonishedregular',Impact,serif"; s[0].style.fontSize="40px"; s[0].style.color="#fff"; s[0].style.textDecoration="none"; s[0].style.padding="10px auto"; } } } function expand(x) { if (document.all && !(window.opera)) { return } var shrink = new Array(); for (var i=1;i<6;i++) { if (i === x) { var expander = i; } else { var d = shrink.length; shrink[d] = i; } } for (var i=0;i<4;i++) { s = slideid(shrink[i]); var slide_shrink = ((total_width-(5*slide_margin))-expand_width)/(slide_number-1); s[1].style.marginLeft=(slide_shrink-icon_width)/2; s[0].style.width=slide_shrink; s[2].style.display="none"; s[3].style.width="0" } s = slideid(expander); s[1].style.marginLeft=icon_margin; s[0].style.width=expand_width; s[2].style.display="inline-block"; s[3].style.width=expand_width-icon_width-icon_margin-7; } function shrink() { if (document.all && !(window.opera)) { return } for (var i=1;i<6;i++) { s = slideid(i); s[1].style.marginLeft=(slide_width-icon_width)/2; s[0].style.width=slide_width; s[2].style.display="none"; s[3].style.width="0"; } } ``` And HTML: ``` <!DOCTYPE html> <head> <link rel="stylesheet" href="style.css" /> <script src="menu.js"></script> </head> <body onload="compat()"> <div id="Menu" onMouseout="shrink()"> <a href="#" class="slide" id="slide1" onMouseOver="expand(1)"> <img id="slideimg1" src="home.png" /> <div id="slidediv1"> <h2 id="slidetext1">Home</h2> </div> </a> <a href="#" class="slide" id="slide2" onMouseOver="expand(2)"> <img id="slideimg2" src="sound.png" /> <div id="slidediv2"> <h2 id="slidetext2">Music</h2> </div> </a> <a href="#" class="slide" id="slide3" onMouseOver="expand(3)"> <img id="slideimg3" src="blog.png" /> <div id="slidediv3"> <h2 id="slidetext3">Blog</h2> </div> </a> <a href="#" class="slide" id="slide4" onMouseOver="expand(4)"> <img id="slideimg4" src="note.png" /> <div id="slidediv4"> <h2 id="slidetext4">Bio</h2> </div> </a> <a href="#" class="slide" id="slide5" onMouseOver="expand(5)"> <img id="slideimg5" src="way.png" /> <div id="slidediv5"> <h2 id="slidetext5">Links</h2> </div> </a> </div> </body> ```

Original source

Related problems