CODEWITHSUNDEEP
javascripthtml
Jurdun
Jurdun

Reputation: 145

How would I add an extra div to this button?

<button type="button" onClick="changeFontSize('content2', 2);">A+</button>
<button type="button" onClick="changeFontSize('content2', -2);">A-</button>

I've got an extra section of text that needs to be changed by this button. I've tried this:

<button type="button" onClick="changeFontSize('content2, middle', 2);">A+</button>
<button type="button" onClick="changeFontSize('content2, middle', -2);">A-</button>

And this

<button type="button" onClick="changeFontSize('content2', 'middle', 2);">A+</button>
<button type="button" onClick="changeFontSize('content2', 'middle', -2);">A-</button>

Without any luck.

I'm sure it's a simple solution, however I am new, and can not figure this out.

Here's the function:

<script type="text/javascript">
function changeFontSize(element, step) {
var el = document.getElementById(element);
var curFont = parseInt(window.getComputedStyle(el).fontSize, 10);
el.style.fontSize = (curFont + step) + 'px';
}
</script>

Upvotes: 0

Views: 83

Answers (3)

Sinan Samet
Sinan Samet

Reputation: 6752

It would be a lot easier to change the font size this way. (I expect jQuery is allowed since it is tagged)

HTML:

<button type="button" id='incr'>A+</button>
<button type="button" id='decr'>A-</button>

<div id="content">Resize me</div>
<div id="content">Resize me 2</div>

JS:

function changeSize(selector, selectorsArr, incr){
 $(document).on("click", selector, function(){
    s = selectorsArr.join(', ');
    var size = $(s).css("font-size");
    $(s).css("font-size", (parseInt(size)+incr)+"px");
 });
}

var selectorsArr = ['#content', '#content2'];
changeSize('#incr', selectorsArr, 2);
changeSize('#decr', selectorsArr, -2);

JSFIDDLE

Upvotes: 1

Leo
Leo

Reputation: 13838

In your code changeFontSize calls document.getElementById with the first parameter, so changeFontSize('content2, middle', 2); may simply run into JS error, because document.getElementById('content2, middle') returns null.

@George gave an answer that works. Another approach, you could specify a classname as the hook.

<button type="button" onClick="changeFontSize('content', 2);">A+</button>
<button type="button" onClick="changeFontSize('content', -2);">A-</button>

<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>

<script type="text/javascript">
function changeFontSize(elClass, step) {
    var elements = document.querySelectorAll('.' + elClass);
    for(var i = 0; i < elements.length; i++) {
        var curFont = parseInt(window.getComputedStyle(elements[i]).fontSize, 10);
        elements[i].style.fontSize = (curFont + step) + 'px';
    }
}
</script>

This may be much more maintainable when you want to add more containers. In such case you just add containers with the hook classname, instead of add more and more parameter to the onclick function call.

Say, you have 10 divs, your HTML would be:

<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
<div class="content">4</div>
<div class="content">5</div>
<div class="content">6</div>
<div class="content">7</div>
<div class="content">8</div>
<div class="content">9</div>
<div class="content">10</div>

Rather than:

<button type="button" onClick="changeFontSize(['div1', 'div2', 'div3', 'div4', 'div5', 'div6', 'div7', 'div8', 'div9', 'div10'], 2);">A+</button>
<button type="button" onClick="changeFontSize(['div1', 'div2', 'div3', 'div4', 'div5', 'div6', 'div7', 'div8', 'div9', 'div10'], -2);">A-</button>

Upvotes: 1

George
George

Reputation: 36784

You could change changeFontSize() to accept an array of element identifiers, rather than one, then loop through each, carrying out your functionality:

function changeFontSize(elements, step) {
    var i = 0, el = undefined, curFont = 14;
    for(; i < elements.length; i ++){
        el = document.getElementById(elements[i]);
        if(el != undefined){
            curFont = parseInt(window.getComputedStyle(el).fontSize, 10);
            el.style.fontSize = (curFont + step) + 'px';
        }
    }
}

And then call your function with an array of ids:

<button type="button" onClick="changeFontSize(['content2', 'middle'], 2);">A+</button>
<button type="button" onClick="changeFontSize(['content2', 'middle'], -2);">A-</button>

JSFiddle

Or use .querySelectorAll() which is arguably easier to call on, but has less support and is slower:

function changeFontSize(elements, step) {
    var i = 0, elements = document.querySelectorAll(elements), curFont = 14;
    for(; i < elements.length; i ++){
        if(elements[i] != undefined){
            curFont = parseInt(window.getComputedStyle(elements[i]).fontSize, 10);
            elements[i].style.fontSize = (curFont + step) + 'px';
        }
    }
}

<button type="button" onClick="changeFontSize('#content2, #middle', 2);">A+</button>
<button type="button" onClick="changeFontSize('#content2, #middle', -2);">A-</button>

JSFiddle

Upvotes: 3

Related Questions