Increase and decrease size of font separately

Question

This function decreases OR increases the font size of memedotcomtop and memedotcomtop2 at the same time, once I click to do so. I want to decrease and increase the size of each separately. More specifically you can see on the Image below

I have two text boxes, a plus and a minus button on each

When i want to decrease or increase the size of the text in the first box(memedotcomtop ), it decreases or increases also the size of the text in the second box(memedotcomtop2 )

my code is:

layer.add(memedotcomtop2);
layer.draw();
var textmemeheight2 = stage.getHeight();
layer.draw();


layer.add(memedotcomtop);
layer.draw();
var textmemeheight = stage.getHeight();
layer.draw();

function lowertopsize()
{
    if(memefontsize > 10 )
    {


        memefontsize = memefontsize -1;
        memedotcomtop.fontSize(memefontsize);
        layer.draw()



    }
        if(memefontsize2 > 10){


        memefontsize2 = memefontsize2 -1;
        memedotcomtop2.fontSize(memefontsize2);
        layer.draw();           



    }


}   

function increasetopsize()
{
    memefontsize2 = memefontsize2 +1;
    memedotcomtop2.fontSize(memefontsize2);

    memefontsize = memefontsize +1;
    memedotcomtop.fontSize(memefontsize);
    layer.draw();
}




 document.getElementById('meme-top-smaller').addEventListener('click', function() {
    lowertopsize();
 }, false);
 document.getElementById('meme-top-bigger').addEventListener('click', function() {
    increasetopsize();
 }, false);




 document.getElementById('meme-top-smaller2').addEventListener('click', function() {
    lowertopsize();
 }, false);
 document.getElementById('meme-top-bigger2').addEventListener('click', function() {
    increasetopsize();
 }, false);

I'm using this library: kinetic-v5.0.1.min.js

Answer 1

Try this code.

layer.add(memedotcomtop2);
layer.draw();
var textmemeheight2 = stage.getHeight();
layer.draw();


layer.add(memedotcomtop);
layer.draw();
var textmemeheight = stage.getHeight();
layer.draw();

function lowertopsize() {
    if (memefontsize > 10) {
        memefontsize = memefontsize - 1;
        memedotcomtop.fontSize(memefontsize);
        layer.draw()
    }       
}

function lowertopsize2() {        
    if (memefontsize2 > 10) {
        memefontsize2 = memefontsize2 - 1;
        memedotcomtop2.fontSize(memefontsize2);
        layer.draw();
    }
}

function increasetopsize() {        
    memefontsize = memefontsize + 1;
    memedotcomtop.fontSize(memefontsize);
    layer.draw();
}
function increasetopsize2() {
    memefontsize2 = memefontsize2 + 1;
    memedotcomtop2.fontSize(memefontsize2);
    layer.draw();
}

document.getElementById('meme-top-smaller').addEventListener('click', function () {
    lowertopsize();
}, false);
document.getElementById('meme-top-bigger').addEventListener('click', function () {
    increasetopsize();
}, false);

document.getElementById('meme-top-smaller2').addEventListener('click', function () {
    lowertopsize2();
}, false);
document.getElementById('meme-top-bigger2').addEventListener('click', function () {
    increasetopsize2();
}, false);

Note:

Create separate functions for each action and don't include memefontsize and memefontsize2 in one function.