Question

所以，我试图将游戏改为Candybox。我创建了一个按钮，它获取onclick属性来调用函数。

if (AnzahlTP === 10)
                    {
                        var para = document.createElement("button");
                        var node = document.createTextNode("Treuepunkte verschenken");
                        para.appendChild(node);

                        var element = document.getElementById("haupt-div");
                        element.appendChild(para);

                        var b1 = document.getElementsByTagName("button")[1]; //gibt dem Knopf eine Funktion
                        var att = document.createAttribute("onclick");

                        att.value = "TPVerschenken()";
                        b1.setAttributeNode(att);
                    }

Button应调用此函数，该函数会将内容打印到顶部的p-Tag中。

function TPVerschenken()
        {
            AnzahlTPV = AnzahlTPV + AnzahlTP;
            document.getElementById("TPVDisplay").innerHTML = "Verschenkte Treuepunkte: " + AnzahlVTP;
            AnzahlTP = 0;
        }

但是如果按下该按钮，则该功能不起作用，或者不被调用。我检查了onclick属性是否给了按钮。

这里是整个代码，如果需要的话。

<!DOCTYPE html>
<html lang="de">
<head>
    <link rel="stylesheet" type="text/css" href="spiel.css"/>
    <meta charset="UTF-8">
    <title>Test, I guess...</title>
</head>
<body id="body">
    <div id="nav">

    </div>

    <div id="haupt-div">
        <p id="TPDisplay"></p>
        <p id="TPVDisplay"></p>
        <button id="Knopf" onclick="TPSammelnKnopf()">
            Anfangen Treuepunkte zu sammeln
        </button>
        <script>
            var TPSammeln = false; //Deklaration von Variablen am Anfang
            var AnzahlTP = 0;
            var AnzahlTPV = 0;

            function TPSammelnKnopf()
            {
                if (!TPSammeln)
                {
                    AnzahlTP++;
                    document.getElementById("TPDisplay").innerHTML = "Treuepunkte: " + AnzahlTP; //Damit dort direkt Text steht und er nicht erst erscheinen muss.

                    setInterval(function()
                    {
                        AnzahlTP++;
                        document.getElementById("TPDisplay").innerHTML = "Treuepunkte: " + AnzahlTP;

                        if (AnzahlTP === 10)
                        {
                            var para = document.createElement("button");
                            var node = document.createTextNode("Treuepunkte verschenken");
                            para.appendChild(node);

                            var element = document.getElementById("haupt-div");
                            element.appendChild(para);

                            var b1 = document.getElementsByTagName("button")[1]; //gibt dem Knopf eine Funktion
                            var att = document.createAttribute("onclick");

                            att.value = "TPVerschenken()";
                            b1.setAttributeNode(att);
                        }

                        if (AnzahlTP === 80)
                        {
                            var para = document.createElement("button");
                            var node = document.createTextNode("Shop freischalten");
                            para.appendChild(node);

                            var element = document.getElementById("haupt-div");
                            element.appendChild(para);

                            var b2 = document.getElementsByTagName("button")[2]; //gibt dem Knopf eine Funktion
                            var att = document.createAttribute("onclick");

                            att.value = "Shop()";
                            b2.setAttributeNode(att);
                        }

                    }, 1000);
                    TPSammeln = true;

                    var parent = document.getElementById("haupt-div");
                    var child = document.getElementById("Knopf");
                    parent.removeChild(child);
                }
            }

            function TPVerschenken()
            {
                AnzahlTPV = AnzahlTPV + AnzahlTP;
                document.getElementById("TPVDisplay").innerHTML = "Verschenkte Treuepunkte: " + AnzahlVTP;
                AnzahlTP = 0;
            }

            function Shop()
            {

            }
        </script>
    </div>
</body>
</html>

Answer 1

要为您从javascript代码创建的按钮设置onclick事件，您应该这样做：

para.onclick = (function () {
    return function () {
        TPVerschenken();
    };
})();

或者更简单，您可以使用：

para.addEventListener("click", TPVerschenken);

有关完整测试的代码，请查看JsFiddle。

按钮不调用功能

1 个答案: