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

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>

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

回答2件

ベストアンサー

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

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

総合スコア116724

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

posをみてdisabledを変更するbtnActivate関数を定義
画面表示時と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>