Подтвердите метод, используя HTML и JavaScript

Question

Привет всем У меня возникла проблема с методом подтверждения в HTML (создание кнопки). Вот ссылка на codepen https://codepen.io/gat-yvon-josua/pen/abOPeEw

Может кто-нибудь сказать мне, что не так с моим кодом?

Это мой JavaScript код

function clickme() {
  confirm('do you accept Jesus');
}
var choice = confirm("do you accept Jesus");

if ( choice == true){
  alert("you pressed ok");
}
else {
  alert("are you sure you want to cancel");
}

Вот мой CSS код.

h1 {
  font-family: palatino;
  color: dimgray;
}
div {
  width: 140pt;
  padding: 5pt;
  Margin: 10pt;
  border: 1px solid lightgray;
  font-size: 20pt;
}
#div1 {
  background-color: lightsteelblue;
}
#div2 {
background-color:#FF00FF;
}

• Наконец-то это мой HTML код

  Иисус - Царь

  Он спасает души. Позвольте ему сегодня

Answer 1

Из того, что я могу сказать, вы просто хотите сохранить весь код внутри функции, чтобы ваша переменная выбора была локально ограничена этой функцией.

Решение

Другими словами, измените ваш Javascript к следующему:

function clickme() {
  let choice = confirm('do you accept Jesus');
  if (choice) {
    alert("you pressed ok");
  }
  else {
    alert("are you sure you want to cancel");
  }
}

Если это не то поведение, которое вы ищете, пожалуйста, обновите ваш вопрос тем, что вы хотите, чтобы произошло.

Answer 2

Вы должны позвонить и обработать confirm в обработчике событий. В вашем коде confirm загружается при загрузке документа и в обработчике, но результат не обрабатывается в обработчике.

Более того: обычно не очень хорошая идея использовать встроенные обработчики событий

document.querySelector(`button#clicker`).addEventListener(`click`, confirmMe);

function confirmMe(evt) {
  const result = document.querySelector(`div#result`);
  result.textContent = confirm('do you accept that dogs bark?') ? `Good for you` : `I understand`;
  //                   ^ returns a boolean, so use the answer to determine action
}

<button id="clicker">Acceptance</button>
<div id="result"></div>