質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

3回答

930閲覧

javascript エラー 解決できない

koko122102

総合スコア39

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2021/12/31 16:36

質問失礼いたします。javascriptで数当てゲームを作成中にエラーが出てきましたが解決できませんでした。1回目のボタンを押すと正常に動きますが、2回目ではthis.numberの値はundefinedになり、
3回目のボタンからエラーがでます。
この原因と対処法をご教授いただけると幸いです。
エラーコードをググってみたのですが、解決には至りませんでした。

html

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <link rel="stylesheet" href="css/style.css"> 8 <title>Document</title> 9</head> 10<body> 11 12 <div id="container"> 13 14 <h1>1~100の間の数字を当ててください!</h1> 15 16 <input type="number" id="input"> 17 <button id="btn">解答する</button> 18 19 <p class="result"></p> 20 </div> 21 22 23 24 25 <script src="main.js"></script> 26</body> 27</html>

scss

1 2#container{ 3 width: 50%; 4 margin: 0 auto; 5} 6 7h1{ 8 font-size: 24px; 9 margin-bottom: 50px; 10} 11 12#btn{ 13 width: 100px; 14 text-align: center; 15 padding: 5px 10px; 16 display: block; 17} 18 19.result{ 20 margin-top: 50px; 21}

js

1 2document.addEventListener('DOMContentLoaded', function(){ 3 const wN = new WinNumber(); 4}); 5 6 7 8class WinNumber{ 9 constructor(){ 10 this.randomNumber = Math.floor(Math.random() * 101); 11 this.btn = document.querySelector('#btn'); 12 this.number = document.querySelector('#input'); 13 this.result = document.querySelector('.result'); 14 this.accu = 0; 15 this.btn.addEventListener('click',this._checkNumber.bind(this)); 16 } 17 18 _checkNumber(){ 19 this.number = this.number.value; 20 this.accu += 1; 21 if(this.number == false){ 22 this.number = 0; 23 } 24 if(this.number < this.randomNumber){ 25 this.result.innerHTML = `${this.accu}回目 ${this.number}は小さいです`; 26 }else{ 27 this.result.innerHTML = `${this.accu}回目 ${this.number}は大きいです`; 28 } 29 } 30}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

この原因と対処法をご教授いただけると幸いです。

2回目の click イベント時は this.number は前回の代入結果として「数字の文字列」が入っています。
その為、イメージとしては、

javascript

1this.number = this."42".value;

のような呼ばれ方がしていることになります。
当然 "42"value というプロパティは存在しない為、undefined となります。

投稿2021/12/31 17:34

編集2021/12/31 17:41
cx20

総合スコア4632

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

koko122102

2022/01/04 08:30

なるほど!ありがとうございます! 解決いたしました!
guest

0

javascript

1this.number = this.number.value;

this.number は input タグのオブジェクト用なんちゃう?
それを上記でつぶしてるからじゃないかなあ。
関数内のローカル変数を使いましょう。

投稿2021/12/31 17:28

takasima20

総合スコア7458

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

koko122102

2022/01/04 08:30

ありがとうございます!解決いたしました!
guest

0

ベストアンサー

js

1 _checkNumber(){ 2 this.number = this.number.value;

ここで this.number<input type="number" id="input"> からその値である文字列に置き換わってしまってます。2回めにここを通ると this.number が文字列になっているので value プロパティがありません。

js

1 let number = this.number.valueAsNumber;

にして、この関数内では this.number の代わりに number を使うとよいでしょう。

投稿2021/12/31 17:24

編集2021/12/31 22:02
int32_t

総合スコア20672

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

koko122102

2022/01/04 08:30

ありがとうございます!解決いたしました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問