Cssのvarがよくわかりません。

javascript
1
2<!DOCTYPE HTML>
3<html>
4<head>
5<meta charset="utf-8">
6<title>untitled</title>
7</head>
8
9<body>
10<button class="button">カラー変更</button>
11<div class='rectangle'></div>
12<style>
13.rectangle {
14	width: 100%;
15	height: calc(100% - 50px);
16	--start: hsl(0,100%,50%);
17	--end: hsl(322,100%,50%);
18	background-image: linear-gradient(-135deg,var(--start),var(--end));
19</style>
20<script>
21	const rectangle = document.querySelector('.rectangle');
22	document.querySelector('.button').addEventListener('click', onClickButton);
23	
24	function onClickButton() {
25		const randomHue = Math.trunc(Math.random() *360);
26		const randomColorStart = 'hsl(${randomHub},100%,50%)';
27		const randomColorEnd = 'hsl(${randomHue + 40},100%,50%)';
28		
29		rectangle.style.setProperty('--start', randomColorStart);
30		rectangle.style.setProperty('--end',randomColorEnd);
31	}
32</script>
33</body>
34</html>
35

kei344

2020/05/04 12:55

（質問文は編集できます）「おかしくなって」とは「何をしたときに」「どうなると思って」「どうなったのか」を、スクリーンショットなどと併せて、具体的に記述されたほうが回答を得られやすいと思います。

m.ts10806

2020/05/04 13:06

タイトルだけだと「ドキュメント読みましょう」になります。 https://developer.mozilla.org/ja/docs/Web/CSS/var タイトルと内容は合致してますか？

sumasuma-

2020/05/04 13:08

Keiさん、m.tsさんアドバイスありがとうございます。もう一度考えてまた質問にきます。よろしくお願いいたします。

m.ts10806

2020/05/04 13:09

いえ、kei344さんが冒頭に書かれているように、質問は編集できますので、適宜追記されたら良いかと思います。この質問が何も進まないまま放置されることは問題です

行動規範の内容に同意します

回答1件

パット見だと、.rectangle {に対する}が無いです

CSS
1<style>
2.rectangle {
3    width: 100%;
4    height: calc(100% - 50px);
5    --start: hsl(0,100%,50%);
6    --end: hsl(322,100%,50%);
7    background-image: linear-gradient(-135deg,var(--start),var(--end));
8</style>
9