Javascript 无法从事件处理程序访问js对象方法_Javascript_Html_Object_Eventhandler

Javascript 无法从事件处理程序访问js对象方法

javascript html object

Javascript 无法从事件处理程序访问js对象方法,javascript,html,object,eventhandler,Javascript,Html,Object,Eventhandler,这个HTML片段创建一个对象原型，实例化它，然后尝试从事件中使用该对象的方法，但未成功 <body> <button type="button" onclick="TestLogic()">Test Logic</button> <script> function onOff() //Object prototype { this.state = false;

这个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>

onOff中的函数是私有的，它不是作为公共属性发布的。将函数setStatenewState{…}更改为this.setState=functionnewState{…}。

您对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>

试试这个

<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>

如果你想使用原型，那么就使用这样的原型

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

另外，您应该避免使用内联事件侦听器，而是这样做

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

这里有一个例子，所有这些都一起使用

document.inputOne应该只是inputOne，函数setState应该是this.setState=函数setstatetstate是onOff的本地值。你永远不会让外界呼叫你。inputOne也不是文档对象的属性。我建议阅读，以更好地了解JavaScript及其在浏览器中的工作原理。由于OP似乎是初学者，解释他们的代码有什么问题以及您的解决方案如何/为什么解决这些问题对他们来说非常有价值。因为OP似乎是初学者，解释他们的代码出了什么问题，以及您的解决方案解决问题的方式/原因对他们来说非常有价值。

<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>