前提・実現したいこと

ここに質問の内容を詳しく書いてください。
（例）PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。

発生している問題・エラーメッセージ

javascriptでボタンをクリックするとランダムで色が変わるようにしたいのですが
うまく動きません。
返信よろしくお願いいたします。

エラーメッセージ
```Uncaught ReferenceError: setProperty is not defined
    at HTMLButtonElement.onClickButton

### 該当のソースコード

```javascript
ソースコード
```<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.10.2/paper-full.min.js"></script>
 -->

<body>

	<!-- ボタン -->
	<button class="button">カラー変更</button>
	<!-- グラデーションが表示される長方形 -->
	<div class="rectangle">ss</div>
</body>

//<javascript>
const rectangle = document.querySelector('.rectangle');

//ボタンをクリックしたらonClickButton()を実行する
var botton = document.querySelector('.button').addEventListener('click',onClickButton);

//ボタンをクリックする度に長方形のグラデーション色を変える
function onClickButton(){
	//0~360のランダムな数を取得する
	const randomHue  = Math.trunc(Math.random() * 360);

	//グラデーションの開始色と終了色を決定
	const randomColorStart = 'hsl(${randomHue},100%,50%)';
	const randomColorEnd = 'hsl(${randomHue + 40},100%,50%)';

	//長方形のグラデーションのための変数(--startと--end)に変更
	rectangle.style.setProperty('start', randomColorStart);
	rectangle.style.setProperty('end', randomColorEnd);

	// rectangle.style.backgroundColor = "red";
	console.log(setProperty('start', randomColorStart));
}

//<css>
.rectangle{
	width: 100%;
	height: calc(100% - 50px);
	--start:hsl(0, 100% ,50%);
	--end:hsl(322,100%,50%);
	background-image: linear-gradient(-135deg,var(--start),var(--end));
}

### 試したこと

ここに問題に対して試したことを記載してください。

### 補足情報（FW/ツールのバージョンなど）
chromeです。
ここにより詳細な情報を記載してください。

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

回答1件

ベストアンサー

console.log(setProperty('start', randomColorStart));

いきなりいsetPropertyを実行しようとしても単体で実行可能な関数ではないですから無理です
そもそもセットする処理をコンソールに表示するとういう意味がわかりません。

sample

javascript
1<style>
2.rectangle{
3width: 100%;
4height: calc(100% - 50px);
5--start:hsl(0, 100% ,50%);
6--end:hsl(322,100%,50%);
7background-image: linear-gradient(-135deg,var(--start),var(--end));
8}
9</style>
10<script>
11window.addEventListener('DOMContentLoaded', ()=>{
12  const rectangle = document.querySelector('.rectangle');
13  var botton = document.querySelector('.button').addEventListener('click',()=>{
14    const randomHue  = Math.trunc(Math.random() * 360);
15    const randomColorStart = `hsl(${randomHue},100%,50%)`;
16    const randomColorEnd = `hsl(${randomHue + 40},100%,50%)`;
17    rectangle.style.setProperty('--start', randomColorStart);
18    rectangle.style.setProperty('--end', randomColorEnd);
19  });
20});
21</script>
22<link rel="stylesheet" type="text/css" href="css/style.css">
23<!script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.10.2/paper-full.min.js"></script>
24<button class="button">カラー変更</button>
25<div class="rectangle">ss</div>