0

I have got this error while running. I don't know why is it showing that the document.getElementById(...) is null. Is there any problem with the way it is referenced. I have read a lot and still can not look for a solution. Any small help would also be acknowledged. Thanks.

This is my code here so far.

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: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 id="formId">
                <p:inputTextarea  rows="15" cols="80" id="text1"></p:inputTextarea>
                <br/>
                <h:commandButton  type="button" value = "submit" action="indentation" onclick="myFunction()"></h: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}
            };

            function myFunction() {
                let indent = 0;
                document.getElementById('formId:demo').innerHTML = document.getElementById('formId: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/>");
            }
            window.onload = myFunction;
        </script>

</html>

Please, can anyone help me find the problem here? After pressing the button, it should provide some color to the code.

Sonney
  • 55
  • 6
  • 1
    `document.getElementById('formId:demo')` - but there is no `id="formId:demo"` in the page at all. – VLAZ Jun 18 '19 at 08:11
  • I have used it here. – Sonney Jun 18 '19 at 08:13
  • 2
    That's `demo`, not `formId:demo` – VLAZ Jun 18 '19 at 08:14
  • 1
    `
    ` is a plain HTML element and rendered as is, it's not part a JSF namespace. JSF will render `id="demo"` for it. `` is an element from JSF UI related namespace and will be rendered with ` id="fromId:text1"`     – Selaron Jun 18 '19 at 08:37
  • @Selaron yes true. Then I tried But then , the output is not as desired. Again the script tag is not working properly. What can be used instead of div tag in JSF? – Sonney Jun 18 '19 at 09:02

1 Answers1

0

You need to get the child of the element - so use querySelector.

document.querySelector("#formId #demo")
Jack Bashford
  • 38,499
  • 10
  • 36
  • 67
  • So you say instead of this document.getElementById('formId:demo').innerHTML I should write document.querySelector('#formId #demo').innerHTML ??? – Sonney Jun 18 '19 at 08:15
  • 1
    @Sonney you could, or you could do `getElementById('demo')`. You should have a single ID in the page. – VLAZ Jun 18 '19 at 08:17
  • @VLAZ Earlier it was the way you are saying. But it was still giving the same error. I learned this formId:demo from this link https://stackoverflow.com/questions/6045307/how-can-i-know-the-id-of-a-jsf-component-so-i-can-use-in-javascript After that, I made the change. Anyhow after what you are saying, the error still remains the same. – Sonney Jun 18 '19 at 08:19
  • In that case JSF generates something I didn't expect. It might be something you didn't, either - check the output HTML to see if the ID is really `formId:demo` – VLAZ Jun 18 '19 at 08:24