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 id="resMessage"></p>
    <div id="generalSettings" class="main-menu-content">
      <% if (showData.prefix) { %>
        <%
        function savePrefix() {
          try {
            configData({
              'prefix': document.getElementById('resMessage') <=== this is not defined
            });
            %>
            <script type="text/javascript">
              var resMessage = document.getElementById("resMessage")
              resMessage.style.backgroundColor = 'green';
              resMessage.innerHTML = "Success!"
            </script>
            <%
          } catch (err) {
            if (err) {
              %>
              <script type="text/javascript">
                var resMessage = document.getElementById("resMessage")
                resMessage.style.backgroundColor = 'red';
                resMessage.innerHTML = `Error: ${err.toString()}`
              </script>
              <%
              console.log(err)
            };
          };
        };
        %>
        <input type="text" id="prefix" value=<%= showData.prefix %> maxlength="6"><input type="submit" onclick=<%= savePrefix() %>>
      <% } %>
    </div>

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 id="resMessage"></p>
    <div id="generalSettings" class="main-menu-content">
      <% if (showData.prefix) { %>
        <%
        function savePrefix() {
          try {
            configData({
              'prefix': document.getElementById('resMessage') <=== this is not defined
            });
            %>
            <script type="text/javascript">
              var resMessage = document.getElementById("resMessage")
              resMessage.style.backgroundColor = 'green';
              resMessage.innerHTML = "Success!"
            </script>
            <%
          } catch (err) {
            if (err) {
              %>
              <script type="text/javascript">
                var resMessage = document.getElementById("resMessage")
                resMessage.style.backgroundColor = 'red';
                resMessage.innerHTML = `Error: ${err.toString()}`
              </script>
              <%
              console.log(err)
            };
          };
        };
        %>
        <input type="text" id="prefix" value=<%= showData.prefix %> maxlength="6"><input type="submit" onclick=<%= savePrefix() %>>
      <% } %>
    </div>

• javascript
• html
• dom
• ejs

• I edited it, that works but still, document is undefined and I don't know how I'm supposed to get the prefix from the input without using document – Felix Isaac Commented Mar 9, 2019 at 6:55
• Jane's answer appears likely, because it's the open <% and close %> tags, which control where the template code starts and ends. – Martin Zeitler Commented Mar 9, 2019 at 20:35

1 Answer 1

ejs is a template language, which means it only controls how the page is rendered, and does nothing to change what happens to the page on the client's browser after it has loaded.

Changing your code to this should fix the problem:

<p id="resMessage"></p>
<div id="generalSettings" class="main-menu-content">
   <% if (showData.prefix) { %>
   <script type="text/javascript">
      function savePrefix() {
        try {
          configData({
            'prefix': document.getElementById('resMessage') 
          });
        var resMessage = document.getElementById("resMessage")
        resMessage.style.backgroundColor = 'green';
        resMessage.innerHTML = "Success!"
      } catch (err) {
          var resMessage = document.getElementById("resMessage")
          resMessage.style.backgroundColor = 'red';
          resMessage.innerHTML = `Error: ${err.toString()}`
        console.log(err);
      }
      }
   </script>
   <input type="text" id="prefix" value="<%= showData.prefix %>" maxlength="6"><input type="submit" onclick="<%= savePrefix() %>">
   <% } %>
</div>