I want to provide the users of my webpage a simple way to increase and decrease the text size of all the elements which belong to class="txt". The two buttons in the snippet below should decrease / increase the font-size by 4pt every time they are clicked (a slider would also suffice).
I've done a lot of research and tried different methods (1, 2, 3) but I wasn't able to make any of them work. These solutions act on the id of the elements, so I tried to replace getElementById('txt') with getElementsByClassName('txt'); still nothing.
.txt {
font-size: 14pt;
}
summary {
font-size: 20pt;
}
/* STYLE */ .txt, summary { font-family: monospace; white-space: pre-wrap; }
/* STYLE */ .zoombox { display: flex; padding: 8pt 0pt; }<div class="zoombox">
<button class="btn zoom out">-</button>
<div class="txt"> ZOOM </div>
<button class="btn zoom in">+</button>
</div>
<details open>
<summary>TITLE OF THE SONG</summary>
<div class="txt chords"> Em F D# </div>
<div class="txt lyrics">A song with its lyrics</div>
</details>First of all, you should format your html code. I suggest you to have your html classes formatted like the code given below.
const val = document.querySelectorAll(".txt");
const zoomin = document.querySelector(".zoom-in");
const zoomout = document.querySelector(".zoom-out");
function zoom_in() {
val.forEach((element) => {
const fonsi = window
.getComputedStyle(element, null)
.getPropertyValue("font-size");
const currentSize = parseFloat(fonsi);
element.style.fontSize = currentSize + 1 + "px";
});
}
zoomin.addEventListener("click", () => {
zoom_in();
});<div class="zoombox">
<button class="btn zoom-out">-</button>
<div class="txt"> ZOOM </div>
<button class="btn zoom-in">+</button>
</div>
<div class="txt titles">TITLE OF THE SONG</div>
<div class="txt chords"> Em F D# </div>
<div class="txt lyrics">A song with its lyrics</div>And you can write a zoom-out function based on the zoom_in function.
You could do something like this. You would be setting an event listener on the body, but click events bubble so that single event listener will catch clicks on any children.
This approach prevents the zoom buttons from also scaling.
let zoomIn = document.getElementById('zoomIn');
let zoomOut = document.getElementById('zoomOut');
let textArray = Array.from(document.getElementsByClassName('txt'));
document.querySelector('body').addEventListener('click', zoom);
function zoom(e) {
textArray.forEach(txt => {
let currentSize = parseFloat(window.getComputedStyle(txt).fontSize);
if(e.target.classList.contains('in')) {
txt.style.fontSize = (currentSize + 1) + 'px';
}
else {
txt.style.fontSize = (currentSize - 1) + 'px';
}
})
}.txt {
font-size: 14pt;
}
summary {
font-size: 20pt;
}
/* STYLE */ .txt, summary { font-family: monospace; white-space: pre-wrap; }
/* STYLE */ .zoombox { display: flex; padding: 8pt 0pt; }<body>
<div class="zoombox">
<button id="zoomOut" class="btn zoom out">-</button>
<div class="txt"> ZOOM </div>
<button id="zoomIn" class="btn zoom in">+</button>
</div>
<div class="txt titles">TITLE OF THE SONG</div>
<div class="txt chords"> Em F D# </div>
<div class="txt lyrics">A song with its lyrics</div>
</body>You can use getComputedStyle to get the current font-size (as a string with a unit of measure). Then I would suggest to multiply this number with a coefficient and then append the same unit again to it. This coefficient could be 1.1 or 0.9 for a 10% increase or decrease.
Here is your HTML with that solution added:
document.querySelector("button.in").addEventListener("click", () => zoom(1.1));
document.querySelector("button.out").addEventListener("click", () => zoom(0.9));
function zoom(coeff) {
document.querySelectorAll(".txt, summary").forEach(el => {
let css = getComputedStyle(el).getPropertyValue("font-size");
let size = parseFloat(css);
let unit = css.replace(/[\d.-]*/, "");
el.style.fontSize = size * coeff + unit;
});
}summary { font-size: 20pt }
.txt { font-family: monospace; white-space: pre-wrap; font-size: 14pt }
.zoombox { display: flex; padding: 8pt 0pt }<div class="zoombox">
<button class="btn zoom out">-</button>
<div class="txt"> ZOOM </div>
<button class="btn zoom in">+</button>
</div>
<details open>
<summary>TITLE OF THE SONG</summary>
<div class="txt chords"> Em F D# </div>
<div class="txt lyrics">A song with its lyrics</div>
</details>