javascript - W3 验证器 -> 在 html 正文中使用 <script type ="text/javascript">

Question

我尝试验证我的页面，但有一个错误需要修复。

我在代码中使用 Google 图表。为了填充图表，我需要在下面代码所示的 JavaScript 中填充数据。

<script type="text/javascript">

      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);



      function drawChart() {




        var data = google.visualization.arrayToDataTable([  <?php echo $data; ?>   ]);



        var data2 = google.visualization.arrayToDataTable([ <?php echo $datagoing; ?>   ]);


        var options = {
          backgroundColor: 'transparent',
            legend: 'none',
            height: '100px',
            width: '100px',
               chartArea: { height :"95%", width:"95%" },

        };

        var options2 = {
          backgroundColor: 'transparent',
            legend: 'none',
            height: '100px',
            width: '100px',
               chartArea: { height :"95%", width:"95%" },
        };


        var chart = new google.visualization.PieChart(document.getElementById('piechart<?php echo $loop ?>'));
        chart.draw(data, options);

        var chart2 = new google.visualization.PieChart(document.getElementById('piechartgoing<?php echo $loop ?>'));
        chart2.draw(data2, options2);

      }
    </script>

这是在一个循环内，因此代码会生成多次，如您通过查看我的页面的源代码 http://mr-tipster.com/pages/newcard.php?venue=Warwick&time=3:05 看到的那样

我的问题是如何在保持页面 html 验证的同时执行此操作:http://validator.w3.org/check?uri=http%3A%2F%2Fmr-tipster.com%2Fpages%2Fnewcard.php%3Fvenue%3DWarwick%26time%3D2%3A30&charset=%28detect+automatically%29&doctype=Inline&group=0

Answer 1

问题是您将脚本放置在 tr 之间直接位于 <table> 内标签和 that is not valid 。您现在拥有的:

<table>
    <tr>
        <td>...</td>
        ...
    </tr>
    <script type="text/javascript">...</script>
    ...
</table>

要快速解决这个问题，请将脚本移到最后一个 <td> 中行( <script> 是 flow element allowed in the table cell )。效果是一样的，验证没有问题。像这样的事情:

<table>
    <tr>
        <td>...</td>
        ...
        <td>
            ...
            <script type="text/javascript">...</script>
        </td>
    </tr>
    ...
</table>

<小时/>

但是如果你想以更干净、更优雅的方式解决问题，你应该按照 Rory 在评论中建议的那样做:创建一个函数，然后简单地调用它并更改参数，而不是使用几乎相同的代码的大块.