使用函数更改全局变量答案

【问题标题】：Changing global variable using a function使用函数更改全局变量
【发布时间】：2016-05-31 14:35:51
【问题描述】：

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

下面我添加了我的 JavaScript 代码。全局变量为color、width、height 和radius。在 html 中有输入文本字段，用户在其中输入新值并使用按钮 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);

【问题讨论】：

尝试拨打window['variableName']。
什么叫save()？
你确定save 在drawCircle 和showPicture 之前被调用吗？也许发布完整的代码。这段代码看起来不错...
目前没有绑定到 save() 函数到任何按钮。在你的 save() 函数中粘贴一些 console.log 代码以确保它被调用。
您可以完全移除保存按钮，直接使用来自绘图函数的输入中的最新值。

标签： javascript html variables input

【解决方案1】：

感谢您的回答！我已经想通了。问题是我在表单标签中有输入文本字段，这需要 PHP 的操作 post/get 方法来进一步处理。这就是变量没有保留更改值的原因。删除此表单标签后一切正常。

正如我在上面已经描述的那样，当我单击按钮保存值时，正在从 html 文件 onclick="save();" 调用 save() 函数。

非常感谢您的帮助。

【讨论】：