-2

I got the error "Cannot read property 'style' of null" and I tried everything I put the script in the bottom of the HTML and I still got the error. what do I do?

Line with error:

document.getElementById("span").style.webkitTransform = v 
"rotate"+p+"("+ps.value+"deg)"


function r(p) {
  var ps;
  ps = document.getElementById(p);
  document.getElementById("span").style.webkitTransform = "rotate" + p + "(" + ps.value + "deg)"
}
<div class="box">
  <div class="div">
    <span class="span"></span>
  </div>
</div>
X:<input type="range" id="X" onchange="r('X');" value="45" /> Y:
<input type="range" id="Y" onchange="r('Y')" /> Z:
<input type="range" id="Z" onchange="r('Z')" />
mplungjan
  • 169,008
  • 28
  • 173
  • 236
Aaron P
  • 13
  • 5
  • Because you do not have an ID you have a CLASS – mplungjan Feb 02 '19 at 09:31
  • i don't see any `id` named as `span` in posted code – Code Maniac Feb 02 '19 at 09:31
  • 1
    _This question was caused by a problem that can no longer be reproduced or a simple typographical error. While similar questions may be on-topic here, this one was resolved in a manner unlikely to help future readers. This can often be avoided by identifying and closely inspecting the shortest program necessary to reproduce the problem before posting._ – mplungjan Feb 02 '19 at 09:32
  • `document.getElementById("span")` where is the element with ID `span` – Abhishek Pandey Feb 02 '19 at 09:32
  • You cannot transform an inline element anyway – mplungjan Feb 02 '19 at 09:38

1 Answers1

0
  1. You do not have an ID but a class
  2. You need to not try to transform an inline element like a span

How can I use CSS3 transform on a span?

function r(p) {
  var ps;
  ps = document.getElementById(p);
  var rot = "rotate" + p + "(" + ps.value + "deg)";
  console.log(rot);
  document.querySelector(".div").style.webkitTransform = rot;
}
<div class="box">
  <div class="div">
    <span class="span">shfasjdfhalsdjfh</span>
  </div>
</div>
X:<input type="range" id="X" onchange="r('X');" value="45" /> Y:
<input type="range" id="Y" onchange="r('Y')" /> Z:
<input type="range" id="Z" onchange="r('Z')" />
mplungjan
  • 169,008
  • 28
  • 173
  • 236