Question

我尝试在函数中更改全局声明的变量。在Chrome开发人员工具中，我看到变量会更改为新值，但是当函数结束并且我稍后使用变量时，值仍然相同。

下面我添加了我的JavaScript代码。全局变量为color，width，height和radius。在html中有输入文本字段，用户在其中输入新值并触发函数＆＃34; save＆＃34;使用按钮onclick-event来更改全局变量，以后使用（用于在Canvas上绘图）。

非常感谢您的帮助!!我真的没有看到错误：（

请参阅以下内容：

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的操作发布/获取方法以便进一步处理。这就是变量没有保持变化值的原因。删除此表单标签后，一切正常。

正如我上面已经描述的那样，当我点击按钮保存值时，正在从html文件onclick =＆＃34; save（）;＆＃34;中调用save（）函数。

非常感谢你的帮助。

使用函数更改全局变量

1 个答案: