Question

我已经搜索了这个问题，其他所有问题都没有类似的设置。基本上，我正在学习一个教程，并希望创建一个自定义弹出窗口，询问用户是否要执行操作。该弹出窗口具有“是”和“否”按钮。我的问题是，当单击两个按钮中的任何一个时，什么都没有发生。这是我的代码，我正在使用方括号。

    /*global alert, prompt, window, document*/
    "use strict";
    function play() {
        //text adventure game here
    }
    function CustomConfirm(){
        this.render = function() {
            var winW = window.innerWidth;
            var winH = window.innerHeight;
            var dialogoverlay = document.getElementById('dialogoverlay');
            var dialogbox = document.getElementById('dialogbox');
            dialogoverlay.style.display = "block";
            dialogoverlay.style.height = winH+"px";
            dialogbox.style.left = (winW/2) - (550 * .5) + "px";
            dialogbox.style.top = "100px";
            dialogbox.style.display = "block";
            
            document.getElementById('dialogboxhead').innerHTML = "Are you sure?";
            document.getElementById('dialogboxbody').innerHTML = "Select Yes or No...";
            document.getElementById('dialogboxfoot').innerHTML = '<button onclick="Dialog.yes()">Yes</button> <button onclick="Dialog.no()">No</button>';
        }
        this.yes = function() {
            document.getElementById('dialogbox').style.display = "none";
            document.getElementById('dialogoverlay').style.display = "none";
    
            play();
        }
        this.no = function() {
            document.getElementById('dialogbox').style.display = "none";
            document.getElementById('dialogoverlay').style.display = "none";
            alert("Goodbye!");
        }
    }
    var Confirm = new CustomConfirm();
    //play();

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>JavaScript!</title>
            <link href="styles/dialog.css" type="text/css" rel="stylesheet">
            <script src="scripts/dialog.js" type="text/javascript"></script>
    
        </head>
        <body>
            <h1>Zombie Apocalypse!</h1>
            <p>Directions for text adventure game here</p>

            <div id="dialogoverlay"></div>
            <div id="dialogbox">
                <div>
                    <div id="dialogboxhead"></div>
                    <div id="dialogboxbody"></div>
                    <div id="dialogboxfoot"></div>
                </div>
            </div>
            <button onclick="Confirm.render()">Play Again?</button>
        </body>
    </html>

任何帮助将不胜感激。

Answer 1

您没有名为Dialog的变量。我在调用For i = 0 To 2时删除了onclick，并将其更改为点击处理程序。

Confirm

/*global alert, prompt, window, document*/
    "use strict";
    function play() {
        //text adventure game here
    }
    function CustomConfirm(){
        this.render = function() {
            var winW = window.innerWidth;
            var winH = window.innerHeight;
            var dialogoverlay = document.getElementById('dialogoverlay');
            var dialogbox = document.getElementById('dialogbox');
            dialogoverlay.style.display = "block";
            dialogoverlay.style.height = winH+"px";
            dialogbox.style.left = (winW/2) - (550 * .5) + "px";
            dialogbox.style.top = "100px";
            dialogbox.style.display = "block";
            
            document.getElementById('dialogboxhead').innerHTML = "Are you sure?";
            document.getElementById('dialogboxbody').innerHTML = "Select Yes or No...";
            document.getElementById('dialogboxfoot').innerHTML = '<button id="confirm-yes">Yes</button> <button id="confirm-no">No</button>';
            
            document.getElementById("confirm-yes").addEventListener("click",function(){
               Confirm.yes();
            });
    
           document.getElementById("confirm-no").addEventListener("click",function(){
             Confirm.no();
           });
        }
        this.yes = function() {
            document.getElementById('dialogbox').style.display = "none";
            document.getElementById('dialogoverlay').style.display = "none";
    
            play();
        }
        this.no = function() {
            document.getElementById('dialogbox').style.display = "none";
            document.getElementById('dialogoverlay').style.display = "none";
            alert("Goodbye!");
        }
    }
    var Confirm = new CustomConfirm();
    //play();

Answer 2

按钮具有以下代码：

<button onclick="Dialog.yes()">Yes</button> <button onclick="Dialog.no()">No</button>

但是没有定义对话框实例。如果您使用

更改行

<button onclick="alert()">Yes</button> <button onclick="alert()">No</button>

然后，当您单击按钮时，您的代码可能会显示警报。

Javascript中的OnClick事件未生效

2 个答案: