除非我在函数中定义变量，否则传递变量不起作用

Question

The e parameter as it is in the function below does now work, but if it is defined within the function it works.

Here its a parameter and called at the bottom: ( fails )

 function getRotVal( e ) { var el = document.getElementById( e ), // e is a parameter in the function st = window.getComputedStyle( el, null ), tr = st.getPropertyValue( 'transform' ) || "FAIL", values = tr.split('(')[1].split(')')[0].split(','), a = values[0], b = values[1], c = values[2], d = values[3], scale = Math.sqrt(a*a + b*b), sin = b/scale, angle = Math.round(Math.atan2(b, a) * (180/Math.PI)); return angle; } var box = document.getElementById( 'box' ); var result = getRotVal( box ); alert( result ); 

 .box { width: 5rem; height: 5rem; margin: 0.75rem auto; background-color: #222; transform: rotate( 15deg ); } 

 <div id="box" class="box"> </div> 

And here I define the variable in the function: ( it works )

 function getRotVal() { var el = document.getElementById( 'box' ), // e is defined inside function st = window.getComputedStyle( el, null ), tr = st.getPropertyValue( 'transform' ) || "FAIL", values = tr.split('(')[1].split(')')[0].split(','), a = values[0], b = values[1], c = values[2], d = values[3], scale = Math.sqrt(a*a + b*b), sin = b/scale, angle = Math.round(Math.atan2(b, a) * (180/Math.PI)); return angle; } var result = getRotVal(); alert( result ); 

 .box { width: 5rem; height: 5rem; margin: 0.75rem auto; background-color: #222; transform: rotate( 15deg ); } 

 <div id="box" class="box"> </div> 

I would like this function to be dynamic and accept different variables so the second snippet isn't that great. How can I get the first snippet to work and keep e as a variable?

Answer 1

Your function calls document.getElementById(e) , so it expects the argument to be an ID, not an element. You should call the function like this:

var result = getRotval('box');

Either that, or don't call getElementById() in the function.

Answer 2

In the first snippet you are passing the DOM element to getRotVal function and again you are using getElementById on the DOM element.

So just comment the first line of el and pass the function parameter e directly to getComputedStyle like below

// var el = document.getElementById( e ),        //  e is a parameter in the function
  st = window.getComputedStyle(e, null),

Code snippet:

 function getRotVal(e) { // var el = document.getElementById( e ), // e is a parameter in the function var st = window.getComputedStyle(e, null), tr = st.getPropertyValue('transform') || "FAIL", values = tr.split('(')[1].split(')')[0].split(','), a = values[0], b = values[1], c = values[2], d = values[3], scale = Math.sqrt(a * a + b * b), sin = b / scale, angle = Math.round(Math.atan2(b, a) * (180 / Math.PI)); return angle; } var box = document.getElementById('box'); var result = getRotVal(box); alert(result); 

 .box { width: 5rem; height: 5rem; margin: 0.75rem auto; background-color: #222; transform: rotate( 15deg); } 

 <div id="box" class="box"> </div> 

Answer 3

You don't need to pass object reference in function parameter because you allready convert it to reference witnin a function in the below line.

var el = document.getElementById( e );

so edit where you are calling getRotVal function to like as:

var result = getRotVal("box");