Javascript 向onclick添加另一个函数

嗨，我有一个onclick按钮场景，我已经简化了。我有两张画布（一个正方形和一个圆形）和一张画卷。单击onclick时

1） 正方形画布的饱和度应在3秒后增加5%

2） 3秒钟后打开一个模式对话框，内部有一个onclick

当按下“模态对话框”onclick时，它将关闭并清除并在旧圆形画布上重新绘制新圆形画布

理想情况下，当黄色正方形的饱和度为25%（或按下按钮5次）时，研究场景应完成并将我发送至404。但是方形画布不会增加饱和度，我不知道它是否会把我送到404，因为它不会增加到25%

var squaretime=document.getElementById（“timeCanvas”）；
var sqt=squaretime.getContext（“2d”）；
sqt.globalAlpha=0.1；
sqt.beginPath（）；
sqt.rect（0,0,80,80）；
sqt.fillStyle=“黄色”；
//cir.globalAlpha=0.4；
sqt.fill（）；
sqt.stroke（）；
var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
ctx.beginPath（）；
ctx.arc（300300250,0,2*Math.PI）；
ctx.stroke（）；
ctx.beginPath（）；
ctx.moveTo（125125）；
ctx.lineTo（475475）；
ctx.stroke（）；
ctx.beginPath（）；
ctx.moveTo（125475）；
ctx.lineTo（475125）；
ctx.stroke（）；
var modal=document.querySelector（“.modal”）；
var trigger=document.querySelector（“.trigger”）；
var closeButton=document.querySelector（“关闭按钮”）；
函数toggleModal（）{
setTimeout（函数（）{
modal.classList.toggle（“显示模态”）；
}, 3000)
}
函数closeModalNow（）{
modal.classList.toggle（“显示模态”）；
document.querySelector（'input[name=“conf1d3nce”]”）。value=null；
var canvas=document.getElementById（“myCanvas”）；
var ctx=canvas.getContext（“2d”）；
ctx.clearRect（0,060600）；
ctx.beginPath（）；
ctx.moveTo（125125）；
ctx.lineTo（475475）；
ctx.stroke（）；
ctx.beginPath（）；
ctx.moveTo（125475）；
ctx.lineTo（475125）；
ctx.stroke（）；
}
trigger.addEventListener（“单击”，切换模式）；
closeButton.addEventListener（“单击”，closeModalNow）；
//增加黄色方块5%
提交=函数（）{
复位；
重置=函数（）{
检查时间（）
var y=document.getElementById（“timeCanvas”）
var context=y.getContext（'2d'）；
clearRect（0，0，y.宽度，y.高度）；
//var squaretime=document.getElementById（“timeCanvas”）；
var sqt=y.getContext（“2d”）；
console.log（sqt.globalAlpha）
检查时间（）
sqt.globalAlpha=sqt.globalAlpha+0.05；
setTimeout（函数（）{
sqt.beginPath（）；
sqt.rect（0,0,80,80）；
sqt.fillStyle=‘黄色’；
sqt.fill（）；
sqt.stroke（）；
}, 3000)
}}
//在黄方块饱和25%时完成任务
检查时间=函数（）{
var y=document.getElementById（“timeCanvas”）
var sqt=y.getContext（“2d”）；
如果（sqt.globalAlpha>=0.95）{
控制台日志（sqt.globalAlpha）；
window.location.href=“INTERCEPT”；
}
}

.modal{
位置：固定；
左：0；
排名：0；
宽度：100%；
身高：100%；
背景色：rgba（0,0,0,0.01）；
不透明度：0；
可见性：隐藏；
转换：比例（1.1）；
过渡：可见性0s线性0.25s，不透明度0.25s 0s，变换0.25s；
}
.模态内容{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
背景色：白色；
填充：1雷姆1.5雷姆；
宽度：24rem；
边界半径：0.5雷姆；
}
.关闭按钮{
浮动：对；
宽度：1.5雷姆；
线高：1.5雷姆；
文本对齐：居中；
光标：指针；
边界半径：0.25雷姆；
背景颜色：浅灰色；
}
.关闭按钮：悬停{
背景色：暗灰色；
}
.显示模态{
不透明度：1；
能见度：可见；
变换：比例（1.0）；
过渡：可见性0s线性0s，不透明度0.25s 0s，变换0.25s；
}

剩下的时间

点击这里
请说明您对此决定的信心（0-100%）



拯救
//圆形网格（地图）

您必须将代码简化为一个最小的示例

我看到几个问题：

• 没有要提交的电话

• document.getElementById（“timeCanvas”）的副本

• alpha的增加超出了增加它的实际功能

请参阅下面代码中的一个最简单的工作示例

var squaretime=document.getElementById（“timeCanvas”）；
var sqt=squaretime.getContext（“2d”）；
sqt.globalAlpha=0.1；
sqt.beginPath（）；
sqt.rect（0,0,80,80）；
sqt.fillStyle=“黄色”；
//cir.globalAlpha=0.4；
sqt.fill（）；
sqt.stroke（）；
document.querySelector（“.trigger”）.onclick=submit；
//增加黄色方块5%
函数提交（）{
setTimeout（函数（）{
sqt.clearRect（0，0，squaretime.width，squaretime.height）；
sqt.beginPath（）；
sqt.globalAlpha=sqt.globalAlpha+0.05；
sqt.rect（0,0,80,80）；
sqt.fillStyle=‘黄色’；
sqt.fill（）；
sqt.beginPath（）；
sqt.fillStyle='黑色'；
sqt.fillText（sqt.globalAlpha，10,50）；
}, 100)
}

单击此处

很抱歉回复太慢。最终它成功了。但你们的代码确实有助于更好地理解我的错误所在。