何も表示されないです。htmlとjavascript

前提・実現したいこと

初心者です。一時間ほど考えましたがわからなかったので質問します!
実現したいことはY:30とZ:5を入れたときにmsg1,msg2,msg3,msg4とnum1,num2,num3,num4を起動させて40と5を入れたときにmsg1...msg4とnum5...num8　50と5を入れたときにmsg1...msg4とnum9...num12まで起動させて表示させたいです。表に表示させたかったので変数を四つにしました。表にする前にコメントしてくださった方すみません。input idはynumberとxnumberにしました。

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

計算ボタンを押してもエラーが起きてしまいました。

Uncaught TypeError: Assignment to constant variable.
    at search_num (tonebar_reference.html:62)
    at HTMLInputElement.onclick (tonebar_reference.html:26)
search_num @ tonebar_reference.html:62
onclick @ tonebar_reference.html:26

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4
5</head>
6<body>
7X:6.35
8<br>Y:<input type="number" id="ynumber" style="
9  width: 150px;
10  height:50px;
11  text-align: right;
12  font-size:30px;
13">
14とZ:<input type="number" id="znumber" style="
15  width: 150px;
16  height:50px;
17  text-align: right;
18  font-size:30px;
19">
20
21は<input type="button" value="検索" onclick="search_num()" style="
22  width: 100px;
23  height: 25px;
24  font-size: 15px;
25
26">
27<table border = "1">
28<tr>
29<th></th>
30<th>1</th>
31<th>2</th>
32<th>3</th>
33<th>4</th>
34</tr>
35<tr>
36<td>Num=</td>
37<td> <span id="msg1"></span> </td>
38<td> <span id="msg2"></span> </td>
39<td> <span id="msg3"></span> </td>
40<td> <span id="msg4"></span> </td>
41</tr>
42</table>
43
44<script type="text/javascript">
45const ynumber = document.getElementById("ynumber").value;
46const znumber = document.getElementById("znumber").value;
47const num1  = 2689.7
48const num2  = 3370
49const num3  = 14073
50const num4  = 15080
51const num5  = 1523.8
52const num6  = 1919.7
53const num7  = 8932.6
54const num8  = 10537
55const num9  = 978.24
56const num10 = 1235.7
57const num11 = 5865.8
58const num12 = 7232.6
59
60function search_num(){
61
62if (ynumber = 30){
63	if(znumber = 5){
64
65document.getElementById("msg1").innerHTML = num1 ;
66document.getElementById("msg2").innerHTML = num2 ;
67document.getElementById("msg3").innerHTML = num3 ;
68document.getElementById("msg4").innerHTML = num4 ;
69		}
70	}
71
72if (ynumber = 40){
73	if(znumber = 5){
74document.getElementById("msg1").innerHTML = num5 ;
75document.getElementById("msg2").innerHTML = num6 ;
76document.getElementById("msg3").innerHTML = num7 ;
77document.getElementById("msg4").innerHTML = num8 ;
78		}
79	}
80if (ynumber = 50){
81	if(znumber = 5){
82document.getElementById("msg1").innerHTML = num9  ;
83document.getElementById("msg2").innerHTML = num10 ;
84document.getElementById("msg3").innerHTML = num11 ;
85document.getElementById("msg4").innerHTML = num12 ;
86		}
87	}
88}
89</script>
90</body>
91</html>

Javascript, html,ファイルは.html

試したこと

三つあるif文の順序変更：変化なし
どこか｛｝などが足りないかと思ったのですがないとおもいます。
znumberとynumberの順序を変えたりしましたが変化なし。

補足情報（FW/ツールのバージョンなど）

Visual Studio 2019 バージョン 16.8.1
の無料版です。

m.ts10806

2020/11/19 20:06

>。語彙力なくてすみませんｗこういうことは書かなくて良いので、何度でも編集して納得できるまで推敲されたら良いかと思います。あと、コードやエラーはマークダウンのcode機能を利用してご提示ください。 https://teratail.com/questions/238564

otohu_0401

2020/11/19 21:26 編集

了解ですwありがとうございます!

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

回答2件

変数 ynumber と znumber が定義されていない
if (znumber = 5){ のような書き方だと、条件文は znumber という変数に5を代入していて、条件は常にtrueになっている。 if (znumber === 5){ が正しい

投稿2020/11/19 11:51

thyda.eiqau

総合スコア2982

otohu_0401

2020/11/19 12:04

ynumberも===にした方がいいですか?あと回答ありがとうございます!

otohu_0401

2020/11/19 12:07

連投すみません。ynumberとznumberの定義の仕方を教えてください。

thyda.eiqau

2020/11/19 12:08

したほうがいいかどうかはやってみれば分かると思いますが、やってみましたか？

otohu_0401

2020/11/19 12:10

ynumberとznumberをif文のところで===にしたところ何も表示されませんでした。変数の定義はしていません。

thyda.eiqau

2020/11/19 12:18

「javascript 変数定義」でググると無数に関連記事が出てきますが、調べてみましたか？

otohu_0401

2020/11/19 12:20

まじすか！ググってきますｗ

otohu_0401

2020/11/19 12:25

const ynumber = "ynumber"; const znumber = "znumber"; ていう風に定義しましたが無理でした…

m.ts10806

2020/11/19 20:08

if(znumber == 5) と数値を判定しようとしているのに文字列を入れたらそれは式の判定結果もfalseになりますよね。

otohu_0401

2020/11/19 21:37

すみません。質問の内容を変えたのでちょっと変わってるかもです。せっかくコメントしてくださったのに変えてすみません…

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

ベストアンサー

大きく二つ間違いがあります。

まず一つ目。

ynumber = 30 を ynumber == 30 にしてください。ここだけではなく、同様の箇所がいくつかあります。znumber も同じです。これは検索ボタンを押して F12 を押すとエラーが表示されるので、エラーがなくなるまで修正してください。

二つ目。

ynumber と znumber を定義している場所が違います。現状では何も入っていない空白を入れているだけで、そこから更新されません。検索ボタンを押すたびに値を更新しなければならないので、search_num() 関数の中の先頭に入れてください。

JavaScript
1function search_num(){
2	const ynumber = document.getElementById("ynumber").value;
3	const znumber = document.getElementById("znumber").value;
4

ynumber === 30 という意見もありますが、ynumber は文字列なので、数値である 30 と === で比較すると異なると判定されます。=== で比較したい場合には、Number(document.getElementById("ynumber").value); のように数値に直してください。

投稿2020/11/19 22:17

編集2020/11/19 22:19