无法访问我的 javascript 中的 scriplet 变量

Question

我试图在我的 javascript 函数中访问一个 scriplet 变量，但我没有得到预期的结果，这是我的 javascript,

<script language="javascript">
function drawFreeSlot(){
    var div = document.createElement('div');
     var slotNo = <%=slotCount%>;
    div.className = 'col-1';
    //div.appendChild("Slot"+slotNo);
    div.style.backgroundColor = 'lightgreen';
    document.getElementById('content').appendChild(div);
</script>

我的 scriplet 代码为，

<%!int slotCount = 0; %>
<%for(ParkingSlot slot:slotList){
 if(slot.getPhoneNo() == 0){
 slotCount++;%>
 <script>
 drawFreeSlot();

 </script>
<%
 }%>

两个代码都在同一个 jsp 文件中，请帮助我，提前致谢。

Answer 1

正如 nnnnnn 指出的那样，var slotNo = <%=slotCount%> 只会设置 slotNo 一次，然后不会像您期望的那样更新。相反，将参数传递给函数，以便函数范围内 slotCount 的值将取决于每个函数调用。

function drawFreeSlot(slotCount) {
  var div = document.createElement('div');
  div.className = 'col-1';
  div.appendChild("Slot" + slotCount);
  div.style.backgroundColor = 'lightgreen';
  document.getElementById('content').appendChild(div);
  var sc = slotCount;
}

解决方案 1：不会在每次新请求时刷新 slotCount

<%!
   int slotCount = 0;
   List<String> mylist = Arrays.asList("A", "B", "C", "ABC", "DEF");
%>
<%
  for (String str: mylist) {
    if(str.length() < 3) { %>
      <script>drawFreeSlot(<%=++slotCount%>);</script>
<%  }
  } %>

解决方案 2：使用 JSTL（将在每个新请求上刷新 slotCount）

<% request.setAttribute("mylist", mylist); %>
<c:set var="slotCount" value="0"/>
<c:forEach var="str" items="${mylist}">
  <c:if test="${str.length() < 3}">
    <c:set var="slotCount" value="${slotCount+1}"/>
    <script>drawFreeSlot(${slotCount});</script>
  </c:if>
</c:forEach>

用你的替换我的存根列表和条件语句，它应该可以工作。

Answer 2

要了解您的问题，您需要一些有关完成方法的信息。

您在代码中使用了两个不同的方面。服务器端的 scriplet 和客户端的 javascript，首先执行 scriplet 然后将结果发送到浏览器以执行 javascript.

服务器端

首先要了解的是 Scriplet 不会执行 Javascript 代码。 JSP 基本上会在文件中添加一些文本。

在你的例子中，你的循环将插入

<script>
    drawFreeSlot();
</script>

对于每个 phone 数字为 0 的停车位。（并递增变量）。

它还会将变量值插入函数

<script language="javascript">
function drawFreeSlot(){
    var div = document.createElement('div');
     var slotNo = <%=slotCount%>;
    div.className = 'col-1';
    //div.appendChild("Slot"+slotNo);
    div.style.backgroundColor = 'lightgreen';
    document.getElementById('content').appendChild(div);
</script>

值取决于这段代码的位置，如果在循环之后，你会有槽的数量，如果不是，它将是0。它不使用变量，只是插入值作为文本。

客户端

完成后，页面将被发送到客户端浏览器并接收带有这些脚本块的 HTML 页面。

浏览器将读取文件以显示结果。这是执行 Javascript 的时候。所以每找到一个drawFreeSlot()块，他就会执行函数，但是函数当时只有变量insert的值，这就是你的问题所在。

解决方案

正如nnnnnn所建议的，使用参数传递将解决问题。

<script>drawFreeSlot(<%=++slotCount%>);</script>

HTML 页面将如下所示：

...
<script>
    drawFreeSlot(1);
</script>
...
<script>
    drawFreeSlot(2);
</script>
...
<script>
    drawFreeSlot(3);
</script>
...

只需简单更改函数即可使用此参数，您的代码即可正常运行。

因为在每个循环中，您都会打印变量此时的值。

无法访问我的 javascript 中的 scriplet 变量

Unable to access scriplet variable in my javascript

javascript

jsp

scriptlet