Как сделать так, чтобы предупреждение возникало только после нажатия кнопок «Да» или «Нет» в диалоговом окне?

Question

Самия

javascript

Как сделать так, чтобы предупреждение возникало только после нажатия кнопок «Да» или «Нет» в диалоговом окне?

Как сделать так, чтобы alert("!") появлялся только после завершения выполнения функции Myconfirmselect()? Необходимо, чтобы alert не появлялся до тех пор, пока хотя бы одна кнопка в диалоговом окне не будет нажата. <br/> <br/> <pre><code class="html">&lt;html&gt;
&lt;body onload="Load()"&gt;
&lt;dialog&gt;&lt;/dialog&gt;
&lt;script&gt;
function Load()
{
 setTimeout(() =&gt; {
  Myconfirmselect(
  "Готовы?" + "¤" +
  "Да" + "¥" + "alert('Да');" + "º" +
  "Нет" + "¥" + "alert('Нет');"
  );
  alert("!");//срабатывает сразу, нужно исправить преждевременное всплытие
 }, 500);
}

function Myconfirmselect(VarInput)
{
  //setTimeout(() =&gt;
  //{
   document.querySelector("dialog").innerHTML += `
   &lt;div&gt;
    &lt;textarea&gt;&lt;/textarea&gt;
   &lt;/div&gt;
   `;
   document.querySelector("dialog").style.textAlign = "center";
   document.querySelector("dialog").querySelector("div").querySelector("textarea").style.width = "100%";
   document.querySelector("dialog").querySelector("div").querySelector("textarea").style.textAlign = "center";
   document.querySelector("dialog").querySelector("div").querySelector("textarea").style.resize = "none";
   document.querySelector("dialog").querySelector("div").querySelector("textarea").readOnly = true;
   document.querySelector("dialog").querySelector("div").querySelector("textarea").value = VarInput.split("¤")[0];
   for (var i = 0; i &lt; VarInput.split("¤")[1].split("º").length; i++)
   {
    var VarButton = document.createElement("button");
    VarButton.textContent = VarInput.split("¤")[1].split("º")[i].split("¥")[0];
    VarButton.id = VarInput.split("¤")[1].split("º")[i].split("¥")[1];
    VarButton.style.marginLeft = "10px";
    VarButton.style.marginTop = "10px";
    VarButto

12 ноября 2024 г. 10:53

Ответы на вопрос 2

Похожие вопросы

Answer 1

Чтобы сделать так, чтобы предупреждение `alert("!")` отображалось только после нажатия кнопок «Да» или «Нет» в диалоговом окне и не появлялось до нажатия одной из кнопок, вам нужно переместить вызов `alert("!")` в функции, которые обрабатывают нажатия на кнопки. Вот как вы можете модифицировать ваш код:

```html
<html>
<body onload="Load()">
<dialog></dialog>
<script>
function Load() {
 setTimeout(() => {
  Myconfirmselect(
  "Готовы?" + "¤" +
  "Да" + "¥" + "buttonYes();" + "º" +
  "Нет" + "¥" + "buttonNo();"
  );
 }, 500);
}

function Myconfirmselect(VarInput) {
   document.querySelector("dialog").innerHTML += `
   <div>
    <textarea></textarea>
   </div>
   `;
   document.querySelector("dialog").style.textAlign = "center";
   document.querySelector("dialog").querySelector("div").querySelector("textarea").style.width = "100%";
   document.querySelector("dialog").querySelector("div").querySelector("textarea").style.textAlign = "center";
   document.querySelector("dialog").querySelector("div").querySelector("textarea").style.resize = "none";
   document.querySelector("dialog").querySelector("div").querySelector("textarea").readOnly = true;
   document.querySelector("dialog").querySelector("div").querySelector("textarea").value = VarInput.split("¤")[0];

   for (var i = 0; i < VarInput.split("¤")[1].split("º").length; i++) {
    var VarButton = document.createElement("button");
    VarButton.textContent = VarInput.split("¤")[1].split("º")[i].split("¥")[0];
    VarButton.setAttribute("onclick", VarInput.split("¤")[1].split("º")[i].split("¥")[1]);
    VarButton.style.marginLeft = "10px";
    VarButton.style.marginTop = "10px";
    document.querySelector("dialog").appendChild(VarButton);
   }

   document.querySelector("dialog").showModal();
}

function buttonYes() {
  alert('Да');
  alert("!");
}

function buttonNo() {
  alert('Нет');
  alert("!");
}
</script>
</body>
</html>
```

### Изменения в коде:
1. Вызовы `alert('Да')` и `alert('Нет')` были перенесены в отдельные функции `buttonYes()` и `buttonNo()`.
2. В функции `Myconfirmselect` теперь кнопки создаются с атрибутом `onclick`, который вызывает соответствующие функции `buttonYes()` или `buttonNo()`.
3. После отображения сообщения «Да» или «Нет» вызывается `alert("!")`.

Теперь `alert("!")` будет показан только после нажатия одной из кнопок.

Answer 2

<pre><code class="javascript">&lt;html&gt;
    &lt;body onload="Load()"&gt;
        &lt;dialog&gt;&lt;/dialog&gt;
        &lt;script&gt;
            function Load() {
                setTimeout(() =&gt; {
                    // Создаём колбэк, функцию, которая будет вызываться только после нажатия на кнопку
                    const callback = function () {
                        alert("!");
                    };

                    Myconfirmselect(
                        "Готовы?" +
                            "¤" +
                            "Да" +
                            "¥" +
                            "alert('Да');" +
                            "º" +
                            "Нет" +
                            "¥" +
                            "alert('Нет');",
                        callback, // Передаём колбэк в функцию создания диалога
                    );
                }, 500);
            }

            function Myconfirmselect(VarInput, callback) {
                document.querySelector("dialog").innerHTML += `
   &lt;div&gt;
    &lt;textarea&gt;&lt;/textarea&gt;
   &lt;/div&gt;
   `;

                const dialog = document.querySelector("dialog");
                const textarea = dialog.querySelector("textarea");
                dialog.style.textAlign = "center";
                textarea.style.width = "100%";
                textarea.style.textAlign = "center";
                textarea.style.resize = "none";
                textarea.readOnly = true;
                textarea.value = VarInput.split("¤")[0];
                for (
                    let i = 0;
                    i &lt; VarInput.split("¤")[1].split("º").length;
                    i++
                ) {
                    const VarButton = document.createElement("button");
                    VarButton.textContent = VarInput.split("¤")[1]
                        .split("º")
                        [i].split("¥")[0];
                    VarButton.id = VarInput.split("¤")[1]
                        .split("º")
                        [i].split("¥")[1];
                    VarButton.style.marginLeft = "10px";
                    VarButton.style.marginTop = "10px";
                    VarButton.addEventListener("click", () =&gt; {
                        eval(event.target.id);
                        // Вызов того самого callback после нажатия на кнопку
                        callback();
                        //ButtonClosealert();
                    });
                    document
                        .querySelector("dialog")
                        .querySelector("div")
                        .appendChild(VarButton);
                }
                function ButtonClosealert() {
                    dialog.style.animation = "AnimFormHide 0.1s both";
                    setTimeout(() =&gt; {
                        dialog.style.textAlign = "initial";
                        const div = dialog.querySelector("div");
                        dialog.removeChild(div);
                        dialog.close();
                    }, 100);
                }
                dialog.style.animation = "AnimFormShow 0.25s both";
                dialog.showModal();
            }
        &lt;/script&gt;
        &lt;style&gt;
            @keyframes AnimFormShow {
                0% {
                    transform: translateY(-150%);
                }
            }

            @keyframes AnimFormHide {
                100% {
                    transform: translateY(-150%);
                    display: none;
                }
            }

            dialog,
            #DialogCycle {
                border: 2px solid black;
                border-radius: 15px;
            }

            dialog div,
            #DialogCycle div {
                position: initial;
            }

            dialog::backdrop,
            #DialogCycle::backdrop {
                background: rgba(0, 0, 0, 0.6);
            }
        &lt;/style&gt;
    &lt;/body&gt;
&lt;/html&gt;</code></pre>