title: Javascript can not fetch correct id on clicking button in jsf
body: <p>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. </p>
  
  <p>This is my code here so far.</p>
  
  <blockquote>
    <p>indentation.xhtml</p>
  </blockquote>
  
  <pre><code>&lt;?xml version='1.0' encoding='UTF-8' ?&gt;
  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns = "http://www.w3.org/1999/xhtml"   
        xmlns:h = "http://java.sun.com/jsf/html"
        xmlns:p="http://primefaces.org/ui"&gt;
  
  
      &lt;h:head&gt;
          &lt;style type="text/css"&gt;
              .code-str     { color: #080;}  
              .code-elem    { color: #f00;}  
              .code-comment { color: #00f;}
          &lt;/style&gt;
      &lt;/h:head&gt;
  
  
      &lt;h:body&gt;
  
              &lt;h:form id="formId"&gt;
                  &lt;p:inputTextarea  rows="15" cols="80" id="text1"&gt;&lt;/p:inputTextarea&gt;
                  &lt;br/&gt;
                  &lt;h:commandButton  type="button" value = "submit" action="indentation" onclick="myFunction()"&gt;&lt;/h:commandButton&gt;
  
                  &lt;div id="demo"&gt;&lt;/div&gt;
              &lt;/h:form&gt;
          &lt;/h:body&gt;
  
  
          &lt;script type="text/javascript"&gt;
              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 =&gt; {
                      const oldIndent = indent;
                      line = line.trim().replace(/###([A-Z]+)(.*?)###/g, (m, keyword, arg) =&gt; {
                          const param = keywords[keyword];
                          if (!param)
                              return m;
                          indent += param.indent;
                          return `&lt;span class="${param.style}"&gt;${m}&lt;/span&gt;`;
                      });
                      return "&amp;nbsp;".repeat(Math.min(indent, oldIndent)) + line;
                  }).join("&lt;br/&gt;");
              }
              window.onload = myFunction;
          &lt;/script&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>Please, can anyone help me find the problem here? After pressing the button, it should provide some color to the code.</p>