如何从位于同一文件中的 JS 脚本更新 EJS 中的变量？

Question

如标题中所述，我在 ejs 部分的 scriplet 标签中有这个变量“i”：

<span class="UTXOindex"><% var i = 0 %></span>
<div class="test"></div>

并且我在同一文件的 JS 脚本部分中有以下内容，希望能够增加上述变量：

<script>
      document.getElementById("nextButton").addEventListener("click", e => {
        e.preventDefault()
        document.querySelector(".test").insertAdjacentHTML(
          "afterbegin",
          `
          <p>The number was <%= i %></p>
          <% i++ %>
          <p>The number is now <%= i %></p>
        `
        )
      })
</script>

我是尝试从 JS 脚本部分更新 ejs 部分中的变量“i”，但多次触发事件侦听器后似乎没有更新。触发 .addEventListener 几次将如下所示：

The number was 0

The number is now 1

The number was 0

The number is now 1

The number was 0

The number is now 1

我希望得到以下输出：

The number was 0

The number is now 1

The number was 1

The number is now 2

The number was 2

The number is now 3

等等......

有什么建议吗？以及如何永久更新 EJS scriplet 标签中的变量？

Answer 1

您可以使用 HTML 数据属性。

 document.getElementById("nextButton").addEventListener("click", e => {
          e.preventDefault()
          var i = Number(document.getElementById("increment").getAttribute("data-increment")) 
          document.querySelector(".test").insertAdjacentHTML(
            "afterbegin",
            `
            <p>The number was ${i}</p>
            <p>The number is now ${i+1}</p>
          `
          )
          document.getElementById("increment").setAttribute("data-increment", i+1);
        })

<button id="nextButton">Click</button>
<span class="UTXOindex" data-increment="0" id="increment"></span>
<div class="test"></div>

您还可以像这样分配值：

 <span class="UTXOindex" data-increment="<%= anyValue %>" id="increment"></span>