我继续在js游戏上做游戏"相信/不相信"；。断言标题一个接一个地出现在屏幕上。用户依次响应每条语句。共有5条语句。如果用户单击False按钮，则会出现以下语句。如果这是真的，那么就会出现一个描述。你可以点击标题下的白色圆圈进入下一个问题，如果已经给出了答案(任何(，白色圆圈会变成红色，或者点击下一个按钮。
问题：
如何添加"下一步"按钮以转到下一个问题？在用户回答问题之前，在他给出答案之前，它不会处于活动状态。如何添加用户回答所有问题后出现的按钮(下面的所有球都填满了(
const data = [
{stmt: "question 1", desc: "text 1"},
{stmt: "question 2", desc: "text 2"},
{stmt: "question 3", desc: "text 3"},
];
let curStmt = 0;
function showStmt(idx) {
document.getElementById('progress-item-' + curStmt).classList.remove('current');
curStmt = idx;
document.getElementById('stmt').innerText = data[idx].stmt;
document.getElementById('desc').innerText = data[idx].desc;
document.getElementById('progress-item-' + idx).classList.add('current');
applyComplete(data[idx].complete);
}
function applyComplete(val) {
val = (val) ? true : false;
document.getElementById('desc').style.visibility = (val) ? 'visible' : 'hidden';
document.getElementById('btnTrue').disabled = val;
document.getElementById('btnFalse').disabled = val;
}
function createProgressBar() {
const parent = document.getElementById('progress');
parent.innerHTML = '';
for (let i = 0; i < data.length; i++) {
const item = document.createElement('div');
item.setAttribute('data-idx', i);
item.id = 'progress-item-' + i;
item.classList.add('item');
if (data[i].complete)
item.classList.add('complete');
parent.appendChild(item);
}
}
function btnClick(val) {
data[curStmt].complete = true;
document.getElementById('progress-item-' + curStmt).classList.add('complete');
if (val || (curStmt === data.length - 1)) {
applyComplete(true);
} else {
showStmt(curStmt + 1);
}
}
document.getElementById('progress').addEventListener(
'click',
function (e) {
if (e.target.classList.contains('item')) {
const newIdx = e.target.getAttribute('data-idx') - 0;
if (newIdx != curStmt) {
showStmt(newIdx);
}
}
},
true
);
createProgressBar();
showStmt(0);.section {
margin: 10px 0;
}
#progress .item {
height: 10px;
width: 10px;
margin: 0 5px;
border: 2px solid red;
border-radius: 50%;
display: inline-block;
cursor: pointer;
}
#progress .item.current {
border-color: blue;
}
#progress .item.complete {
background-color: green;
}
#progress .item:not(.complete):hover {
background-color: lime;
}<div class="section">
<div id="stmt"></div>
<div id="desc"></div>
</div>
<div class="section buttons">
<button id="btnTrue" onclick="btnClick(true)">True</button>
<button id="btnFalse" onclick="btnClick(false)">False</button>
<div>
<div id="progress" class="section"></div>const data = [
{stmt: "question 1", desc: "text 1"},
{stmt: "question 2", desc: "text 2"},
{stmt: "question 3", desc: "text 3"},
];
let curStmt = 0;
let answered =[];
function btnNext() {
console.log('Next button clicked');
document.getElementById('btnTrue').disabled = false;
document.getElementById('btnFalse').disabled = false;
}
function btnAfterComplete() {
console.log('Completed button clicked');
}
function showStmt(idx) {
document.getElementById('progress-item-' + curStmt).classList.remove('current');
curStmt = idx;
document.getElementById('stmt').innerText = data[idx].stmt;
document.getElementById('desc').innerText = data[idx].desc;
document.getElementById('progress-item-' + idx).classList.add('current');
applyComplete(data[idx].complete);
}
function applyComplete(val) {
val = (val) ? true : false;
document.getElementById('desc').style.visibility = (val) ? 'visible' : 'hidden';
document.getElementById('btnTrue').disabled = val;
document.getElementById('btnFalse').disabled = val;
}
function createProgressBar() {
const parent = document.getElementById('progress');
parent.innerHTML = '';
for (let i = 0; i < data.length; i++) {
const item = document.createElement('div');
item.setAttribute('data-idx', i);
item.id = 'progress-item-' + i;
item.classList.add('item');
if (data[i].complete)
item.classList.add('complete');
parent.appendChild(item);
}
}
function btnClick(val) {
data[curStmt].complete = true;
answered.push(val);
document.getElementById('progress-item-' + curStmt).classList.add('complete');
if (val || (curStmt === data.length - 1)) {
applyComplete(true);
} else {
showStmt(curStmt + 1);
document.getElementById('btnTrue').disabled = true;
document.getElementById('btnFalse').disabled = true;
}
document.getElementById('btnNext').style.visibility = ((curStmt == answered.length) && (answered.length != data.length)) ? 'visible' : 'hidden';
document.getElementById('btnAfterComplete').style.visibility = (answered.length == data.length) ? 'visible' : 'hidden';
}
document.getElementById('progress').addEventListener(
'click',
function (e) {
if (e.target.classList.contains('item')) {
const newIdx = e.target.getAttribute('data-idx') - 0;
if (newIdx != curStmt) {
showStmt(newIdx);
}
}
},
true
);
createProgressBar();
showStmt(0);.section {
margin: 10px 0;
}
#progress .item {
height: 10px;
width: 10px;
margin: 0 5px;
border: 2px solid red;
border-radius: 50%;
display: inline-block;
cursor: pointer;
}
#progress .item.current {
border-color: blue;
}
#progress .item.complete {
background-color: green;
}
#progress .item:not(.complete):hover {
background-color: lime;
}
#btnNext{
visibility: hidden;
}
#btnAfterComplete{
visibility: hidden;
}<div class="section">
<div id="stmt"></div>
<div id="desc"></div>
</div>
<div class="section buttons">
<button id="btnTrue" onclick="btnClick(true)">True</button>
<button id="btnFalse" onclick="btnClick(false)">False</button>
<button id="btnNext" onclick="btnNext()">Next</button>
<button id="btnAfterComplete" onclick="btnAfterComplete()">Complted</button>
<div>
<div id="progress" class="section"></div>请检查摘录
您可以通过修改disabled属性或添加/删除类来完成此操作。我建议使用disabled属性。
修改属性
您需要在<button disabled="true">和<button disabled="false">之间切换
使用javascript，它可能看起来像这样：
if flag=1:
document.getElementById("your-btn").disabled = true;
else:
document.getElementById("your-btn").disabled = false;
相同的示例
const myFunction=()=>{
document.getElementById("your-btn").disabled = false;
}<h1>Activate the disabled button conditionally</h1>
<button type="button" id="your-btn" disabled="false">Click Me!</button>
<button type="button" onclick="myFunction()">Click me to Activate the previous button</button>请告诉我是否有任何帮助：(