Así que tengo un código para cambiar mi fuente, pero también quiero una opción para ingresar una fuente personalizada:
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">Pero desafortunadamente no funciona, si mi afirmación es incorrecta o algo así, estoy un poco atascado. Gracias
Supongo que necesita una selección para obtener el valor de fuente predefinido y una entrada para obtener el valor de fuente personalizado. Si lo desea, puede probar el siguiente código:
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>