ReferenceError: myFunction () не определена - PullRequest
Новая
       2

ReferenceError: myFunction () не определена

2 голосов
/ 13 июня 2019

Я получил эту ошибку во время работы. Я не знаю, почему это показывает, что 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>

Пожалуйста, кто-нибудь может помочь мне найти проблему здесь? После нажатия на кнопку он должен придать некоторый цвет коду.

1 Ответ

3 голосов
/ 13 июня 2019

Ваш обработчик событий в стиле onclick -attribute ожидает найти глобал с именем myFunction, но при использовании выражения с именованной функцией, например: 

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

имя функции не добавляется в область, в которой появляется это выражение (кроме старых сломанных версий IE) .

Функция объявлений добавить в область видимости, чтобы вы могли использовать объявление и присваивание: 

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

Я бы настоятельно рекомендовал отказаться от обработчиков событий в стиле onxyz, хотя бы потому, что они требуют глобальных функций, а глобальное пространство имен уже переполнено и подвержено конфликтам. Вместо этого оберните ваш код в ограничивающую конструкцию (IIFE, модуль и т. Д.) И используйте современную обработку событий (addEventListener и т. Д.). Обратите внимание, что если вы ищете элемент по id на странице JSF, идентификатор на стороне клиента будет , а не * id, который вы даете элементу (по умолчанию), полное объяснение в ответы на этот вопрос . (Спасибо Kukeltje за то, что указали на это в комментариях к ФП.)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...