gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-02 21:44:25 24 4
gpt4 key购买 nike

我对编码还是新手,所以也许我犯了一些菜鸟错误,但我开始了。在我的 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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com