title: How to use DOM function in EJS
body: <p>I'm trying to make a function in a webpage when a user press the 'submit' button it goes into an EJS function but I need the DOM function to change elements but the document is not defined in EJS what can I do.</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;p id="resMessage"&gt;&lt;/p&gt;
      &lt;div id="generalSettings" class="main-menu-content"&gt;
        &lt;% if (showData.prefix) { %&gt;
          &lt;%
          function savePrefix() {
            try {
              configData({
                'prefix': document.getElementById('resMessage') &lt;=== this is not defined
              });
              %&gt;
              &lt;script type="text/javascript"&gt;
                var resMessage = document.getElementById("resMessage")
                resMessage.style.backgroundColor = 'green';
                resMessage.innerHTML = "Success!"
              &lt;/script&gt;
              &lt;%
            } catch (err) {
              if (err) {
                %&gt;
                &lt;script type="text/javascript"&gt;
                  var resMessage = document.getElementById("resMessage")
                  resMessage.style.backgroundColor = 'red';
                  resMessage.innerHTML = `Error: ${err.toString()}`
                &lt;/script&gt;
                &lt;%
                console.log(err)
              };
            };
          };
          %&gt;
          &lt;input type="text" id="prefix" value=&lt;%= showData.prefix %&gt; maxlength="6"&gt;&lt;input type="submit" onclick=&lt;%= savePrefix() %&gt;&gt;
        &lt;% } %&gt;
      &lt;/div&gt;
  </code></pre>