Search code examples
javascriptcssprototypejsgetelementbyid

Prototype Library/CSS

So I'm learning how to use prototype and for the most part it's pretty neat, but I noticed while working on a project that $( ).setStyle({}) isn't working. I don't know why, I even found a tutorial, copy pasted their setStyle example into Brackets and I still get nothing. Anybody know why?

Here's the example code:

<!DOCTYPE html>
<html>
  <head>
    <title>Prototype examples</title>
    <script type="http://ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js"></script>
    <script>
        function setColor(){
        $('test').setStyle({
            backgroundColor: '#900',
            fontSize: '12px'
        });
        }
    </script>
  </head>
  <body>
    <p id="test">Click the button to see the result.</p>
    <input type="button" value="Click" onclick="setColor();"/>
  </body>
</html>

And here is my project code:

<!DOCTYPE html>
<html>
<head>
    <title>Protoype</title>
    <h1>Lighting Effects</h1>
    <style>
        #div1{
            width:600px;
            height:350px;
            background-color: #6699cc;
        }
        #div2{
            background-color: #aaaaff;
            width:80px;
            height:80px;
            padding:20px;
            position:relative;
            left:240px;
            top:105px;
        }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js"></script>
    <script>
        function btn1(){
            $("div1").setStyle({
                background:'radial-gradient(at top left, white, #6699cc)';
            });
            $("div2").setStyle({
                boxShadow:'10px 10px 10px #808080';
            });
        }
        function btn2(){
            $("div1").setStyle({
                background:'radial-gradient(at top right, white, #6699cc)';
            });
            $('div2').setStyle({
                boxShadow:'-10px 10px 10px #808080';
            });
        }
        function btn3(){
            $('div1').setStyle({
                background:'radial-gradient(at bottom, white, #6699cc)';
            });
            $('div2').setStyle({
                boxShadow:'0px -10px 10px #808080';
            });
        }
    </script>
</head>
<body>
    <div id="div1">
        <div id="div2">
            LIGHTS:<br/>
            <input type="button" id="btn1" value="Top Left" onClick="btn1()"/><br/>
            <input type="button" id="btn2" value="Top Right" onClick="btn2()"/><br/>
            <input type="button" id="btn3" value="Bottom" onClick="btn3()"/><br/>
        </div>
    </div>
</body>
</html>

Thanks in advance!

Solution

  • The script has syntax errors. Remove the unnecessary semicolons, like so:

    <script>
    function btn1(){
        $("div1").setStyle({
            background:'radial-gradient(at top left, white, #6699cc)'
        });
        $("div2").setStyle({
            boxShadow:'10px 10px 10px #808080'
        });
    }
    function btn2(){
        $("div1").setStyle({
            background:'radial-gradient(at top right, white, #6699cc)'
        });
        $('div2').setStyle({
            boxShadow:'-10px 10px 10px #808080'
        });
    }
    function btn3(){
        $('div1').setStyle({
            background:'radial-gradient(at bottom, white, #6699cc)'
        });
        $('div2').setStyle({
            boxShadow:'0px -10px 10px #808080'
        });
    }
</script>

    Side note: I recommend you learn to use your browser's Developer Tools. All major browsers should have them. It makes it easier to detect errors like these, hence enhance your learning process.