0

hello I'm having trouble using level 2 DOM to handle events, i've looked around but just don't quite understand how it works, and allways end up doing simple code like:

<element onClick = " some code" > </element>

instead of reaching the element from outside of html code, please help, I know this is an easy topic but just can't make it work... there is also some css code but its not relevant to my question so here's my code:

<script type="text/javascript">

    function rotate( xy , deegrees){        

            document.getElementById("cube").style.WebkitTransform = " rotate"+xy+"("+deegrees+"deg)";
    }


             // so this is where its supposed to be  but 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>

user3363537
  • 111
  • 1
  • 1
  • 8
  • Consider whether your _Element_ exists at the time when the browser runs the line trying to attach the listener to it – Paul S. Apr 06 '14 at 16:00

2 Answers2

2

This is a function call:

rotate('X', 540)

It's a function call no matter where it appears, like when you call addEventListener:

document.getElementById("upp").addEventListener("click", rotate('X', 540), true);

Thus, you're passing the result of calling your "rotate" function instead of the function itself:

document.getElementById("upp").addEventListener("click", function() { rotate('X', 540) }, true);

By wrapping the function call in another function, you correctly supply addEventListener() with an event handler to be called when the "click" happens.

In addition to that, you're trying to add the event handler in a script block that appears before the DOM element you're trying to affect. When the script runs, there won't be an element in the DOM with the id you're looking for. Either wrap your event handler setup in a "load" event handler, or move the script block to the end of the <body>.

Pointy
  • 405,095
  • 59
  • 585
  • 614
0

Your code likely is running before your DOM is applied. Move script tag to bottom of page or use onload function to execute your code after the DOM has completed its load phase.

http://api.jquery.com/ready/

Validate this by ensuring you can log a element you are attempting to get a reference to...

console.log(document.getElementById("upp"));

Should return a DOM element.

techie.brandon
  • 1,638
  • 2
  • 18
  • 27
  • Why are you referring to jQuery, when that library is not mentioned anywhere? This is clearly a "plain javascript" question. FYI, there is a plain javascript way to wait for the DOM to be ready [here](http://stackoverflow.com/questions/9899372/pure-javascript-equivalent-to-jquerys-ready-how-to-call-a-function-when-the/9899701#9899701), but in this case, the OP can simply move their script to the end of the ``. – jfriend00 Apr 06 '14 at 16:32
  • Obviously, this is clearly only answerable in using "plain javascript", and of course the same answer I provided... There are clearly numerous ways to resolve the issue, all correct. Given such a simplistic nature of the problem it may be helpful to provide links to the most common library for a concept that will assist in cross-browser/backward compatible support. Anyways, it's about concepts, vote down if this isn't a illustrative answer... – techie.brandon Apr 06 '14 at 18:59