Trying to make a dropdown menu for changing between font families - ☔︎ ∙ I need Help! - MelonLand Forum

Welcome, Guest. Please login or register. - Thinking of joining the forum??
November 23, 2024 - @386.04 (what is this?)

Forum activity rating: Three Stars

Three Stars

Posts: 31/1k.beats

Unread Topics | Unread Replies | My Stuff | Random Topic | Recent Posts

Start New Topic

News:

~ Inconvenience is counterculture ~

MelonLand Forum World Wild Web ✁ ∙ Web Crafting ☔︎ ∙ I need Help! Trying to make a dropdown menu for changing between font families	« previous next »

Pages: [1]

Print

Author

Topic: Trying to make a dropdown menu for changing between font families (Read 677 times)

asterhalloween
Casual Poster ⚓︎

the beauty of experiencing the world

⛺︎ My Room
SpaceHey: Friend Me!
iMood:

mythicalwaters

WWW

First 1000 Members!

Trying to make a dropdown menu for changing between font families

« on: December 01, 2023 @666.27 »

okay so... I am trying to make a settings page to change various aspects of my website, mainly appearance wise. I've already gotten a toggle working for theme selection (dark/light mode) but I also want to have a dropdown menu for selecting between different font families for the entire website (and hopefully custom cursors and eventually even cursor trails too, though that's for a different day O_o)
SO basically, I've got the actual dropdown menu in place with values and id's and such, but I have pretty much no idea what to do for the JavaScript in regard to setting the variables to the selected values.
I'm planning on having the font-family property use a var(--font), but unlike the theme management (linked above) I want it to only be a lone variable controlled by the selected dropdown value (and remembered using localStorage, of course) rather than a class that sets the variables, if possible. (I don't particularly mind if I need to make classes for each font variable if it's necessary, but if there is a way to do it without that I would prefer it)
Apologies if this topic is similar to others, I'm still fairly new to using forums and couldn't find an answer to my question in here or by looking it up ^_^"


	Logged

Love makes the world go round!

TheFrugalGamer
Sr. Member ⚓︎

⛺︎ My Room
Itch.io: My Games

WWW

First 1000 Members!

Pocket Icelogist!

Re: Trying to make a dropdown menu for changing between font families

« Reply #1 on: December 01, 2023 @896.24 »

I believe you can just target the body tag and it should change everything that you haven't already set explicitly. See this JS Fiddle here:

https://jsfiddle.net/6uqLm3za/

I'm not sure how you'd save it from page to page though since I've never actually had to do that before.

HTML:
Code
<html>

<body>
  <p>
    This text should change once you've changed the dropdown below.
  </p>
  
  <p>
    Change font here:
  </p>

  <select id="fontToggle" onChange="changeFont()">
    <option value="0" selected="selected">None</option>
    <option value="courier">Courier</option>
    <option value="comic">Comic Sans</option>
    <option value="roman">Times New Roman</option>
  </select>
</body>

</html>


Code
function changeFont(){
var drop = document.getElementById("fontToggle");
var fchoice = drop.options[drop.selectedIndex].value;
var family = "";

switch(fchoice){
	case "courier":
  	family = "Courier";
    break;
	case "comic":
  	family = "Comic Sans MS";
    break;
	case "roman":
  	family = "Times New Roman";
    break;
}

console.log(family);
document.body.style.fontFamily = family;
}


	Logged

| Find me on the Fediverse

Pages: [1]

Print

« previous next »

Vaguely similar topics! (3)

	An enemy from the game I'm trying to make Started by Grafo VolaveruntBoard ➶ ∙ Art Gallery	Replies: 3 Views: 1705	March 22, 2022 @61.42 by Grafo Volaverunt
	GUIDE: How to make a Website! Started by MelooonBoard ✁ ∙ Web Crafting	Replies: 1 Views: 2737	March 14, 2023 @665.66 by Inkerlink
	Make up dumb pomes! Started by MelooonBoard ✑ ∙ Writing & Stationery	Replies: 9 Views: 1681	April 14, 2024 @631.85 by kurohaato

Melonking.Net © Always and ever was!

SMF 2.0.19 | SMF © 2021, Simple Machines | Terms and Policies

Forum Guide | Rules | RSS | WAP | Mobile

MelonLand Badges and Other Melon Sites!

MelonLand Project!

Visit the MelonLand Forum!

Support the Forum

Visit Melonking.Net!

Visit the Gif Gallery!

TamaNOTchi