ReferenceError: myFunction() 未定义答案

【问题标题】：ReferenceError: myFunction() is not definedReferenceError: myFunction() 未定义
【发布时间】：2019-10-27 23:22:27
【问题描述】：

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

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

缩进.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>

请问，谁能帮我找到这里的问题？按下按钮后，它应该为代码提供一些颜色。

【问题讨论】：

我已回滚您的编辑，将答案折叠到问题中。这不是我们在 SO 上做事的方式。问题仍然是一个问题，而答案则回答了它。问题不应成为移动目标。
好的。谢谢。 :)

标签： javascript html jsf

【解决方案1】：

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

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

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

函数声明添加到作用域，所以你可以使用声明和赋值：

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

我强烈建议不要使用onxyz-attribute 样式的事件处理程序，尤其是因为它们需要全局函数，并且全局命名空间已经人满为患并且充斥着冲突。相反，将您的代码包装在一个作用域构造（IIFE、模块等）中并使用现代事件处理（addEventListener 等）。请注意，如果您在 JSF 页面中通过 id 查找元素，则客户端 ID 不是您提供该元素的 id（默认情况下），完整说明在 @ 987654321@。（感谢 Kukeltje 向 cmets 中的 OP 指出这一点。）

【讨论】：

非常感谢。我已经进行了您所说的更改，但是现在它显示了另一个错误。类型错误：document.getElementById(...) 为空。我该怎么办？
@Sonney - 见stackoverflow.com/questions/14028959/…
非常感谢您提供此链接。它消除了我的一些疑惑。但是由于我对此很陌生，并且对javascript不太了解。你能帮我告诉我如何在这段代码中使用 addEventListener。
错误在document.getElementByID("text1")上见stackoverflow.com/questions/6045307/…
实际上你有一个新问题。接受这个答案并使用minimal reproducible example创建一个新问题