Errore 'this.canvas is null'

**briareoz** · 24-05-2013, 18:30

Ciao, scusate ma non esperto, anzi direo proprio neofita.

Cosa c'è che non va in questo codice? Mi sa che è onload nel body.....

Testato qui funziona: http://jsfiddle.net/genehackman/ygrWh/8/

Grazie ciao

codice:

<!DOCTYPE html>
<html>
<head>
  <title>gauge.js</title>
  <script type="text/javascript" src="http://bernii.github.io/gauge.js/dist/gauge.js"></script>  

    <script type="text/javascript">
  var gaugeOneTarget = document.getElementById('gaugeOne');
var gaugeOne = new Donut(gaugeOneTarget);

gaugeOne.setOptions({
    lines: 12,
    angle: 0.07,
    lineWidth: 0.10,
    colorStart: '#6F6EA0',
    colorStop: '#C0C0DB',
    strokeColor: '#e0e0e0'
});

gaugeOne.maxValue = 100;
gaugeOne.set(85);

</script>
</head>
<body>
<canvas id="gaugeOne" width="200" height="120"></canvas>
</body>
</html>

Errore

codice:

TypeError: 'null' is not an object (evaluating 'this.canvas.getContext')

**Nobody33** · 24-05-2013, 23:37

Se nel fiddle che hai fatto funziona e in locale no, ci sarà qualcosa di strano, no?

Guarda bene nel Fiddle ...cosa c'è scritto a sinistra, sotto "Frameworks & Extensions"?

Forse perché nel tuo tag <body> manca l'onload?

**briareoz** · 25-05-2013, 14:15

Ok, nel frattempo ho fatto passi avanti...l'onload l'ho messo qui e funziona:

codice:

<script type="text/javascript"> 
window.onload=function(){
...

Adesso devo utilizzare più istanze e non funzionano, cioé si visualizzano ma modificando le opzioni (setOptions) non ottrngo nessuna modificam non vengono applicate.
Il problema è (document.getElementById('clickme').addEventListen er('click', function ()) devo capire come modificarlo.

codice:

<script type="text/javascript">
window.onload=function(){
console.log("GAUGE ONE");

var gaugeOneTarget = document.getElementById('gaugeOne');
var gaugeOne = new Donut(gaugeOneTarget);
gaugeOne.maxValue = 100;
gaugeOne.set(25);

console.log("GAUGE TWO");
var gaugeTwoTarget = document.getElementById('gaugeTwo');
var gaugeTwo = new Donut(gaugeTwoTarget);
gaugeTwo.maxValue = 50;
gaugeTwo.set(75);

document.getElementById('clickme').addEventListener('click', function () {
    gaugeOne.setOptions({
        lines: 12,
        angle: 0.50,
        lineWidth: 0.05,
        colorStart: '#000',
        strokeColor: '#9a9a9a'
    });

    gaugeTwo.setOptions({
        lines: 12,
        angle: 0.50,
        lineWidth: 0.05,
        colorStart: '#0afc19',
        strokeColor: '#9a9a9a'
    });

});
}

</script>

codice:

    <canvas id="gaugeOne" height="61" width="103"></canvas>
    <canvas id="gaugeTwo" height="61" width="103"></canvas>

Discussione: Errore 'this.canvas is null'

Strumenti discussione

Ricerca discussione

Visualizza

Errore 'this.canvas is null'

Permessi di invio