试图隐藏元素并在单击按钮时回调它们

Question

我对编码还是个新手，所以也许我犯了一些新手错误，但我走了。 在我的 HTML 页面中，我有一个容器，它负责处理我的 javascript 所需的仅有的两个元素，我还在该 div 中添加了一个名为“hide”的类。 我使用“隐藏”类使用 display: none 隐藏我的 CSS 中的内容，所以当你第一次打开我的 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>

Answer 1

您似乎定义了重复的 onclick 事件。

<button id="Start-btn" class="start-btn btn" onclick="() => clock()">Start</button>

startButton.addEventListener('click', function(){
    clock(); 
    renderQuestion()   
});

请尝试删除onclick="() => clock()" .Futhermore 你能分享 clock() 功能代码吗？

试图隐藏元素并在单击按钮时回调它们

问题描述

1 个解决方案

解决方案1
1 2020-02-19 06:52:26

试图隐藏元素并在单击按钮时回调它们

问题描述

1 个解决方案

解决方案1 1 2020-02-19 06:52:26

解决方案1
1 2020-02-19 06:52:26