関数を使ってグローバル変数を変更する

Question

関数内でグローバルに宣言された変数を変更しようとしています。 Chromeデベロッパーツールでは、変数が新しい値に変更されることがわかりましたが、関数が終了して後で変数を使用すると、値は変わりません。

以下、JavaScriptコードを追加しました。グローバル変数はcolor,width,heightおよびradiusです。 htmlには入力テキストフィールドがあり、ユーザーは新しい値を入力し、後で（Canvasでの描画に使用する）グローバル変数を変更するためにclick-eventボタンを使用して関数saveを起動します。

多くのお手伝いをいただきありがとうございます。私は実際に間違いが表示されていない:(

以下を参照してください：

var c = document.getElementById("myCanvas"); 
var ctx = c.getContext("2d"); 

var color = ""; 
var width = 0; 
var height = 0; 
var radius = 0; 

function save() { 
    color = document.getElementById("color").value; 
    width = document.getElementById("width").value; 
    height = document.getElementById("height").value; 
    radius = document.getElementById("radius").value; 
} 

function drawRectangle() { 
    ctx.fillStyle = color; 
    ctx.fillRect(20,20,width,height); 
} 

function drawCircle() { 
    ctx.beginPath(); 
    ctx.arc(100,100,radius,0,2*Math.PI); 
    ctx.fillStyle = color; 
    ctx.stroke(); 
} 

function showPicture() { 
    var imageObj = new Image(); 

    imageObj.onload = function() { 
     ctx.drawImage(imageObj, 100, 100, 200, 200, 200,200, width, height); 
    }; 

    imageObj.src = 'miami.jpg'; 
} 

var btn1 = document.getElementById("btn1"); 
var btn2 = document.getElementById("btn2"); 
var btn3 = document.getElementById("btn3"); 

btn1.addEventListener("click", drawRectangle, false); 
btn2.addEventListener("click", drawCircle, false); 
btn3.addEventListener("click", showPicture, false); 

Answer 1

は、あなたの答えをありがとう、私はすでにそれを考え出した問題は、私は、フォームに入力テキストフィールドを持っていたということでした！。タグを使用すると、後処理のためにPHPのアクションpost/getメソッドが必要になることがありました。ボタンをクリックして値を保存すると、save（）関数がhtmlファイルのonclick = "save（）;"から呼び出されています。

ご協力いただきありがとうございます。