如何从位于同一文件中的 JS 脚本更新 EJS 中的变量?
How to update a variable in EJS from the JS script located in the same file?
如标题所述,我在 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 标签中的变量?
您可以使用 HTML data attribute.
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>
如标题所述,我在 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 标签中的变量?
您可以使用 HTML data attribute.
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>