Question

我正在尝试编写以下代码：
按下两个按钮可更改变量的值在我的例子中，变量定义了笔划的宽度，并在我的Javascript顶部声明为5，每次按下其中一个按钮时，应该增加或减少1。 [该项目最初不是由我制作的，我只是想改变代码用于学习目的，归功于Emma @ Sololearn。]

问题：无论我按多少次或按哪个按钮，笔的大小（也就是变量的值）都不会改变。没有其他错误消息该功能被正确调用，我通过添加确认（“pensize has increase”）消息进行测试，当您按下按钮时，该消息会弹出。所以这对我来说意味着HTML是正确的所以问题在于我的“penwidth ++”。这句话的正确方法是什么？

以下是我的HTML按钮部分：

    <button id="biggerpenbtn" onclick='penSizeBigger()'>Bigger</button>
    <button id="smallerpenbtn" onclick='penSizeSmaller()'>Smaller</button>

这是包含我的新按钮的Javascript部分：

var arr_touches = [];
var canvas;
var ctx;
var down = false; //mouse is pressed
var color = 'black'; //default drawing color
var penwidth = 5; // drawing width


function confirmClear() {
    var x = confirm("Are you sure you want to clear the canvas?");
    if (x == true) {
        clearCanvas();
    }
}

function penSizeBigger(){
    penwidth++;
}



function penSizeSmaller(){
    penwidth--;
}

//calling window.onload to make sure the HTML is loaded
window.onload = function() {
    canvas = document.getElementById('canvas');
    ctx = canvas.getContext('2d'); 
    ctx.lineWidth = penwidth;

You can view the full code here!

Answer 1

你走了：

'externals/foo' -> 'main'
'externals/bar' -> 'main'

问题是你在onload函数中只设置了一次ctx.lineWidth。更新宽度变量时，您没有更新ctx.lineWidth变量。

如果你不关心width变量，可以简化为：

function penSizeBigger(){
    width++;
    ctx.lineWidth = width;
}



function penSizeSmaller(){
    width--; 
    ctx.lineWidth = width;
}

Answer 2

嗯，你的{{1}}变量值变化（增加或减少）没有任何问题，这完全在后台发生，但是如果那是与值相关的东西的呈现，那么你想要的是，你必须承担该操作的责任，并且需要做必要的事情。我们可以说，作为SethWhite的例子。如果你真的想增加/减少变量，那么最好使用一些支持与JavaScript变量和DOM组件（例如AngularJs）绑定的框架/库，所以你必须要关注javascript变量，并应用一些条件样式UI模板。

Javascript onclick函数增加变量

2 个答案: