html - level 2 DOM handling not working javascript -
hello i'm having trouble using level 2 dom handle events, i've looked around don't quite understand how works, , allways end doing simple code like:
<element onclick = " code" > </element> instead of reaching element outside of html code, please help, know easy topic can't make work... there css code not relevant question here's code:
<script type="text/javascript"> function rotate( xy , deegrees){ document.getelementbyid("cube").style.webkittransform = " rotate"+xy+"("+deegrees+"deg)"; } // supposed not working // whats wrong ? document.getelementbyid("upp").addeventlistener("click", rotate('x', 540), true); myfunction(); </script> </head> <body> document.getelementbyid('cube').style.webkittransform = 'rotatex(90deg)'; <div id="button_container"> <button id="upp" onmouseover=" rotate('x',90); "> up</button> <button id="downn" onmouseover = " rotate('x',-90); "> down</button> <button id="leftt" onmouseover = " rotate('y',00); "> left</button> <button id="rightt" onmouseover = " rotate('y',-90); "> right</button> </div> <section class="container"> <div id="cube"> <figure class="front">front</figure> <figure class="back">back</figure> <figure class="right">right</figure> <figure class="left">left</figure> <figure class="top">top</figure> <figure class="bottom">bottom</figure> </div> </section>
this function call:
rotate('x', 540) it's function call no matter appears, when call addeventlistener:
document.getelementbyid("upp").addeventlistener("click", rotate('x', 540), true); thus, you're passing result of calling "rotate" function instead of function itself:
document.getelementbyid("upp").addeventlistener("click", function() { rotate('x', 540) }, true); by wrapping function call in function, correctly supply addeventlistener() event handler called when "click" happens.
in addition that, you're trying add event handler in script block appears before dom element you're trying affect. when script runs, there won't element in dom id you're looking for. either wrap event handler setup in "load" event handler, or move script block end of <body>.
Comments
Post a Comment