W3验证器 - >在html体内使用<script type =“text / javascript”>

Question

I trying to validate my page but have one error to fix.

I am using Google charts within my code. to populate the chart i require data to be filled in within the JavaScript shown in the code below.

<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>

this is within a loop so the code is generated multiple times as you can see by looking at the source of my page http://mr-tipster.com/pages/newcard.php?venue=Warwick&time=3:05

my question would be how can i do this while keeping the page html validated: 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

The problem is that you are placing the script between trs directly inside the <table> tag and that is not valid. What you have now:

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

To solve it quickly, move the script inside the last <td> of the row (<script> is a flow element allowed in the table cell). The effect will be the same, and it will validate without problems. Something like this:

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

---

But if you want to solve the issues in a cleaner and more elegant way, you should do as Rory suggests in the comments: create a function, and simply call it changing the parameters, instead of having huge blocks of almost identical code.