Question

如何从html中调用javascript类中的方法？

我找不到使用javascript从html生成的代码调用类方法的解决方案。

我写了一个小例子以便更好地理解。

<head>
    <script>
        function MyClass() {
            var self = this;

            this.init = function() {
            document.getElementById('list').innerHTML = this.mainTemplate();
            };

            this.mainTemplate = function () {
                return '<button id="start" class="btn btn-danger btn-lg" onclick="onStart()" type="button"> value </button>';
            };

            this.onStart = function onStart() {
                alert('bingo');
            };
        }
    </script>
</head>
<body>
    <div id ="list"> </div>
        <script>
            var a = new MyClass();
                a.init();
                //a.onStart();
        </script>
</body>

我已经尝试了所有想到的东西，比如......

在onStart（）
self.onStart（）
this.onStart（）
MyClass.onStart（）
MyClass.prototype.onStart（）
a.onStart
MyClass.onStart

Answer 1

onclick="onStart()"未引用a.onStart()，但this onStart()为window.onStart()，如果存在，则a.onStart不是.addEventListener()。

您可以将onclick替换为#start元素附加到init()元素的click元素，将#start事件添加到document元素之后该元素已附加到<head> <script> function MyClass() { var self = this; this.init = function() { document.getElementById('list').innerHTML = this.mainTemplate(); // attach `click` event to `#start` here, // set `this.onStart` as `click` handler function reference document.getElementById("start").addEventListener("click", this.onStart) // or `self.onStart` }; this.mainTemplate = function() { return '<button id="start" class="btn btn-danger btn-lg" ' + 'type="button"> value </button>'; }; this.onStart = function onStart() { alert('bingo'); }; } </script> </head> <body> <div id="list"></div> <script> var a = new MyClass(); a.init(); </script> </body>。

public static boolean isValid(String s){

        HashMap<Character, Character> specialChar= new HashMap<>();
        specialChar.put('{', '}');
        specialChar.put('[',']');
        specialChar.put('(',')');
        Stack<Character> stk = new Stack<>();
        for (int i=0; i<s.length(); i++){

            if (specialChar.keySet().contains(s.charAt(i))){
                stk.push(s.charAt(i));
            }
            else if (specialChar.values().contains(s.charAt(i))){
                if (!stk.empty() && stk.peek()==s.charAt(i)) {
                    stk.pop();
                }
                else return false;
            }

        }

        return stk.isEmpty();

    }

Answer 2

您可以非常轻松地绑定到<?php require 'PHPMailerAutoload.php'; $mail = new PHPMailer; $mail->isSMTP(); $mail->Host = 'dallas137.arvixeshared.com'; $mail->SMTPAuth = true; $mail->Username = 'ask@pocketrabbi.com'; $mail->Password = '~~~~~~'; $mail->SMTPSecure = 'tls'; $mail->Port = 465; $mail->setFrom('ask@pocketrabbi.com', 'Questions'); $mail->addAddress('pocketrabbi@gmail.com', 'PocketRabbi'); $mail->addReplyTo('ask@pocketrabbi.com', 'Questions'); $mail->isHTML(true); $mail->Subject = 'New Question'; $mail->Body = 'Email: ' . $_POST["email"] . '/n Question: ' . $_POST["question"]; if(!$mail->send()) { echo 'Message could not be sent.'; echo 'Mailer Error: ' . $mail->ErrorInfo; } else { header( 'Location: http://www.pocketrabbi.com/thankyou.html' ) ; } ?>标记的加载事件：

body

它将等到所有HTML加载到<body onload="a.onStart()">标记中，但它不会等待其他文件，如图像等。

首先必须准备要使用的对象，因此将脚本标记从底部移到body

然而，我认为我有点不理会。您似乎希望在单击按钮时触发事件，而不是在页面加载时触发。

在这种情况下，如果您创建一个元素并将其附加到现有元素而不是创建字符串并替换现有元素的html内容，则以后管理会更容易：

head

http://codepen.io/t3hpwninat0r/pen/ONQQBP

此方法允许类的多个实例具有自己的按钮。

Answer 3

更改行：

            this.onStart = function onStart() {

只是说：

        this.onStart = function() {

然后用a.onStart（）调用它，它会工作。

从HTML调用类方法

3 个答案: