So I have some code to change my font, but I also want an option to input a custom font:
Javascript:
changeFont = function(){
var select = document.getElementById('font');
var fontValue = select.options[select.selectedIndex].value;
console.log(value);
if (fontValue === "custom"){
var custom = document.getElementById("font");
custom.style.visibility='visible'
}
else{
document.documentElement.style
.setProperty('--font', fontValue);
}
}
Html:
<select id="font" style="margin-left:10px; margin-right: 10px;" onchange="changeFont()">
<option value="Fira Code">Defualt</option>
<option value="sans-serif">Sans Serif</option>
<option value="serif">Serif</option>
<option value="custom">Custom</option>
</select>
<h5 class="customFont">Custom Font</h5>
<input class="customFont" id="customFont">
But unfortuantley it doesnt work, is my if statment wrong or something, im kinda stuck rn. Thanks
I guess you need a select to get the pre-defined font value and an input to get the customized font value. If you want it, you can try following code:
changeFont = function() {
var select = document.getElementById('font');
var fontValue = select.options[select.selectedIndex].value;
if (fontValue === "custom") {
var custom = document.getElementById("customFont");
custom.style.visibility = 'visible'
} else {
document.documentElement.style.setProperty('font-family', fontValue);
}
}
inputFont = function() {
var custom = document.getElementById("customFont");
document.documentElement.style.setProperty('font-family', custom.value);
}<div id="main">
<select id="font" style="margin-left:10px; margin-right: 10px;" onchange="changeFont()">
<option value="Fira Code">Defualt</option>
<option value="sans-serif">Sans Serif</option>
<option value="serif">Serif</option>
<option value="custom">Custom</option>
</select>
<h5 class="customFont">Custom Font</h5>
<input class="customFont" id="customFont" onchange="inputFont()">
</div>