Добавление другой функции в клик

Question

Привет, у меня есть сценарий нажатия кнопки, который я упростил. У меня есть два холста (один квадрат и один круг) и онклик. При нажатии на щелчок ...

1) насыщенность квадратного холста должна увеличиться на 5% через 3 секунды.

2) Через 3 секунды открывается модальное диалоговое окно с щелчком мыши inside

Когда нажата кнопка «модальное диалоговое окно», она закрывается, очищается и перерисовывает aws новый круговой холст поверх старого.

В идеале все вместе, когда насыщенность желтого квадрата составляет 25% (или когда кнопка нажата 5 раз), сценарий изучения должен завершиться sh и отправить меня на 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 25% 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

Вы должны сократить свой код до минимального примера ...

Я вижу несколько проблем:

• нет вызовов для отправки
• дубликатов document.getElementById("timeCanvas");
• увеличение альфа находится за пределами фактической функции, которая его увеличивает

См. Ниже минимальный рабочий пример из вашего кода

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();

document.querySelector(".trigger").onclick = submit;

//increases the yellow square by 5%
function submit() {
  setTimeout(function() {
    sqt.clearRect(0, 0, squaretime.width, squaretime.height);
    sqt.beginPath();
    sqt.globalAlpha = sqt.globalAlpha + 0.05;
    sqt.rect(0, 0, 80, 80);
    sqt.fillStyle = 'yellow';
    sqt.fill();
    sqt.beginPath();
    sqt.fillStyle = 'black';
    sqt.fillText(sqt.globalAlpha, 10, 50);
  }, 100)

}

<canvas id="timeCanvas" width="80" height="80"></canvas>

<button class="trigger">Click here </button>