javascript - JS无法识别Freemarker变量

我的Freemarker模板中包含以下代码：

<form>
  <#list elements as product>
    <input id="${product.buyLink}" type="checkbox" onClick="addToCart()" /><#if product.title??>${product.title}</#if> - <#if product.price??>${package.price}<#else>missing price</#if><br />
    <script src="/assets/js/addToCart.js" type="text/javascript"></script>
  </#list>
</form>

我的addToCart.js看起来像这样：

function addToCart() {
   if (document.getElementById("${product.buyLink}").checked == true) {
        console.log("Product removed from cart.")
   } else {
        console.log("Product addded into cart.")
   }
}

当我运行此代码时，Chrome开发人员工具会继续显示以下错误消息：

Uncaught TypeError: Cannot read property 'checked' of null

我也认为我的变量${product.buyLink}是一个包含许多反冲的字符串-例如，它看起来像这样："db/45493/t/524s"。我还尝试在我的JS脚本的顶部console.log("${package.buyLink}");并返回${package.buyLink}。

因此，tt似乎我的JS脚本根本不知道${product.buyLink}或认为它等于null。错误到底在哪里，我在做什么错？

最佳答案

JavaScript在客户端上运行，FreeMarker在服务器上运行。
这是一个例子：


如您所见，Internet将您的JavaScript代码与${product.buyLink}分开，这由服务器上的FreeMarker处理。您需要从FreeMarker模板的<script>标记内的addToCart.js中移动代码，或者从addToCart.js创建新模板并处理该模板，然后再将其返回到浏览器。

为了确保一切都清楚，您的目标是在服务器上处理${product.buyLink}，在您的浏览器中运行的JavaScript必须已经包含db/45493/t/524s，JavaScript在您的浏览器中运行并且不知道${product.buyLink}是什么。

关于javascript - JS无法识别Freemarker变量，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45765435/