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

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

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

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

861閲覧

JavaScriptでボタンの使用可否を決める

Ciel217

総合スコア9

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2022/01/10 15:02

JavaScriptで英語の問題を作成しているのですが
「次へ」と「前へ」のボタンを作成して、問題が切り替わるようにしており
最終問題に到達すると「次へ」のボタンが押せなくなるようになっているのですが
その状態で前へと押すと次へのボタンが押せない状態が続いてしまいます。
そのため最終問題の時だけ「次へ」が押せなくし、最終問題に到達した後も
「前へ」のボタンを押した状態の時にボタンが再使用できるようにしたいです。
また、1問目の時は前へのボタンが押せなくなるか非表示にしたいです。
どなたかお願いします。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <META http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>並び替え問題</title> <script> window.addEventListener('DOMContentLoaded', ()=>{ const shuffle=x=>x.map(y=>[y,Math.random()]).sort((y,z)=>y[1]-z[1]).map(y=>y[0]); let q = [ "i sometimes watch movies on Sunday", "this book is too difficult for me", "yumi can't stay at her aunt's house",]; q=shuffle(q); document.querySelectorAll('.view').forEach((view,idx)=>{ shuffle(q[idx].split(' ')) .forEach(x=>view.append(Object.assign(document.createElement('div'),{textContent:x}))); view.addEventListener('dragover',e=>e.preventDefault()); var t=null; view.querySelectorAll('div').forEach(x=>{ x.setAttribute("draggable","true"); x.addEventListener('drop',e=>{ view.insertBefore(t,x.nextElementSibling); }); x.addEventListener('dragstart',e=>{ t=e.target; }); }); }); document.querySelector('.btn-score').addEventListener('click',()=>{ let score = 0; const totalScore = document.getElementById('score-message'); document.querySelectorAll('.view').forEach((view,idx)=>{ const a=[...view.querySelectorAll('div')].map(x=>x.textContent).join(' '); if(q[idx]==a) score++; }); totalScore.textContent = score + "点"; }); }); window.addEventListener('DOMContentLoaded', ()=>{ const next=document.querySelector('#next'); const q=[...document.querySelectorAll('.q')]; next.addEventListener('click',()=>{ const active=document.querySelector('.q:not([hidden])'); const idx=q.indexOf(active); active.setAttribute('hidden',''); q[idx+1].removeAttribute('hidden'); if(idx==q.length-2){ next.disabled=true; } }); }); window.addEventListener('DOMContentLoaded', ()=>{ const prev=document.querySelector('#prev'); const q=[...document.querySelectorAll('.q')]; prev.addEventListener('click',()=>{ const active=document.querySelector('.q:not([hidden])'); const idx=q.indexOf(active); active.setAttribute('hidden',''); q[idx-1].removeAttribute('hidden'); if(idx==q.length-2){ prev.disabled=true; } }); }); </script> <style type="text/css"> body { font-family: serif; text-align: center; } .quizzes-container { width: 400px; margin: 50px auto; } .quiz-container { border-bottom:1px solid black; padding-bottom: 20px; } #score-container { border: 1px solid black; height: 50px; width: 20%; position: relative; left: 40%; } .btn-score { display: block; margin: 20px auto; font-family: serif; background-color: white; } .view{ display:flex; position: relative; left:35%; } .view div{border:solid 2px;padding:8px 16px 8px 16px ;} .view div:not(:first-child){border-left:solid 0px;} </style> <H2>並び替え問題</H2> <div class="quiz-container"></div> <div class="q"> <h2>第1問</h2> <div class="view"></div><br> <div class="quiz-container"></div></div> <div class="q" hidden> <h2>第2問</h2> <div class="view"></div><br> <div class="quiz-container"></div></div> <div class="q" hidden> <h2>第3問</h2> <div class="view"></div><br> <div class="quiz-container"></div></div><br> <input type="button" value="前へ" id="prev"> <input type="button" value="次へ" id="next"><br><br> <div id="score-container"> <p id="score-message"></p> </div><button class="btn-score" type="button">合計得点を見る</button></div>

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

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

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

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

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

guest

回答2

0

ベストアンサー

この手の処理で前に戻るのは微妙ですが

javascript

1window.addEventListener('DOMContentLoaded', ()=>{ 2 const prev=document.querySelector('#prev'); 3 const next=document.querySelector('#next'); 4 const q=[...document.querySelectorAll('.q')]; 5 prev.disabled=true; 6 next.addEventListener('click',()=>{ 7 const active=document.querySelector('.q:not([hidden])'); 8 const idx=q.indexOf(active); 9 active.setAttribute('hidden',''); 10 q[idx+1].removeAttribute('hidden'); 11 prev.disabled=false; 12 next.disabled=idx==q.length-2 13 }); 14 prev.addEventListener('click',()=>{ 15 const active=document.querySelector('.q:not([hidden])'); 16 const idx=q.indexOf(active); 17 active.setAttribute('hidden',''); 18 q[idx-1].removeAttribute('hidden'); 19 prev.disabled=idx==q.length-2; 20 next.disabled=false 21 }); 22});

投稿2022/01/11 02:26

yambejp

総合スコア114505

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

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

0

こっちの質問で直したついでの回答なので、その修正ソースがベースになりますが、

  1. posをみてdisabledを変更するbtnActivate関数を定義
  2. 画面表示時とnext prevのタイミングでbtnActivate呼び出し

です。

html

1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2<html> 3<head> 4<META http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5<title>並び替え問題</title> 6 7<script> 8 let q_bk = []; 9 let pos = 0; 10 11 function btnActivate() { 12 document.querySelector('#prev').disabled = (pos === 0); 13 document.querySelector('#next').disabled = (pos === q_bk.length - 1); 14 } 15 16 window.addEventListener('DOMContentLoaded', ()=>{ 17 18 document.querySelector('.ans').addEventListener('click',()=>{ 19 const ansText = q_bk[pos].charAt(0).toUpperCase() + q_bk[pos].slice(1) + "."; 20 document.querySelector('.answer_view').innerHTML = ansText; 21 }); 22 23 btnActivate(); 24 25 const shuffle=x=>x.map(y=>[y,Math.random()]).sort((y,z)=>y[1]-z[1]).map(y=>y[0]); 26 let q = [ 27 "i sometimes watch movies on Sunday", 28 "this book is too difficult for me", 29 "yumi can't stay at her aunt's house",]; 30 q=shuffle(q); 31 q_bk = [...q] 32 document.querySelectorAll('.view').forEach((view,idx)=>{ 33 shuffle(q[idx].split(' ')) 34 .forEach(x=>view.append(Object.assign(document.createElement('div'),{textContent:x}))); 35 view.addEventListener('dragover',e=>e.preventDefault()); 36 var t=null; 37 view.querySelectorAll('div').forEach(x=>{ 38 x.setAttribute("draggable","true"); 39 x.addEventListener('drop',e=>{ 40 view.insertBefore(t,x.nextElementSibling); 41 }); 42 x.addEventListener('dragstart',e=>{ 43 t=e.target; 44 }); 45 }); 46 }); 47 48 document.querySelector('.btn-score').addEventListener('click',()=>{ 49 let score = 0; 50 const totalScore = document.getElementById('score-message'); 51 document.querySelectorAll('.view').forEach((view,idx)=>{ 52 const a=[...view.querySelectorAll('div')].map(x=>x.textContent).join(' '); 53 if(q[idx]==a) score++; 54 }); 55 totalScore.textContent = score + "点"; 56 }); 57 }); 58 59 window.addEventListener('DOMContentLoaded', ()=>{ 60 const next=document.querySelector('#next'); 61 const q=[...document.querySelectorAll('.q')]; 62 next.addEventListener('click',()=>{ 63 pos = pos + 1; 64 document.querySelector('.answer_view').innerHTML = ""; 65 const active=document.querySelector('.q:not([hidden])'); 66 const idx=q.indexOf(active); 67 active.setAttribute('hidden',''); 68 q[idx+1].removeAttribute('hidden'); 69 btnActivate(); 70 // if(idx==q.length-2){ 71 // next.disabled=true; 72 // } 73 }); 74}); 75 76window.addEventListener('DOMContentLoaded', ()=>{ 77 const prev=document.querySelector('#prev'); 78 const q=[...document.querySelectorAll('.q')]; 79 prev.addEventListener('click',()=>{ 80 pos = pos - 1; 81 document.querySelector('.answer_view').innerHTML = ""; 82 const active=document.querySelector('.q:not([hidden])'); 83 const idx=q.indexOf(active); 84 active.setAttribute('hidden',''); 85 q[idx-1].removeAttribute('hidden'); 86 btnActivate(); 87 // if(idx==q.length-2){ 88 // prev.disabled=true; 89 // } 90 }); 91}); 92</script> 93 94<style type="text/css"> 95 body { 96 font-family: serif; 97 text-align: center; 98 } 99 .quizzes-container { 100 width: 400px; 101 margin: 50px auto; 102 } 103 .quiz-container { 104 border-bottom:1px solid black; 105 padding-bottom: 20px; 106 } 107 #score-container { 108 border: 1px solid black; 109 height: 50px; 110 width: 20%; 111 position: relative; 112 left: 40%; 113 } 114 .btn-score { 115 display: block; 116 margin: 20px auto; 117 font-family: serif; 118 background-color: white; 119 } 120 .view{ 121 display:flex; 122 position: relative; 123 left:35%; 124 } 125 .view div{border:solid 2px;padding:8px 16px 8px 16px ;} 126 .view div:not(:first-child){border-left:solid 0px;} 127</style> 128 129<H2>並び替え問題</H2> 130<div class="quiz-container"></div> 131<div class="q"> 132<h2>第1問</h2> 133<div class="view"></div><br> 134<div class="quiz-container"></div></div> 135<div class="q" hidden> 136<h2>第2問</h2> 137<div class="view"></div><br> 138<div class="quiz-container"></div></div> 139<div class="q" hidden> 140<h2>第3問</h2> 141<div class="view"></div><br> 142<div class="quiz-container"></div></div><br> 143<input type="button" value="前へ" id="prev"> 144<input type="button" value="次へ" id="next"><br><br> 145 <div id="score-container"> 146 <p id="score-message"></p> 147 </div><button class="btn-score" type="button">合計得点を見る</button></div> 148</div><button class="ans" type="button">解答を見る</button></div> 149<div class="answer_view"></div>

投稿2022/01/10 15:43

umau

総合スコア805

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問