Question

我没能在javascript中添加一个简单的for循环。

    <html xmlns:th="http://www.thymeleaf.org">
<head>
    <script type="text/javascript" src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
    <script type="text/javascript" th:inline="javascript">
window.onload = function () {
    var dataPoints = [{y : 10}, {y : 13}, {y : 18}, {y : 20}, {y : 17}];

    for(var i = 0; i < 3; i++){
          // ... do something
         };

    var chart = new CanvasJS.Chart("chartContainer", {
            title : {
                text : "Dynamic Data"
            },
            data : [{
                    type : "spline",
                    dataPoints : dataPoints
                }
            ]
        });

    chart.render();

    var yVal = 15, updateCount = 0;
    var updateChart = function () {

        yVal = yVal + Math.round(5 + Math.random() * (-5 - 5));
          updateCount++;

        dataPoints.push({
            y : yVal
        });

        chart.options.title.text = "Update " + updateCount;
        chart.render();

    };

    // update chart every second
    setInterval(function(){updateChart()}, 1000);
}

</script>
    <script type = "text/javascript" src = "/assets/script/canvasjs.min.js" >  </script>
</head>
<body>
<div id = "chartContainer" style = "height: 300px; width: 100%;" />
</body>
</html>

我们的想法是为图表创建一个数据对象，但即使是简单的构造，使用硬编码值也会产生异常：

org.xml.sax.SAXParseException：元素的内容必须由格式正确的字符数据或标记组成。

我把循环放在这个函数中：

    <html xmlns:th="http://www.thymeleaf.org">
<head>
    <script type="text/javascript" src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
    <script type="text/javascript" th:inline="javascript">
    /*<![CDATA[*/
    window.onload = function () {
    var dataPoints = [{y : 0}, {y : 0}];

    //var levels = [600, 680, 823, 900]; //test without thymeleaf model data

    //var levels get data from thymeleaf model
    var levels = [[${readings}]];
    for(var i = 0; i < levels.length; i++){
        dataPoints.push({
            y : levels[i]
        });
    }

    var chart = new CanvasJS.Chart("chartContainer", {
            title : {
                text : "Dynamic Data"
            },
            data : [{
                    type : "spline",
                    dataPoints : dataPoints
                }
            ]
        });

    chart.render();

    var yVal = 15, updateCount = 0;
    var updateChart = function () {

        yVal = yVal + Math.round(5 + Math.random() * (-5 - 5));
          updateCount++;

        dataPoints.push({
            y : yVal
        });

        chart.options.title.text = "Update " + updateCount;
        chart.render();

    };

    // update chart every second
    setInterval(function(){updateChart()}, 1000);
}/*]]>*/
    </script>
    <script type = "text/javascript" src = "/assets/script/canvasjs.min.js"></script>
</head>
<body>
<div id = "chartContainer" style = "height: 300px; width: 100%;" />
</body>
</html>

这有什么问题？我发现了很多例子和类似的问题，但没有任何帮助。

...

其实我找到了问题的原因，这里有解释：

Error parsing XHTML: The content of elements must consist of well-formed character data or markup

解决方案就在这里：

 function collide(arena) {
  const [m, o] = [this.matrix, this.pos];
  for (let y = 0; y < m.length; ++y) {
    for (let x = 0; x < m[y].length; ++x) {
      if (m[y][x] !== 00 &&
          (arena[y + o.y] &&
          arena[y + o.y][x + o.x]) !== 0) {
            return true;
          }
    }
  }
  return false;
}
Player.prototype.collide=collide;

for (i = 0; i < a_player.length; i++){
           a_player[i].collide(arena)
}

我可以将代码放在一个单独的文件中，而不是CDATA，但是thymleaf模型超出了范围，我还没有解决这个新问题。

javascript for-loop格式不正确

0 个答案: