Увеличить и уменьшить размер шрифта отдельно

Question

Эта функция уменьшает ИЛИ увеличивает размер шрифта memedotcomtop и memedotcomtop2 в одно и то же время, как только я нажму для этого. Я хочу уменьшить и увеличить размер каждого отдельно. Более конкретно вы можете увидеть на изображении ниже

У меня есть два текстовых поля, плюс и минус кнопку на каждом

Когда я хочу, чтобы уменьшить или увеличить размер текста в первая коробка (memedotcomtop), уменьшается или увеличивается и размер текста во втором окне (memedotcomtop2)

мой код:

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); 

Я использую эту библиотеку: kinetic-v5.0.1.min.js

Answer 1

Попробуйте этот код.

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); 

Примечание:

Создать отдельные функции для каждого действия и не включают memefontsize и memefontsize2 в одной функции.

Answer 2

Вот пример работы. Как вы решаете залезть через дерево DOM, зависит от вас. Важным является то, что вы можете найти каждый из 6 элементов, которые вам нужно заботиться, - 4 кнопки и два текстовых контейнера.

Я также решил использовать элементы TR, содержащие каждую строку, в качестве простого средства отслеживания текущего уровня масштабирования, готового к увеличению или уменьшению в ответ на нажатие кнопки.

Существенное различие между моим подходом и тем, которое взято как вы, так и JohnR, состоит в том, что у нас есть только одна функция для приращений и одна для декрементов. Функция находит элемент, который запускал его в DOM, прежде чем использовать эту информацию для изменения элементов на основе их относительного положения к исходной кнопке запуска.

Это дает несколько преимуществ: 1) У вас нет дублированного кода, который подвергается ошибке при внесении изменений и обновлении всех копий. 2) Вы не ограничены количеством элементов на странице, на которой вы можете использовать это, - нет необходимости писать новые (по существу идентичные) обработчики событий.

<!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>