javascript - 有没有一种方法可以在ejs中的函数内添加算术运算符？

我正在使用ejs创建带有预订表单的快速应用程序，并在其中添加功能。它用作付款。

我有一个select tag并将它的selected text存储在变量中。控制台记录该值会给出该值，但在实际代码中使用它会产生一个错误，指出该值未定义。

我需要的是获取所选输入的值，例如2并将其乘以tour.price数量，例如34000，这样总计将是68000并将其放入addCommas（） Amount: $ <%= addCommas(34000 * 2) %>。

我尝试使用ejs的Scriptlet标签，并将此代码放在文件顶部

<%let selectedText = document.querySelector("#numOfPersons")%>
<%let valueOfSelected = selectedText.options[selectedText.selectedIndex].value %>
<form>
     <div>
        <label for="numOfPersons">Number of Persons</label>
        <select id="numOfPersons">
          <option>2</option>
          <option>3</option>
          <option>4</option>
          <option>5</option>
          <option>6</option>
        </select>
      </div>

     Amount: $  <%= addCommas(tour.price * valueOfSelected) %> //addCommas() is a function that takes a number and adds comma every three numbers, ex: 100000 will become 100,000.
// tour.price is the total amount of the product. It's a Number. it's current value is 34000
</form>

它说valueOfSelected没有定义。
我的第二次尝试是添加
//the total should be 68000 then the function addCommas() which would make it 68,000
<%let selectedText = document.querySelector("#numOfPersons")%>在表单标签下面，但它也表示未定义。

然后我尝试在文件下面添加脚本标签
<%let valueOfSelected = selectedText.options[selectedText.selectedIndex].value %>

然后进行最后的尝试。
<script>let selectedText = document.querySelector("#numOfPersons");let valueOfSelected =selectedText.options[selectedText.selectedIndex].value;</script>

全部都出现未定义

调用 let totalAmount = tour.price * Number(valueOfSelected); document.querySelector("#total").innerHTML = "Amount: $ <%= addCommas(totalAmount) %>"时，预期结果的总价为$ 68,000。

附言由于某些原因，我无法使用4个空格创建另一个代码块。

最佳答案

诸如获取选定文本之类的任何DOM操作都不能直接写入ejs文件中。与第二种方法一样，您必须在脚本标签（即使用js）中执行此操作。

在脚本内部，尝试在加载文档后获取值：

<script>
function addCommas() { // implement the function here }
document.addEventListener("DOMContentLoaded", function(event) {
  // get values here like the `valueOfSelected`
  var tourPrice = "<%= tour.price %>";

  var valueWithCommasAdded = addCommas(tourPrice * valueOfSelected);
  var content = document.createTextNode("Amount: " + valueWithCommasAdded);

  // Finally append to the form
  document.forms[0].appendChild(content);

});
</script>

您必须这样做，因为您必须等待文档完全加载。在您可以从DOM获取价值之前，ejs已经加载完毕。您必须使用javascript动态进行计算并将其放置在DOM中。