使用函数更改全局变量
问题描述:
我尝试更改函数内全局声明的变量。在Chrome开发人员工具中,我发现变量会更改为新值,但是当函数结束并稍后使用变量时,值仍然相同。使用函数更改全局变量
下面我添加了我的JavaScript代码。全局变量为color
,width
,height
和radius
。在html中有输入文本字段,用户输入新值并通过按钮onclick-event触发函数“save”来更改全局变量,稍后使用它(用于在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);
答
谢谢您的回答,我已经想通了,问题是,我在表单的输入文本字段。标签,这期望一个动作post/get方法为PHP进一步处理。这就是为什么变量不保留更改的值的原因。 删除此表单标签后,一切正常。
正如我已经在上面描述save()函数正在从html-file onclick =“save();”被调用,当我点击按钮来保存值。
非常感谢您的帮助。
尝试调用'window ['variableName']'。 –
什么叫'save()'? – Pointy
你确定'save'在'drawCircle'和'showPicture'之前被调用吗?也许发布完整的代码。这段代码看起来不错... – Pimmol