0

I'm trying to do a rotate-element-on-scroll effect but it seems my JS is wrong. I get the error "(index):271 Uncaught TypeError: Cannot read properties of null (reading 'style')"

My page is jakobnatorp.com

Edit: I've tried replacing "document.querySelector("logoJakob")" with following and it still doesn't work:

document.querySelector(".logoJakob");
document.querySelector("#jakoblogo");
document.getElementByClassName("logoJakob");
document.getElementById("jakoblogo");

HTML

<div class="logojakob" id="jakoblogo" >
<img src="http://jakobnatorp.com/wp-content/uploads/2021/10/cropped-JAKOB-LERCHE-DAA-NATORP.png"/>
    </div>

CSS

.logojakob {
  position: fixed;
  width:150px;
  height:150px;
  margin-top:50px;
  margin-bottom:-300px;
  margin-left:50px;
}

JS

var elem = document.querySelector("logoJakob");
window.addEventListener('scroll', function() {
    var value = window.scrollY * 0.25;
    elem.style.transform = `translatex(-50%) translatey(-50%) rotate(${value}deg)`; 
});
Jakob Natorp
  • 49
  • 1
  • 1
  • 10
  • `document.querySelector("logoJakob")` won’t exist: you don’t have a `` element. – Sebastian Simon Oct 12 '21 at 18:19
  • It also doesn't work with document.getElementById("jakoblogo") – Jakob Natorp Oct 12 '21 at 18:21
  • Is your ` – Sebastian Simon Oct 12 '21 at 21:37

1 Answers1

0

First selector is almost correct, there is only a missing dot and an extra uppercase in querySelector. Pass the class to the querySelector exactly as it is written in CSS

var elem = document.querySelector(".logojakob");
Oleg
  • 11
  • 3