CODEWITHSUNDEEP
javascriptfunction
Cassidy
Cassidy

Reputation: 115

Javascript onclick function to increase value of a variable

I am trying to code the following:
Two buttons which when pressed change the value of a variable.
In my example the variable defines the width of a pen stroke and is declared as 5 at the top of my Javascript and should be increased or decreased by 1 every time you press one of the buttons.
[The project was initially not made by me, I'm just trying to change the code for learning purposes, credits to Emma @ Sololearn.]

The problem: The size of the pen (aka the value of the variable) doesn't change, no matter how often or which button I press. There is no other error message.
The function is getting called properly, I tested by adding a confirm("pensize has increased") message, which pops up, when you press the button. So this means to me that the HTML is correct so the problem lies within my "penwidth++". What is the correct way to phrase this?

Here is the button part of my HTML:

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

And here is the Javascript part including my new buttons:

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!

Upvotes: 1

Views: 1293

Answers (2)

user6183834
user6183834

Reputation:

well, nothing wrong with your penWidth variable value change (increase or decrease), that is happening in the background perfectly, but what you want if that is a rendering of something that related to the value, then yes, you have to take the responsibility of that operation to render and need to do the needful. As the example of SethWhite we can say. And if you really want to increase/decrease variable then better to use some framework/library that support binding with JavaScript variable and the DOM component (eg AngularJs), so you have to take care about the javascript variable, and apply some conditional style in the UI template.

Upvotes: 0

SethWhite
SethWhite

Reputation: 1977

Here you go:

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



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

The issue is that you were setting ctx.lineWidth only once in your onload function. When you updated the width variable, you were not updating the ctx.lineWidth variable.

If you don't care much for the width variable, this can be simplified to:

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

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

Upvotes: 1

Related Questions