JS: the text does not automatically color when I open the html file. Problem starting the function

Issue

I have problems with the javascript script to color the text. It works correctly, but the text only colors if you click on the panel and press the "space" button on the PC keyboard. If you press any other key (even Enter), the text does not color.

I would like the script to activate automatically as soon as I open the html file, so that the text is automatically colored as soon as I open the file.

In the html i tried using the function as both onchange and oninput. While in the js file i call the changeColor() function after creating it, with the aim of executing it automatically as soon as you open the file, but it doesn't work. Sorry for the problem, but i'm new. How can i solve it?

index.html

  <div id="editor" contenteditable="true" oninput="showPreview();" onchange="changeColor();">&lt;h1>This is a Heading&lt;/h1>
    &lt;p>This is a paragraph.&lt;/p>
  </div>
    
    <h3>PREVIEW</h3>
    <div class="preview-area">
      <iframe id="preview-window"></iframe>
    </div>

style.css

#editor {
  width: 400px;
  height: 100px;
  padding: 10px;
  background-color: #444;
  color: white;
  font-size: 14px;
  font-family: monospace;
  white-space: pre;
}
.statement {
  color: orange;
}

javascript.js

// CHANGE COLOR TEXT
function changeColor() {

var keywords = ["DIV", "DIV", "H1", "H1", "P", "P", "HELLO", "<", ">", "/"];
// Keyup event
document.querySelector("#editor").addEventListener("keyup", (e) => {
    // Space key pressed
    if (e.keyCode == 32) {
    var newHTML = "";
    // Loop through words
    str = e.target.innerText;
    (chunks = str
        .split(new RegExp(keywords.map((w) => `(${w})`).join("|"), "i"))
        .filter(Boolean)),
        (markup = chunks.reduce((acc, chunk) => {
        acc += keywords.includes(chunk.toUpperCase())
            ? `<span class="statement">${chunk}</span>`
            : `<span class='other'>${chunk}</span>`;
        return acc;
        }, ""));
    e.target.innerHTML = markup;

    // Set cursor postion to end of text
    //    document.querySelector('#editor').focus()
    var child = e.target.children;
    var range = document.createRange();
    var sel = window.getSelection();
    range.setStart(child[child.length - 1], 1);
    range.collapse(true);
    sel.removeAllRanges();
    sel.addRange(range);
    this.focus();
    }
})
}
    
changeColor()


//PREVIEW
function showPreview() {
    var editor = document.getElementById("editor").innerText;
  
    // var cssCode =
    //  "<style>" + document.getElementById("cssCode").value + "</style>";
    // var jsCode =
    //  "<scri" + "pt>" + document.getElementById("jsCode").value + "</scri" + "pt>";
    
    var frame = document.getElementById("preview-window").contentWindow.document;
    document.getElementById("preview-window").srcdoc = editor;
    frame.open();
    //frame.write(htmlCode + cssCode + jsCode);
    frame.write(editor);
    frame.close();
  }
  
  showPreview()

Solution

You could consider refactoring the coloring portion of changeColor() into another function, and call it immediately in the JavaScript for the initial load:

function applyColoring(element) {
  var keywords = ["DIV", "DIV", "H1", "H1", "P", "P", "HELLO", "<", ">", "/"];

  var newHTML = "";
  // Loop through words
  str = element.innerText;
  (chunks = str
    .split(new RegExp(keywords.map((w) => `(${w})`).join("|"), "i"))
    .filter(Boolean)),
    (markup = chunks.reduce((acc, chunk) => {
      acc += keywords.includes(chunk.toUpperCase())
        ? `<span class="statement">${chunk}</span>`
        : `<span class='other'>${chunk}</span>`;
      return acc;
    }, ""));
  element.innerHTML = markup;
}

// CHANGE COLOR TEXT
function changeColor() {
  // Keyup event
  document.querySelector("#editor").addEventListener("keyup", (e) => {
    // Space key pressed
    if (e.keyCode == 32) {
      applyColoring(e.target);

      // Set cursor postion to end of text
      //    document.querySelector('#editor').focus()
      var child = e.target.children;
      var range = document.createRange();
      var sel = window.getSelection();
      range.setStart(child[child.length - 1], 1);
      range.collapse(true);
      sel.removeAllRanges();
      sel.addRange(range);
      this.focus();
    }
  });
}

changeColor();
applyColoring(document.getElementById('editor'));

//PREVIEW
function showPreview() {
  var editor = document.getElementById("editor").innerText;

  // var cssCode =
  //  "<style>" + document.getElementById("cssCode").value + "</style>";
  // var jsCode =
  //  "<scri" + "pt>" + document.getElementById("jsCode").value + "</scri" + "pt>";

  var frame = document.getElementById("preview-window").contentWindow.document;
  document.getElementById("preview-window").srcdoc = editor;
  frame.open();
  //frame.write(htmlCode + cssCode + jsCode);
  frame.write(editor);
  frame.close();
}

showPreview();

#editor {
  width: 400px;
  height: 100px;
  padding: 10px;
  background-color: #444;
  color: white;
  font-size: 14px;
  font-family: monospace;
  white-space: pre;
}
.statement {
  color: orange;
}

<div
  id="editor"
  contenteditable="true"
  oninput="showPreview();"
  onchange="changeColor();"
>&lt;h1>This is a Heading&lt;/h1>
  &lt;p>This is a paragraph.&lt;/p></div>

<h3>PREVIEW</h3>
<div class="preview-area">
  <iframe id="preview-window"></iframe>
</div>

Answered By - Wongjn