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.

Answer 2

Here's a worked example. How you choose to climb through the DOM tree is up to you. The important bit is that you can locate each of the 6 elements that you need to care about - the 4 buttons and the two text containers.

I've also chosen to use the TR elements that contain each row, as an easy means of keeping track of the current level of zoom, ready to be incremented or decremented in response to a button press.

The substantial difference between my approach and the one taken by both yourself and JohnR, is that we only have one function for increments and one for decrements. The function locates the element that triggered it in the DOM, before using this information to alter elements based on their relative position to the original triggering button.

This offers a few advantages: 1) You dont have duplicated code, which is subject to error as changes are made and all copies are updated. 2) You aren't limited in the number of elements on the page you can use this on - there's no need to write new (substantially identical) event handlers.

<!DOCTYPE html>
<html>
<head>
<script>
"use strict";
window.addEventListener('load', onDocLoaded, false);

function onDocLoaded()
{
    // get the table
    var tbl = document.getElementById('tgtTbl');

    // get each of the row elements
    var rows = tbl.getElementsByTagName('tr');

    // and make them hold a variable that tracks their current zoom level.
    rows[0].zoomLevel = 1;
    rows[1].zoomLevel = 1;

    // get array of 4 buttons. -,+,   -,+
    var btns = document.getElementsByTagName('button');

    // and connect them to their handlers
    btns[0].addEventListener('click', onMinusBtnPressed, false);
    btns[1].addEventListener('click', onPlusBtnPressed, false);

    btns[2].addEventListener('click', onMinusBtnPressed, false);
    btns[3].addEventListener('click', onPlusBtnPressed, false);
}

function onPlusBtnPressed(evt)
{
    // determine which button triggered the event
    var btn = this;

    // determine the TD and TR elements that contain this button
    var containingCell = btn.parentNode;
    var containingRow = containingCell.parentNode;

    // grab the zoom level back from the TR element
    var curZoom = containingRow.zoomLevel;
    containingRow.zoomLevel += 0.1;

    // the text is simply contained within a TD - the first element in the row
    var targetCell = containingRow.childNodes[0];

    // update the font-size
    targetCell.setAttribute('style', 'font-size: ' + (curZoom*100) + '%');
}

function onMinusBtnPressed(evt)
{
    var btn = this;
    var containingCell = btn.parentNode;
    var containingRow = containingCell.parentNode;

    var curZoom = containingRow.zoomLevel;
    containingRow.zoomLevel -= 0.1;
    var targetCell = containingRow.childNodes[0];
    targetCell.setAttribute('style', 'font-size: ' + (curZoom*100) + '%');
}
</script>
<style>
</style>
</head>
<body>
    <div>
        <table id='tgtTbl'>
            <tr><td>Your top text</td><td><button>-</button><button>+</button></td></tr>
            <tr><td>Your bottom text</td><td><button>-</button><button>+</button></td></tr>
        </table>
    </div>
</body>
</html>