Q&A
> 質問歴が浅いので質問の際もっとこういった情報を載せたほうがいい等の助言
質問テンプレートに沿った内容で整理すると良いです。
また、markdown を使用して読みやすいものにしないと、回答者は読みません。
前提・実現したいこと
MacBookでsublime text を使用して４択の簡単なクイズを製作している途中です。言語はJavaScriptで途中リファクタリングをしようと試みたのですが上手くいきませんでした。見返してもどこで上手くいかなくなっているのかが分からない状態です。リファクタリングの箇所はソースコードの「app.js」タブに「// 」の形で書いてあります。よろしくお願いします。また質問歴が浅いので質問の際もっとこういった情報を載せたほうがいい等の助言もありましたらそちらのほうも教えて頂けると助かります。
該当のソースコード
（html.indexタブ）
<!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 --> <!-- CSS only --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous"> <meta name="theme-color" content="#fafafa"> </head> <body> <div class="container"><script src="app.js"></script> </body> </html><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="ml-1 btn btn-primary">Primary</button> <button type="button" class="ml-1 btn btn-primary">Primary</button> <button type="button" class="ml-1 btn btn-primary">Primary</button> </div> </div>
（app.jsタグ）
const question='この中で一番美しいのは誰でしょう？';
const answers=[
'シンデレラ',
'白雪姫',
'俺',
'ウーパールーパー'
];
const correct='ウーパールーパー';
// ????????????
// console.log();
document.getElementById('js-question').textContent=question;
const $btn =document.getElementsByTagName('button');
//ここの下４行をリファクタリングしたい
// $btn[0].textContent=answers[0];
// $btn[1].textContent=answers[1];
//$btn[2].textContent=answers[2];
//$btn[3].textContent=answers[3];
// 上の４行と同じコードを下にリファクタリング
let btnindex=0;
let btnlenght= $btn.lenght;
// 上の＄btn.lenghtが４になれば機能するが...
while(btnindex<btnlenght){
$btn[btnindex].textContent=answers[btnindex];
btnindex ++;
}
//ここから先は質問に関係ないので省略
const clickmove = (e) =>{
if(correct === e.target.textContent){
window.alert('正解');
} else{
window.alert('不正解');
}
// quizindex++;
// if(quizindex<quizlenght){
// }else{
// window.alert('終了');
// }
};
＃＃＃詳細写真
質問ではなく作業依頼にしか見えませんが、
>途中リファクタリング
出来上がってないものをリファクタリングするのは悪手です。
動かないコードを修正してくれ、というのはリファクタリングではなく、既に低評価が付いているように丸投げ、ソースクレクレですよ。
回答1件
0
ベストアンサー
なんやろ。
javascript
1//ここの下４行をリファクタリングしたい 2 3// $btn[0].textContent=answers[0]; 4// $btn[1].textContent=answers[1]; 5//$btn[2].textContent=answers[2]; 6//$btn[3].textContent=answers[3];
ゆうことなんやけど、ボタンの数が何個になってもええようにするには、その４行を、とりま、こう
javascript
1[...$btn].forEach((e, i) => { 2 e.textContent = answers[i]; 3 });
したらええねん ➡ サンプル （※ボタン、7個にしてみたで）
投稿2021/08/19 23:14
退会済みユーザー
総合スコア0
質問ではなく作業依頼にしか見えませんが、
>途中リファクタリング
出来上がってないものをリファクタリングするのは悪手です。
と言う回答もありましたが、自分の分からない内容がよろしくない、またそれについての説明の不十分があるというのはごもっともだと思います。とはいえ、回答ありがとうございました。
回答のコードで無事上手くいきました。
あなたの回答
tips
プレビュー
