Your HTML is malformed:
view-source:https://fixedstingytriangle--hussainomer.repl.co/
It is the following, and only the following:
<header>
<link href="style.css" rel="stylesheet"/>
<script src="script.js"></script>
</header>
<body>
<h1>Scroll-to-draw</h1>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200.6" id="star-svg">
<path fill="none" stroke="white" stroke-width="2" id="star-path" d="M45.33 78.22L87.67 78.22L87.67 133L121.05 133L121.05 0L87.67 0L87.67 49.33L45.33 49.33L45.33 0L11.95 0L11.95 133L45.33 133L45.33 78.22Z"></svg>
</body>
- You do not have a DOCTYPE
- You do not have a
<html> tag
- You have a
<header>, but a <header> is a visible element which should only be inside the <body>. You probably meant to use <head> instead.
Fix those issues, and the code works as expected:
<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet"/>
... etc
</head>
<body>
... etc
The most important thing here is to explicitly specify a doctype. Without it:
The browser enters Quirks mode and tries to deal with your code as if it was written in the late 90’s. This means they will imitate many bugs that existed in the old browsers. It is not consistent on how to do this (so you will get significantly different results, for example, from Firefox to Internet Explorer).
The purpose of DOCTYPE is to tell the browser what type of HTML you are writing. It is not valid to omit the DOCTYPE. There is no “Standard” format. The browser will just try to parse HTML as best it can. But not all elements will be displayed correctly. DOCTYPE is a required part of all HTML documents.
which, here, causes problems because the document.documentElement.clientHeight will be evaluated as the height of the whole page, rather than the height of the viewport (resulting in division by 0 and the whole H appearing immediately)
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
