To incorporate the fontactive class into a specific button, simply add it to the desired button's class list.
var fontbtns = document.getElementsByClassName("grid-item");
for (var i = 0; i < fontbtns.length; i++) {
fontbtns[i].addEventListener("click", function() {
var current = document.getElementsByClassName("fontactive");
if (current.length > 0) {
current[0].className = current[0].className.replace(" fontactive", "");
}
this.className += " fontactive";
});
}
.grid-item.fontactive {
border-color: #06a0ff;
color: #06a0ff;
}
<div class="fontsgrid" id="fontlist">
<button class="grid-item" id="ff-garamond" onclick="changeFontFamily('EB Garamond')">Garamond</button>
<button class="grid-item" id="ff-palatino" onclick="changeFontFamily('Palatino')">Palatino</button>
<button class="grid-item" id="ff-bookerly" onclick="changeFontFamily('Bookerly')">Bookerly</button>
<button class="grid-item fontactive" id="ff-georgia" onclick="changeFontFamily('Georgia')">Georgia</button>
<button class="grid-item" id="ff-baskerville" onclick="changeFontFamily('Baskerville')">Baskerville</button>
<button class="grid-item" id="ff-montserrat" onclick="changeFontFamily('Montserrat')">Montserrat</button>
<button class="grid-item" id="ff-futura" onclick="changeFontFamily('Futura')">Futura</button>
<button class="grid-item" id="ff-opendyslexic3" onclick="changeFontFamily('OpenDyslexic3')">Open Dyslexic</button>
</div>
It is recommended not to use the getElementsByClassName() method due to its impact on performance. Instead, opt for the querySelectorAll() method which returns a static node list.
Hence, with the adjustment, the code would look like:
// Utilize .querySelectorAll() as it simplifies looping
document.querySelectorAll(".grid-item").forEach(function(item){
item.addEventListener("click", function() {
document.querySelectorAll(".fontactive").forEach(function(element){
element.classList.remove("fontactive");
});
item.classList.add("fontactive");
});
});
function changeFontFamily(){}
.grid-item.fontactive {
border-color: #06a0ff;
color: #06a0ff;
}
<div class="fontsgrid" id="fontlist">
<button class="grid-item" id="ff-garamond" onclick="changeFontFamily('EB Garamond')">Garamond</button>
<button class="grid-item" id="ff-palatino" onclick="changeFontFamily('Palatino')">Palatino</button>
<button class="grid-item" id="ff-bookerly" onclick="changeFontFamily('Bookerly')">Bookerly</button>
<button class="grid-item fontactive" id="ff-georgia" onclick="changeFontFamily('Georgia')">Georgia</button>
<button class="grid-item" id="ff-baskerville" onclick="changeFontFamily('Baskerville')">Baskerville</button>
<button class="grid-item" id="ff-montserrat" onclick="changeFontFamily('Montserrat')">Montserrat</button>
<button class="grid-item" id="ff-futura" onclick="changeFontFamily('Futura')">Futura</button>
<button class="grid-item" id="ff-opendyslexic3" onclick="changeFontFamily('OpenDyslexic3')">Open Dyslexic</button>
</div>
An alternate approach involves using radio buttons to ensure only one selection at a time without necessitating loops in your code. By hiding and styling radio button labels as buttons, you achieve the desired functionality with minimal JavaScript involvement.
This technique introduces more HTML complexity but reduces reliance on JavaScript.
Refer to the inline comments below for details.
// Assign default font
document.body.style.fontFamily = "Consolas";
// Handle click events at parent level to set page font based on selected radio button within 'wrapper'
document.getElementById("wrapper").addEventListener("click", function(event){
// Update page font to match value of clicked radio button
document.body.style.fontFamily = event.target.value;
});
/* Hide radio buttons */
input[type='radio'] { display:none; }
/* Default label style resembling buttons */
input[type='radio'] + label {
display:inline-block;
box-shadow:1px 1px grey;
background-color:#e0e0e0;
padding:5px;
border-radius:3px;
font-family:Arial, Helvetica, sans-serif;
cursor:pointer;
width: 80px;
font-size:.6em;
text-align:center;
}
/* Styling for checked labels */
input[type='radio']:checked + label {
box-shadow:-1px -1px grey;
background-color:#f78d32;
}
<div id="wrapper">
<input type="radio" id="rad1" name="rad" value="Comic Sans MS">
<label for="rad1">Comic Sans</label>
<!-- Pre-selected choice using checked attribute -->
<input type="radio" id="rad2" name="rad" value="Consolas" checked>
<label for="rad2">Consolas</label>
<input type="radio" id="rad3" name="rad" value="Calibri">
<label for="rad3">Calibri</label>
<input type="radio" id="rad4" name="rad" value="Georgia">
<label for="rad4">Georgia</label>
<input type="radio" id="rad5" name="rad" value="Arial">
<label for="rad5">Arial</label>
<input type="radio" id="rad6" name="rad" value="Montserrat">
<label for="rad6">Montserrat</label>
<input type="radio" id="rad7" name="rad" value="Baskerville Old Face">
<label for="rad7">Baskerville</label>
<input type="radio" id="rad8" name="rad" value="Harrington">
<label for="rad8">Harrington</label>
</div>
<h1>Page Heading</h1>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>