Как бы добавить дополнительный div к этой кнопке?

Question

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

У меня есть дополнительный раздел текста, который нужно изменить этой кнопкой. Я попытался это:

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

И это

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

Без везения.

Я уверен, что это простое решение, однако я новичок и не могу понять это.

Вот функция:

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

Answer 1

Вы можете изменить changeFontSize() принять массив идентификаторов элементов, а не один, а затем цикл по каждому, выполняя свой функционал:

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'; 
     } 
    } 
} 

А потом вызовите свою функцию с помощью массива id s:

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

JSFiddle

---

Или использовать .querySelectorAll(), который, возможно, проще позвонить, но имеет меньшую поддержку и 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

Answer 2

В коде changeFontSize вызовы document.getElementById с первым пар ameter, поэтому changeFontSize('content2, middle', 2); может просто запустить JS-ошибку, потому что document.getElementById('content2, middle') возвращает null.

@ Джордж дал ответ, который работает. Другой подход, вы можете указать имя класса как 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> 

Это может быть гораздо удобнее обслуживать, если вы хотите добавить больше контейнеров. В таком случае вы просто добавляете контейнеры с именем класса hook, а не добавляете все больше и больше параметров в вызов функции onclick.

Скажем, у вас есть 10 дивы, ваш HTML будет:

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

Вместо:

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

Answer 3

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

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