Question

I have a function draw_integer(n,s,x,y,plotx) , which draws a integer ,n on HTML5 canvas of size s in the coordinates (x,y), I am calling this function inside another function draw_num() as follows,
(plot0, number and size are the respective id’s of canvas, number & size input fields,
function drawnum() is being triggered with an onclick event.)

function drawnum() {
    var n = document.getElementById('number').value;
    var s = document.getElementById('size').value;
    console.debug(n,s);
    draw_integer(n,s,100,100,plot0);   // this  doesn't get executed
    }   

function draw_integer(n,s,x,y,plotx){ //lots of code }

The draw_integer function being called under drawnum doesnt get executed, what is the problem I am unable to identify.

using console.debug() returns the appropriate values of number and size as entered by user, also if i use draw_integer(3,100,100,100,plot0) (draw number 3 of size 100) instead of draw_integer(n,s,100,100,plot0) it works .

So that means that there is some error occuring while passing the varaible n and s from drawnum() to draw_integer().

Thinking that this might be due to to the local scope of the variables , I tried this.

var n = document.getElementById('number').value;
var s = document.getElementById('size').value;

function drawnum() {
console.debug(n,s);
draw_integer(n,s,100,100,plot0);   // this  doesn't get executed
}   

function draw_integer(n,s,x,y,plotx){ //lots of code }

But that didn’t work either.

can you help me out or suggest a better way to solve this problem .

Answer 1

var n = document.getElementById('number').value;
var s = document.getElementById('size').value;

The variables n and s above are Strings and not Numbers. You need to either use parseFloat or parseInt to convert it.

var n = parseInt(document.getElementById('number').value, 10);
var s = parseInt(document.getElementById('size').value, 10);