Member Avatar for kuri88

I need to ask the user for which layout they prefer and then change the stylesheet attributes according to that. Below is what I have done so far with prompting the user for their preferred layout. I'm not sure how to change the attributes for the different layouts like if i need a if else or different functions. I was thinking to have certain attributes already in the style up in the head tag. For an example if they chose the modern layout it would just change the page to the attributes listed and if they wanted classic then I could change the style attributes. Any suggestions?

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type = "text/css">
</style>

<script type = "text/javascript">
	function start ()
	{
		var input = prompt( " Enter your favorite layout: modern or classic " );
	}
</script>
</head>

<body id = "body" onload = "start ()">
<h1> Lab Excerise 8 </h1>
<p> This is some sample text. </p>
</body>
</html>
  • 2 Contributors
  • 1 Reply
  • 72 Views
  • 14 Hours Discussion Span
  • Latest Post Latest Post by Amr87
Member Avatar for Amr87 
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<!--  use External Stylesheet instead of internal one
	Also , specify two different external stylesheet , named as classic.css & modern.css -->
<link rel="stylesheet" type="text/css" href="#" media="all"/>
     
    <script type = "text/javascript">
    function start ()
    {
    var input = prompt( " Enter your favorite layout: modern or classic " );
	var getStyle=document.getElementsByTagName('link')[0]; // this will target the first link tag (index=0 ) if you are using another link tag before it , make sure to set its index
	getStyle.setAttribute("href" ,input + ".css") ;
	// Note that the input of the user will determine the name of stylesheet so always remember to name the stylesheets according to the options allowed to the user to insert.
    }
    </script>
    </head>
     
    <body id = "body" onload = "start ()">
    <h1> Lab Excerise 8 </h1>
    <p> This is some sample text. </p>
    </body>
    </html>

Please Read the comments in the code , hope that will give you a head start of what you wanna do exactly

Edited by Amr87 because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.