我对编码还是新手，所以也许我犯了一些菜鸟错误，但我开始了。在我的 HTML 页面中，我有一个容器，它负责处理 javascript 所需的唯一两个元素，我还在该 div 中添加了一个名为“hide”的类。我使用“hide”类来隐藏CSS中的内容，使用display:none，所以当你第一次打开我的HTML页面时，你看到的只是一个开始按钮和一个计时器。在我的 JavaScript 中，我编写了代码，以便当单击开始按钮时，计时器将开始倒计时，我的测验将出现在页面上。然而目前，只有我的计时器在工作，无论我尝试过什么，我的测验都不会出现。任何帮助都感激不尽。不确定我是否提供了所需的一切，但如果需要，我可以提供更多代码。
const startButton = document.getElementById('Start-btn')
var funcEl = document.getElementById("func container")
startButton.addEventListener('click', function(){
clock();
renderQuestion()
});
// pos is position of where the user in the test or which question they're up to
var pos = 0, test, test_status, question, choice, choices, chA, chB, chC, correct = 0;
var questions = [
["Which language is used for styling web pages?", "HTML", "JQuery", "CSS", "C"],
["Which is not a JavaScript Framework?", "Python Script", "JQuery","Django", "C"],
["Hyper Text Markup Language Stand For?", "XHTML","CSS", "HTML", "C"],
["Which languages hasn't been covered in class yet?", "JavaScript", "HTML", "React", "C"]
];
// We use this functions in order to use get instead of getElement
function get(x){
return document.getElementById(x);
}
function renderQuestion(){
startButton.classList.add('hide')
funcEl.classList.remove('hide')
test = get("test");
if(pos >= questions.length){
test.innerHTML = "<h2>You got "+correct+" of "+questions.length+" questions correct</h2>";
get("test_status").innerHTML = "Test completed";
// resets the variable to allow users to restart the test
pos = 0;
correct = 0;
// stops rest of renderQuestion function running when test is completed
return false;
//Stopwatch
var c = 60;
var myTimer;
function clock() {
myTimer = setInterval(myClock, 1000);
function myClock() {
document.getElementById("timer").innerHTML = c--;
if (c == 0) {
clearInterval(myTimer);
}
}
}
}<html>
<body>
<div class="container">
<div id="func container" class='hide'>
<h1 id="test_status"></h1>
<div id="test"></div>
</div>
<div class="controls">
<button id="Start-btn" class="start-btn btn" onclick="() => clock()">Start</button>
</div>
</div>
</body>
</html>最佳答案
您似乎定义了重复的 onclick 事件。
<button id="Start-btn" class="start-btn btn" onclick="() => clock()">Start</button>
startButton.addEventListener('click', function(){
clock();
renderQuestion()
});
请尝试删除onclick="() => Clock()"。您能分享一下clock()函数代码吗？
关于javascript - 尝试隐藏元素并在单击按钮时回调它们，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60294444/