How to Fix: Typeerror: Document.Queryselector(...) Is Null

TypeError document.querySelector(...) is null

Use a simple condition

var elem = document.querySelector('link[rel="service"]');
var canLink = elem ? elem.href : "";

Now in your code you could check in your code for "" (empty string) and take further measures like

if(canLink !== "") {  // could be just written as if(canLink){ ... }
   // do something with the canLink now
}

document.querySelector is null

The CSS id selector uses the ID attribute of an HTML element to select one unique element on a page. To use an ID selector in CSS, you write a hashtag # followed by the ID of the element but there is no need and actually very confusing and wrong to add the # in the value of the attribute.

Bottom line, you need to remove the # from the id attribute. change it from:

<div id="#myAjax"> // wrong

 <div id="myAjax"> // correct

How to fix: TypeError: document.querySelector(...) is null

Try this:

$(document).ready(() => getText('lap0015', 'General Physics I'));

Or (If you need to support IE):

$(document).ready(function() { getText('lap0015', 'General Physics I'); });

How to solve TypeError: document.querySelector(...) is null?

DOMContentLoaded

The DOMContentLoaded event is fired when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading. A very different event load should be used only to detect a fully-loaded page. It is an incredibly common mistake to use load where DOMContentLoaded would be much more appropriate, so be cautious.

Your script is running before the DOM is ready. You have to wrap your code with DOMContentLoaded:

<!DOCTYPE html><html>  <head>    <meta charset="utf-8">    <title>Step 1</title>    <style>    #image1{
    }    </style>    <script>      document.addEventListener("DOMContentLoaded", function(event) {             document.querySelector('#image1').addEventListener("click",myFunction);        // addEventListener(event, function, useCapture)        function myFunction(){          alert("alert on click");        }      });    </script>  </head>  <body>    <img src="images/image1.jpg" id="image1" />  </body></html>

document.queryselector returns null value

you are using settings-button as a class instead of .settings-button. add (.) before the class name in querySelector method

const modeButton = document.querySelector('.settings-button');

ERROR: "document.querySelector(...) is null"

You have not correct selector, it should be as:

If it's class

setTimeout(() => document.querySelector('.true').scrollIntoView());

If it's id

setTimeout(() => document.querySelector('#true').scrollIntoView());

You can read more about querySelector here

Update based on comment

Better to use template variable and use Angular to find view as:

<div #scrollableDiv [id]="detailData.key"></div>

In you component

@ViewChild('scrollableDiv') scrollableDiv: ElementRef;

setTimeout(() => {
  this.scrollableDiv.nativeElement.scrollIntoView({ behavior: "smooth", block: "start" });
});