1

この HTML スニペットは、オブジェクト プロトタイプを作成してインスタンス化し、イベントからそのオブジェクトのメソッドを使用しようとして失敗します。 

<body>
    <button type="button" onclick="TestLogic()">Test Logic</button>
    <script>
        function onOff() //Object prototype
        {
            this.state = false;

            function setState(newState) {
                this.state = newState;
            }
        }
        var inputOne = new onOff(); //Instantiate object prototype
        function TestLogic() //buttonClick Event Handler
        {
            inputOne.setState(true);
            // generates Uncaught Type Error undefined is not a function */
            document.inputOne.setState(true);
            // generates Uncaught Type Error Cannot read property setState of undefined 
        }
    </script>
</body>
4

4 に答える 4

0

の関数onOffはプライベートであり、パブリック プロパティとして公開されていません。に変更function setState(newState) { ... }しthis.setState = function(newState) { ... }ます。

于 2014-07-03T04:27:28.010 に答える
0

JavaScript コンテキストについて誤解しています。MDN には、それに関する良い記事があります。コメントを参照して、どこが間違っていたかを確認してください。

<body>
    <button type="button" onclick="TestLogic()">Test Logic</button>
    <script>
        function onOff() //Object prototype
        {
            this.state = false;

            //set method to context of creating Object
            this.setState = function (newState) {
                this.state = newState;
            }
        }
        var inputOne = new onOff(); //Instantiate object prototype
        function TestLogic() //buttonClick Event Handler
        {
            inputOne.setState(true);
            //document is not a scope, window is global scope
            window.inputOne.setState(true);
        }
    </script>
</body>
于 2014-07-03T04:27:49.510 に答える
0

プロトタイプを使用したい場合は、このようなプロトタイプを使用してください

function Object () {
    this.instanceMethod = false;
}
Object.prototype.prototypeMethod = function () {};

また、インラインイベントリスナーの使用を避け、代わりにこのようにする必要があります

document.querySelector('button').addEventListener('click', function () {
// logic
});

そして、これをすべて一緒に使用した例を次に示します ( http://jsfiddle.net/sAH35/ )

<body>
    <button type="button">Test Logic 1</button>
    <button type="button">Test Logic 2</button>
    <button type="button">Test Logic 3</button>
    <script>
        //Object prototype
        function OnOff(element) {
            this.element = element;
            this.state = false;
        }
        OnOff.prototype.setState = function (newState) {
            this.state = newState;

            if (this.state) {
                this.element.style.backgroundColor = 'red';
            } else {
                this.element.style.backgroundColor = 'grey';
            }
        };

        // bind to elements
        var elements = document.querySelectorAll('button');
        for (var i = 0; i < elements.length; i++) {
            elements[i].addEventListener('click', function () {
                if (!this.onOff) this.onOff = new OnOff(this);
                this.onOff.setState(!this.onOff.state);
            });
        }
    </script>
</body>
于 2014-07-03T04:42:37.420 に答える
0

これを試して

<html>
 <body>
<button type="button" onclick="TestLogic()">Test Logic</button>
<script>
    function onOff() //Object prototype
    {
        this.state = false;

         this.setState=function(newState) 
         {
            this.state = newState;
            console.log(this.state);
         }
    }
    var inputOne = new onOff();
    function TestLogic()
    {
        inputOne.setState(true);
    }
</script>
</body>
</html>
于 2014-07-03T04:29:47.310 に答える