javascript - 如何在EJS中使用DOM功能

Question

我正在尝试在网页中创建一个函数，当用户按下“提交”按钮时，它会进入 EJS 函数，但我需要 DOM 函数来更改元素，但文档未在 EJS 中定义我该怎么办.

<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>

Answer 1

ejs 是一种模板语言，这意味着它只控制如何呈现页面，而不会改变呈现后客户端浏览器上的页面发生的情况已加载。

将您的代码更改为这样应该可以解决问题:

<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>