Jump to content
Please Use CODE Tags

JavaScript help

Cookiecrumbles222
By Cookiecrumbles222
in Programming
 Share
Posted 
<!DOCTYPE html >
<html>
<head>
<title>DOM CSS</title>
 
<script>
    
function FormantPage(){
    var backcolor = document.getElementById("BGColor").value;
    var tcolor = document.getElementById("FGColor").value;
    var tface = document.getElementById("BGColor").value;
    var tsize = document.getElementById("Size").value;
    var tstyle = document.getElementById("BGColor").value;
    
    document.getElementById("hiii").style.backgroundColor = backcolor;
    
    document.getElementById("hiii").style.color = tcolor;
    
    document.getElementById("hiii").style.fontFamily = backcolor;
    
    document.getElementById("hiii").style.fontSize = tsize;
    
    document.getElementById("hiii").style.fontStyle = backcolor;
}    

</script>    
    
    
</head>
<body id="hiii">

<p id="hiiii">
Background Color:

<select id="BGColor">

<option value="#FFFFFF">White</option>

<option value="#000000">Black</option>

<option value="#FF0000">Red</option>

<option value="#008800">Green</option>

<option value="#0000FF">Blue</option>

<option value="#F08080">Light Coral</option>

<option value="#ADD8E6">Light Blue</option>

<option value="#90EE90">Light Green</option>

</select>

<br/>

Foreground Color:

<select id="FGColor">

<option value="#000000">Black</option>

<option value="#FFFFFF">White</option>

<option value="#FF0000">Red</option>

<option value="#008800">Green</option>

<option value="#0000FF">Blue</option>

<option value="#F08080">Light Coral</option>

<option value="#ADD8E6">Light Blue</option>

<option value="#90EE90">Light Green</option>

</select>

<br/><br/>

Text Face:<br/>

<input type="radio" id="Face0" name="Face" value="times new roman" checked="checked" />Times New Roman<br/>

<input type="radio" id="Face1" name="Face" value="arial"/>Arial<br/>

<input type="radio" id="Face2" name="Face" value="courier new"/>Courier New<br/>

<input type="radio" id="Face3" name="Face" value="comic sans ms"/>Comic Sans MS<br/>

<input type="radio" id="Face4" name="Face" value="verdana"/>Verdana<br/>

<br/>

Text Size:

<select id="Size">

<option value="9pt">9 pt</option>

<option value="10pt">10 pt</option>

<option value="12pt" selected="selected">12 pt</option>

<option value="14pt">14 pt</option>

<option value="16pt">16 pt</option>

</select>

<br/><br/>

Text Style:<br/>

<input type="checkbox" id="Style0" />Bold

<input type="checkbox" id="Style1" />Italic

<input type="checkbox" id="Style2" />Underline<br/>

<br/>

<input type="button" value="Format" onclick = "FormantPage()" />
</p>

  
</body>
</html>

Hey, guys, I'm making a website to test out things and I'm trying to make it so you can change the page by selecting things with both radio buttons, dropdowns, and checkboxes. I've got it to work with the drop downs but how would I do it with the other types? Thanks for any help! pic of the site --> https://gyazo.com/a3b90e6ca7eee6fe68dd1325714e232a

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

For Radios, you need to get the value of the checked element:

 

e.g. 

document.querySelector('input[name="Face"]:checked').value;

 

Link to comment
Share on other sites
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing Programming

×