如何從位於同一文件中的 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

我希望得到以下 output：

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>