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

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

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

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

リファクタリング

リファクタリングとはコードの本体を再構築するための手法であり、外見を変更せずに内部構造を変更/改善させることを指します。

Q&A

2回答

1627閲覧

リファクタリングでエラーが起きる

hanpan

総合スコア5

JavaScript

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

リファクタリング

リファクタリングとはコードの本体を再構築するための手法であり、外見を変更せずに内部構造を変更/改善させることを指します。

0グッド

0クリップ

投稿2021/03/31 08:39

前提・実現したいこと

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

JavaScriptの学習でクイズを数問作ろうとし四択クイズを一問作るところまでできリファクタリングしようとして実行したのですがエラーがおきました。画像を載せられない状態なのでconsole.logのエラーの下線部分を載せます

< buttonLength) {

該当のソースコード

const question = 'ゲーム史上、最も売れたゲーム機は次のうちどれ?';
const answers = [
'スーパーファミコン',
'プレイステーション',
'ニンテンドースイッチ',
'ニンテンドーDS'
]
const correct = 'ニンテンドーDS';
const button = document.getElementsByTagName('button')
//クリック問題文、選択肢を定義
const setupQuiz = () => {
console.log(document.getElementById('js-question').textContent =question);
document.getElementById('js-question').textContent = question;
let buttonIndex = 0;
let buttonLength = button.length;
while(buttonIndex < buttonLength) {
button[buttonIndex].textContent = answers[buttonIndex];
buttonIndex++;
}
};
setupQuiz();

const clickHandler = (e) => {
if(correct === e.target.textContent){
window.alert('正解!');
}else{
window.alert('不正解!');
}
};
let handlerIndex = 0;
const buttonLength = button.length;
while (buttonIndex < buttonLength) {
button[handlerIndex].addEventListener('click', (e) => {
clickHandler(e);
});
handlerIndex++;

}

```html <!doctype html> <html class="no-js" lang=""> <head> <meta charset="utf-8"> <title></title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta property="og:title" content=""> <meta property="og:type" content=""> <meta property="og:url" content=""> <meta property="og:image" content=""> <link rel="manifest" href="site.webmanifest"> <link rel="apple-touch-icon" href="icon.png"> <!-- Place favicon.ico in the root directory --> <script src = "app.js"></script> </body> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/main.css"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous"> <meta name="theme-color" content="#fafafa"> </head> <body> <div class="container"> <!-- Content here --> <!-- Add your site or application content here --> <p> </p> <div id="js-question" class="mt-3 alert alert-primary" role="alert"> A simple primary alert—check it out! </div> <div class="d-flex justify-content-center"> <button type="button" class="btn btn-primary">Primary</button> <button type="button" class="ms-1 btn btn-primary">Primary</button> <button type="button" class="ms-1 btn btn-primary">Primary</button> <button type="button" class="ms-1 btn btn-primary">Primary</button> </div> </div> <script src = "app.js"></script> </body> </html>

試したこと

Vscodeでの確認、見本にした動画での見直し

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

ここにより詳細な情報を記載してください。

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

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

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

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

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

int32_t

2021/03/31 08:58

エラーを過不足無くすべて掲載してください。
gentaro

2021/03/31 09:24

そもそもリファクタリングってのはちゃんとテスト作っておいて何か変更したタイミングで修正前と相違が無いかを確認しながらやるもんです。 それができてないからエラーの原因がわからないんでしょうから、元のコードに戻してテストを作るところから始めましょう。
guest

回答2

0

buttonIndexがsetupQuiz関数内でのみ定義されているためwhile (buttonIndex < buttonLength)の部分では使えばません

かんたんに直すならsetupQuizの関数の中身を出した上でsetupQuizを削除するのがいいと思います(最悪var)

投稿2021/03/31 09:51

mouse_484

総合スコア759

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

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

0

まずbuttonIndex,buttonLengthをグローバルに宣言してください

let buttonIndex,buttonLength;

setupQuiz()内で宣言するのはやめましょう
const buttonLength = button.lengthも削除してください

投稿2021/03/31 09:50

yambejp

総合スコア114843

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問