Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/72.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 如何制作一个跟踪按钮点击次数的函数_Javascript_Html - Fatal编程技术网

Javascript 如何制作一个跟踪按钮点击次数的函数

Javascript 如何制作一个跟踪按钮点击次数的函数,javascript,html,Javascript,Html,我正试图使游戏按钮在点击下一个btn两次后显示出来。因此,在多项选择题测试回答了两次之后,我希望游戏按钮显示出来,这样它就可以引导用户进入一个单独的html,这个html已经被设置为agario.html 我已经在代码中进行了尝试,正如您在js中看到的那样 function clickme() { clicks += 1; document.getElementById('next-btn').innerHTML = click; if (clicks == 2) { g

我正试图使
游戏
按钮在点击
下一个btn
两次后显示出来。因此,在多项选择题测试回答了两次之后,我希望游戏按钮显示出来,这样它就可以引导用户进入一个单独的html,这个html已经被设置为
agario.html

我已经在代码中进行了尝试,正如您在js中看到的那样

function clickme() { 
  clicks += 1; 
  document.getElementById('next-btn').innerHTML = click;
  if (clicks == 2) {
    game.classList.remove('hide')
  }
}
但这似乎不起作用?有什么想法吗?
const startButton=document.getElementById('start-btn'))
const nextButton=document.getElementById('next-btn')
const questionContainerElement=document.getElementById('question-container')
const questionElement=document.getElementById('question')
常量image1=document.getElementById('image1')
const answerbuttonsement=document.getElementById('answer-buttons'))
const endbutton=document.getElementById('end-btn')
const trybutton=document.getElementById('try-btn')
const startmsgs=document.getElementById('startmsg')
const game=document.getElementById('agar')
var=0;
让我们来看看洗牌问题,currentQuestionIndex
startButton.addEventListener('click',StartName)
nextButton.addEventListener('单击',()=>{
当前问题索引++
setNextQuestion()
changeImg()
})
函数clickme(){
点击次数+=1;
document.getElementById('next-btn')。innerHTML=单击;
如果(单击==2){
game.classList.remove('hide')
}
}
endbutton.addEventListener('单击',()=>{
window.top.close()
})
trybutton.addEventListener('click',setNextQuestion)
函数startName(){
startButton.classList.add('hide'))
startmsgs.classList.add('hide')
shuffledQuestions=questions.slice()
questionContainerElement.classList.remove('hide')
currentQuestionIndex=0
setNextQuestion()
}
函数setNextQuestion(){
重置状态()
showQuestion(无序问题[currentQuestionIndex])
}
函数显示问题(问题){
questionElement.innerText=question.question
问题.答案.forEach(答案=>{
const button=document.createElement('按钮')
button.innerText=answer.text
button.classList.add('btn')
如果(回答正确){
button.dataset.correct=answer.correct
}
按钮。addEventListener('单击',选择回答)
AnswerButtonElement.appendChild(按钮)
})
}
函数resetState(){
clearStatusClass(document.body)
nextButton.classList.add('hide')
while(回答ButtonSelement.第一个孩子){
AnswerButtonSelection.removeChild(AnswerButtonSelection.firstChild)
}
trybutton.classList.add('hide')
}
功能选择应答(e){
const selectedButton=e.target
const correct=selectedButton.dataset.correct
setStatusClass(document.body,正确)
设置StatusClass(选择按钮,正确);
如果(正确){
如果(shuffledQuestions.length>currentQuestionIndex+1){
nextButton.classList.remove('hide')
}否则{
endbutton.classList.remove('hide')
}
}否则{
trybutton.classList.remove('hide')
}
}
功能设置StatusClass(元件,正确){
clearStatusClass(元素)
如果(正确){
element.classList.add('correct')
}
否则{
element.classList.add('错误')
}
}
函数clearStatusClass(元素){
element.classList.remove('correct')
element.classList.remove('错误')
}
常量问题=[
{
问题:“你对了解免疫系统感到兴奋吗?”,
答复:[
{text:'Yes',correct:true},
{文本:“是!!!”,正确:true},
{text:'No',correct:false},
{文本:“是!!!!!!!”,正确:正确}
]
},
{
问题:“我们的免疫系统保护我们免受每天遇到的数千种不同病毒的侵害!没有它,简单的剪纸可能意味着死亡。因此,为了证明免疫系统如何保护我们免受细菌、病毒和异物的侵害,我们从剪纸开始我们的旅程!”,
答复:[
{text:'我被激活了!',正确:true},
]
},  
{
问题:“剪纸可能看起来是一种很轻的伤害,但伤口为不属于身体的东西提供了一个进入身体的开口。对于这种活动,我们只假设细菌进入身体,并通过其在我们体内的旅程以及与我们免疫系统的相互作用来追踪细菌。”,
答复:[
{text:'Got it!',正确:true},
]
},
]
*,*::之前,*::之后{
框大小:边框框;
字体系列:草书,
“泰晤士报新罗马”,泰晤士报,衬线
}
#粒子js{
位置:绝对位置;
宽度:100%;
身高:100%;
/*背景色:#b61924*/
背景重复:无重复;
背景尺寸:封面;
背景位置:50%50%;
z指数:1;
}
:根{
--色调中性:200;
--色相错误:0;
--色调正确:145;
}
身体{
--色调:var(--色调中性);
填充:0;
保证金:0;
显示器:flex;
宽度:100vw;
高度:100vh;
证明内容:中心;
对齐项目:居中;
背景色:hsl(色差(-)),100%,20%;
}
身体,对{
--色调:var(--色调正确);
}
身体不好{
--色调:0;
}
.集装箱{
宽度:1000px;
最大宽度:80%;
背景色:白色;
边界半径:5px;
填充:10px;
盒影:0 10px 2px;
z指数:2;
位置:绝对位置;
} 
.btn网格{
显示:网格;
网格模板列:重复(2,自动);
间隙:10px;
利润率:20px0;
}
.btn{
--色调:var(--色调中性);
边框:1px实心hsl(变型(--色调),100%,30%);
背景色:hsl(色差(-)为100%,色相为50%);
边界半径:5px;
填充物:5px10px;
颜色:白色;
大纲:无;
}
.btn:悬停{
边框颜色:黑色;
}
.btn.正确{
--色调:var(--色调正确);
颜色:黑色;
}
.错{
--色调:var(--色调错误);
}
.下一个btn{
字体大小:1.5rem;
字体大小:粗体;
填充:10px 20px;
对齐项目:柔性端;
--色调:245;
}
.启动btn{
字体大小:1.5rem;
字体大小:粗体;
填充:10px 20px;
--色调:245;
}
.end btn{
字体大小:1.5rem;
字体大小:粗体;
nextButton.addEventListener('click', () => {
   currentQuestionIndex++;
   setNextQuestion();
   changeImg();
   //function you are using to record clicks.
   clickme();
});
nextButton.addEventListener('click', () => {
  currentQuestionIndex++
  setNextQuestion()
  changeImg()
  clickme();
})