Question

我在运行时遇到此错误。我不知道为什么它显示myFunction（）未定义。单击按钮时，该函数的加载方式是否有问题。

到目前为止，这是我的代码。

indentation.xhtml

  <?xml version='1.0' encoding='UTF-8' ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns = "http://www.w3.org/1999/xhtml"   
          xmlns:h = "http://java.sun.com/jsf/html"
          xmlns:f = "http://java.sun.com/jsf/core"
          xmlns:p="http://primefaces.org/ui">


        <h:head>
            <style type="text/css">
                .code-str     { color: #080;}  
                .code-elem    { color: #f00;}  
                .code-comment { color: #00f;}
            </style>
        </h:head>


        <h:body>

            <h:form>
                <p:inputTextarea  rows="15" cols="80" id="text1"></p:inputTextarea>
                <br/>
                <p:commandButton  type="button" value = "submit" action="indentation" onclick="myFunction()"></p:commandButton>

                <div id="demo"></div>
            </h:form>
        </h:body>


        <script type="text/javascript">
            const keywords = {
                IF: {style: "code-elem", indent: 4},
                ENDIF: {style: "code-elem", indent: -4},
                IFLISTING: {style: "code-str", indent: 4},
                ENDIFLISTING: {style: "code-str", indent: -4},
                VAR: {style: "code-comment", indent: 0},
                LISTING: {style: "code-comment", indent: 0}
            };

            window.onload = function myFunction() {
                let indent = 0;
                document.getElementById("demo").innerHTML = document.getElementById("text1").value.split(/[\r\n]+/).map(line => {
                    const oldIndent = indent;
                    line = line.trim().replace(/###([A-Z]+)(.*?)###/g, (m, keyword, arg) => {
                        const param = keywords[keyword];
                        if (!param)
                            return m;
                        indent += param.indent;
                        return `<span class="${param.style}">${m}</span>`;
                    });
                    return "&nbsp;".repeat(Math.min(indent, oldIndent)) + line;
                }).join("<br/>");
            }
        </script>
</html>

请，有人可以帮我在这里找到问题吗？按下按钮后，它应该为代码提供一些颜色。

Answer 1

您的onclick属性型事件处理程序希望找到一个名称为myFunction的全局变量，但是当您使用这样的命名函数表达式时：

window.onload = function myFunction() {
    // ...
};

该函数名称不会添加到该表达式出现的范围（旧版本的IE中除外）。

函数声明添加到作用域，因此您可以使用声明和赋值：

function myFunction() {
    // ...
}
window.onload = myFunction;

我强烈建议您放弃使用onxyz属性类型的事件处理程序，尤其是因为它们需要全局函数，并且全局名称空间已经人满为患并且充满冲突。而是将代码包装在作用域构造（IIFE，模块等）中，并使用现代事件处理（addEventListener等）。请注意，如果您在JSF页面中通过id查找元素，则客户端ID为不是您为元素提供的id（默认情况下）， this question's answers中的完整说明。（谢谢Kukeltje，请您在评论中指出OP。）

ReferenceError：未定义myFunction（）

1 个答案: