onClick问题的多种功能

Question

嗨，我有一个onclick按钮场景，我已经简化了它。我有两张拉票(一张正方形和一张圆形(和一张onclick。单击onclick时。。。

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

2( 模式对话框在3秒钟后打开，点击内部

当按下"模态对话框"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 = "yellow";
//cir.globalAlpha = 0.4;
sqt.fill();
sqt.stroke();
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(300, 300, 250, 0, 2 * Math.PI);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(125,125);
ctx.lineTo(475,475);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(125,475);
ctx.lineTo(475, 125);
ctx.stroke();
var modal = document.querySelector(".modal");
var trigger = document.querySelector(".trigger");
var closeButton = document.querySelector(".close-button");
function toggleModal() {
setTimeout(function() {
modal.classList.toggle("show-modal");
}, 3000)
}
function closeModalNow() {
modal.classList.toggle("show-modal");
document.querySelector('input[name="conf1d3nce"]').value = null;
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, 600, 600);
ctx.beginPath();
ctx.moveTo(125,125);
ctx.lineTo(475,475);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(125,475);
ctx.lineTo(475, 125);
ctx.stroke();
}
trigger.addEventListener("click", toggleModal);
closeButton.addEventListener("click", closeModalNow);
//increases the yellow square by 5%
submit = function() {
reset;

reset = function() {
check_time()
var y = document.getElementById("timeCanvas")
var context = y.getContext('2d');
context.clearRect(0, 0, y.width, y.height);
//var squaretime = document.getElementById("timeCanvas");
var sqt= y.getContext("2d");
console.log(sqt.globalAlpha)
check_time()
sqt.globalAlpha = sqt.globalAlpha + 0.05;
setTimeout(function() {
sqt.beginPath();
sqt.rect(0, 0, 80, 80);
sqt.fillStyle = 'yellow';
sqt.fill();
sqt.stroke();
}, 3000)
}}

//finished the task at 95% saturation of yellow square
check_time = function() {
var y = document.getElementById("timeCanvas")
var sqt= y.getContext("2d");
if (sqt.globalAlpha >= 0.95) {
console.log(sqt.globalAlpha);
window.location.href = "INTERCEPT";
}
}

.modal {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.01);
opacity: 0;
visibility: hidden;
transform: scale(1.1);
transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
}
.modal-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
padding: 1rem 1.5rem;
width: 24rem;
border-radius: 0.5rem;
}
.close-button {
float: right;
width: 1.5rem;
line-height: 1.5rem;
text-align: center;
cursor: pointer;
border-radius: 0.25rem;
background-color: lightgray;
}
.close-button:hover {
background-color: darkgray;
}
.show-modal {
opacity: 1;
visibility: visible;
transform: scale(1.0);
transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
}

<div class="styling">
<div class="general_text_2">
<p>Time left </p>
<canvas id="timeCanvas" width="80" height="80" style="border:1px solid #d3d3d3;">
</canvas>
<button class="trigger">Click here </button>
<div class="modal">
<div class="modal-content">

<h1>
<label><b>Please state your confidence with this decision (0-100%)</b></label>
<p>
<input class="bottomaftertrialquestions" type="number" placeholder="Type here" name="conf1d3nce"min="0" max="100" required>
</p>
<p></h1>
<button type="button" class="close-button">SAVE</button>
</div>
</div>
// CIRCLE GRID (MAP) 
<canvas id="myCanvas" width="600" height="600" style="border 12px solid black">
</canvas>

Answer 1

您似乎从未在这段代码中调用过submit函数