W3 validator -> using <script type="text/javascript"> within body of html

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

Aside from the script issue, you can reduce your code dramatically by including your drawChart function just once, then calling it with the required parameters. — Rory McCrossan
– Rory McCrossan, Commented Apr 7, 2015 at 15:29
Just to clarify, is the use of XHTML 1.0 Transitional intended? If you're not particularly aware of the differences between XHTML, HTML 4.01, and HTML5, you could try changing your top line to <!DOCTYPE HTML> (HTML5) and see how well that validates. — Katana314
– Katana314, Commented Apr 7, 2015 at 19:25

Alvaro Montoro · Accepted Answer · 2015-04-07 19:16:09Z

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.

edited Apr 7, 2015 at 19:16

answered Apr 7, 2015 at 19:08

Alvaro Montoro

30k7 gold badges68 silver badges92 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

W3 validator -> using <script type="text/javascript"> within body of html

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related