跨页将javascript函数中的字符串分配给div值

Question

我有一个网络应用程序，输出的结果作为一个双功能。该函数比较两个文本文档，并返回表示两个文档之间相似性百分比的百分比。当用户单击“比较”按钮时，该函数运行并将用户从compare.jsp页面接收到results.jsp页面，并显示一个填充如下所示的加载栏：

<div id="levenshtein-distance"
     class="ldBar label-center levenshtein-distance"
     data-preset="fan"
     data-value="${result.percentage}"
     data-stroke="">
</div>

这很好，风扇条得到正确的百分比。然而，我也试图使用基于这个百分比的数据-笔画值来给风扇条着色。我有一个简单的javascript函数来完成这个任务，但是我想不出如何传递这个值。我尝试使用"onload“在results.jsp页面的body标记中运行函数，但这不起作用。下面是我的JavaScript函数：

function barSetLD(percent) {
  var red = "red";
  var green = "green";
  var orange = "orange";

  var elem = document.getElementById("levenshtein-distance");

  if (percent <= 40.00) {
    elem.setAttribute("data-stroke", green);
  } else if (percent > 40.00 && percent <= 70.00) {
    elem.setAttribute("data-stroke", orange);
  } else {
    elem.setAttribute("data-stroke", red);
  }
}

我做了相当多的搜索，似乎找不到一个帮助我解决这个问题的例子。任何帮助都是非常感谢的。

/更新：

Trinh，那是改变颜色的方法，谢谢！我现在的问题是，事实上，我有多个“levenshtein距离”is，并且我正在遍历它们。所以目前所有的东西都被设置为相同的颜色。我一开始就该提这件事，对不起。我正在比较多对文件并输出每对文件的加载栏。如果你对如何解决循环问题有一些想法，那将是很好的，但感谢原来的解决方案任何一种方式！我更新了javascript函数如下：

function barSetLD(percent) {
var red = "red";
var green = "green";
var orange = "orange";

var elem = document.querySelectorAll("[id^=levenshtein-distance]");

for (var i in elem) {
    if (percent <= 40.00) {
        elem[i].setAttribute("data-stroke", green);
    } else if (percent > 40.00 && percent <= 70.00) {
        elem[i].setAttribute("data-stroke", orange);
    } else {
        elem[i].setAttribute("data-stroke", red);
    }
}

}

使用html循环的完整代码是，我现在按您的建议调用页面最底部的barSetLD(百分比)：

<c:forEach items="${studentResults}" var="result" varStatus="loop">
    <div id="levenshtein-distance"
         class="ldBar label-center levenshtein-distance"
         data-preset="fan" 
         data-value="${result.percentage}">
    </div>
</c:forEach>

<script type="text/javascript">
    barSetLD("${result.percentage}");
</script>

Answer 1

将代码放在加载所有DOM的页面的最底部。或者，在调用此<div id="levenshtein-distance"/>之前，至少要确保document.getElementById("levenshtein-distance");存在并完全加载。如果你有多个levenshtein-distance id的话.