Question

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

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

我需要的是获取所选输入的值，例如2并将其乘以tour.price金额，例如34000，这样总计将是68000并将其放入addCommas（）Amount: $ <%= addCommas(34000 * 2) %> //the total should be 68000 then the function addCommas() which would make it 68,000。

我尝试使用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。我的第二次尝试是添加 <%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) %>"

所有结果都未定义

调用<%= addCommas(tour.price * valueOfSelected) %>时，预期结果的总价应为$ 68,000

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

Answer 1

无论诸如获取选定文本之类的任何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中。

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

1 个答案: