CODEWITHSUNDEEP
javascripthtml
p12p22
p12p22

Reputation: 3

Why doesn't my javascript return a url?

In my script i'm trying to get my Javascript script to return a URL, so I can use the URL as a background for the website.

Here is my code:

//background script

//backgrounds
Rblxscreenshot_zombietower = "http://saberman888etai.net/background_images/rblxscreenshot.png";
Rblxscreenshot_zombietower2 = "http://saberman888.netai.net/background_images/zombietower2.png";
Rblxscreenshot_deathrun = "http://saberman888.netai.net/background_images/deathrun_ice.png";
Rblxscreenshot_deathrun2 = "http://saberman888.netai.net/background_images/deathrun_lobby.png";

SCREENSHOTS = [
Rblxscreenshot_zombietower,
Rblxscreenshot_zombietower2,
Rblxscreenshot_deathrun2,
Rblxscreenshot_deathrun
];

function returnBackground(){
    return SCREENSHOTS[Math.floor((Math.random() * SCREENSHOTS.length)+1)];
}

And here is my HTML code:

<!DOCTYPE html>

<head>
    <title>Saberman888's Website</title>
    <link rel="stylesheet" type="text/css" href="theme.css"/>
    <script type="text/javascript" src="background.js"/>
</head>

<body style="background-image:url(<script src="http://saberman888.netai.com/background.js">returnBackground()</script>);">
        <div class="box">
            <div style="text-align:center;">
                <h1>Home</h1>
                <a href="index.html">Home</a>
                <a href="conlangs.html"> Conlangs</a>
                <a href="projects.html">Projects</a>
            </div>
            <hr>
            <div id="minibox" style="margin-left:100px;">
                <h2>Conlangs</h3>
                <ul>
                    <li>Florrum</li>
                    <li>Genie</li>
                </ul>
            </div>

            <div id="minibox" style="margin-left:100px;">
                <h2>Projects</h2>
                <ul>
                    <li>DLBOX</li>
                    <li>QuarryLang</li>
                </ul>
            </div>
            <div id="links">
                <a href="https://www.youtube.com/channel/UC5RPvaWrBVVXYbYTa4Yh4xA">My Youtube</a>
                <a href="">My DeviantArt</a>
                <a href="">My Twitter</a>
                <a href="8.42.96.39/User.aspx?ID=49027085
">My Roblox</a>
                <a href="https://github.com/saberman888">My Github</a>
            </div>
        </div>
</body>


</html>

As you can see, in the HTML code it uses the function returnBackground() to get a URL to use as a background, but the background doesn't show up, any reason why?

Upvotes: 0

Views: 69

Answers (2)

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167192

If you try to mod with the length of the array, it will be always inside the range. This issue looks like an out of range error in the line below:

function returnBackground(){
    return SCREENSHOTS[Math.floor((Math.random() * SCREENSHOTS.length)+1)];
}

So replace it with:

function returnBackground(){
    return SCREENSHOTS[Math.floor((Math.random() * SCREENSHOTS.length)+1) % SCREENSHOTS.length];
}

Update

Just saw a basic mistake, you cannot use a <script> tag or any other tag for that instance, inside an attribute. That's a syntax error:

<body style="background-image:url(<script src="http://saberman888.netai.com/background.js">returnBackground()</script>);">

You cannot set the background URL like that. Instead you need to this way:

<body onload="returnBackground();">

And in the returnBackground() should set the background in this way:

document.body.style.backgroundImage = url;

Your full returnBackground() function:

function returnBackground(){
    document.body.style.backgroundImage = SCREENSHOTS[Math.floor((Math.random() * SCREENSHOTS.length)) % SCREENSHOTS.length];
}

Upvotes: 1

doldt
doldt

Reputation: 4506

The way you're trying to include the script is incorrect.

As per the HTML5 specification, a script tag has to contain either a src attribute or script content inside the tags, not both. (The only allowed content for a script tag with src specified is documentation, i.e. comments.)

Quote on the script element:

If there is a src attribute, the element must be either empty or contain only script documentation that also matches script content restrictions.

(This wasn't correct before HTML5 either, but (I think) it was more ill-defined, so it might work in some browsers, but don't rely on this.)

Also, the script tag cannot be inlined within a style (or any other) attribute.

For example, one of your better options is modifying the script to retrieve the body DOM element and manipulates its style, its background-image specifically (taking a more imperative approach). Then just include this script inside a script tag into your HTML.

Praveen Kumar's suggestion of adding an onload event handler is probably even easier, but the script include has to be fixed regardless of which path you choose.

Upvotes: 0

Related Questions