一旦按钮被禁用，JavaScript 不会进一步执行
[英]JavaScript not further executed once a button is disabled
问题描述
我正在使用 next 和 prev 按钮，因此将一次显示一个问题，但是，一旦禁用 next 或 prev 按钮，另一个按钮也不再起作用。 这是我的代码：
var showing = [1, 0, 0, 0]; var questions = ['q0', 'q1', 'q2', 'q3']; function next() { var qElems = []; for (var i = 0; i < questions.length; i++) { qElems.push(document.getElementById(questions[i])); } for (var i = 0; i <= showing.length; i++) { if (showing[i] == 1) { showing[i] = 0; if (i == showing.length - 1) { document.getElementById("next").disabled = true; } else { console.log(i); qElems[i + 1].style.display = 'block'; qElems[i].style.display = 'none'; showing[i + 1] = 1; } break; } } } function prev() { var qElems = []; for (var i = 0; i < questions.length; i++) { qElems.push(document.getElementById(questions[i])); } for (var i = 0; i <= showing.length; i++) { if (showing[i] == 1) { showing[i] = 0; if (i == showing.length - 4) { document.getElementById("prev").disabled = true; } else { qElems[i - 1].style.display = 'block'; qElems[i].style.display = 'none'; showing[i - 1] = 1; } break; } } }
2 个解决方案
解决方案1
3 已采纳 2019-12-18 12:25:26
我想你想要这个简化的脚本
我不得不猜测 HTML，但只有一个函数。
window.addEventListener("load", function() { let showing = 0; const questions = document.querySelectorAll(".q"); questions[showing].style.display = "block"; const next = document.getElementById("next"); const prev = document.getElementById("prev"); document.getElementById("nav").addEventListener("click", function(e) { var but = e.target, dir; if (but.id === "prev") dir = -1; else if (but.id === "next") dir = 1; else return; // not a button questions[showing].style.display = "none"; // hide current showing += dir; // up or down next.disabled = showing === questions.length-1; if (showing <= 0) showing = 0; prev.disabled = showing === 0 questions[showing].style.display = "block"; }) })
.q { display:none }
<div class="q" id="q0">Question 0</div> <hr/> <div class="q" id="q1">Question 1</div> <hr/> <div class="q" id="q2">Question 2</div> <hr/> <div class="q" id="q3">Question 3</div> <hr/> <div id="nav"> <button type="button" id="prev" disabled>Prev</button> <button type="button" id="next">Next</button> </div>
解决方案2
0 2019-12-18 12:14:16
由于这是一个安静有趣的 java 脚本任务，我正在做我自己的解决方案。
希望这符合要求。
我创建了 4 个 div，其中第一个只显示在第一个。 剩余的 div 被隐藏。 单击下一步时，将根据索引显示 div。 一旦解释了最后一个和第一个索引，相应的下一个和上一个按钮将被启用和禁用。
var showing = [1, 0, 0, 0]; var questions = ['q0', 'q1', 'q2', 'q3']; var qElems = []; function initialize() { for (var i = 0; i < questions.length; i++) { qElems.push(document.getElementById(questions[i])); } } function updatevisibilitystatus(showindex, hideindex) { qElems[showindex].style.display = 'block'; qElems[hideindex].style.display = 'none'; showing[showindex] = 1; } function next() { for (var i = 0; i <= showing.length; i++) { if (showing[i] == 1) { showing[i] = 0; if (i == showing.length - 2) { document.getElementById("next").disabled = true; } updatevisibilitystatus(i + 1, i); document.getElementById("prev").disabled = false; break; } } } function prev() { for (var i = 0; i <= showing.length; i++) { if (showing[i] == 1) { showing[i] = 0; if (i == 1) { document.getElementById("prev").disabled = true; } updatevisibilitystatus(i - 1, i); document.getElementById("next").disabled = false; break; } } }
<body onload="initialize()"> <div id="q0" style="display: block;">Q0</div> <div id="q1" style="display: none;">Q1</div> <div id="q2" style="display: none;">Q2</div> <div id="q3" style="display: none;">Q3</div> <button id="prev" disabled onclick="prev()">Prev</button> <button id="next" onclick="next()">Next</button> </body>
执行函数后，如何正确使javascript函数单击按钮？
[英]How to properly make a javascript function click a button once the function is executed?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.