6 Replies - 664 Views - Last Post: 10 October 2013 - 04:13 AM

#1 my_antiHero  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 09-October 13

APPLYING TEXT FORMAT IN HTML with javascript/css

Posted 09 October 2013 - 02:22 PM

I'm having trouble applying text format changes in my HTML document that uses CSS and Javascript. I'm not exactly sure how to go about executing the format changes to the array element.. What I want this code to do is load the list of words when the button is pressed and randomly choose the formatting (color, typeface and size) for each word that is to be published. Any help is much appreciated! Here's what I have:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>WERD LIZT</title>

<!--<link href="wordListCSS.css" rel="stylesheet" type="text/css" />-->
<style>

<!--COLOR-->
<!--red-->
.1{color:#900;}
<!--orange-->
.2{color:#C60;}
<!--yellow-->
.3{color:#CC0;}
<!--green-->
.4{color:#9C3;}
<!--blue-->
.5{color:#09F;}
<!--indigo-->
.6{color:#93C;}
<!--violet-->
.7{color:#96C;}
<!--black-->
.8{color:#000;}

<!--TYPE-->
.9{font-family:Helvetica;}
.10{font-family:"Avenir Next Bold";}
.11{font-family:Copperplate;}
.12{font-family:Didot;}
.13{font-family:"Perpetua Italic";}
.14{font-family:"Trebuchet MS";}
.15{font-family:Georgia;}
.16{font-family:"Abraham Lincoln";}
.17{font-family:Farao;}
.18{font-family:"Futura Book";}
.19{font-family:"Maven Pro Light 200 Regular";}
.20{font_family:Scala-Italic;}
.21{font-family:"Tw Cen MT Bold";}

<!--size-->
.22{font-size:small;}
.23{font-size:medium;}
.24{font-size:large;}
.25{font-size:x-small;}
.26{font-size:x-large;}

</style>
</head>

<body>

<script>
var x;
var size=new Array();
var type=new Array();
var colour=new Array();
var werds = new Array();
werds[0] = "Bands";
werds[1] = "Concerts";
werds[2] = "Music";
werds[3] = "Entertainment";
werds[4] = "Artists";
werds[5] = "Venues";
werds[6] = "Sound";
werds[7] = "Dance";
werds[8] = "Genres";
werds[9] = "Scenes";
werds[10] = "Noise";
werds[11] = "Party";
werds[12] = "Guitars";
werds[13] = "Vocals";
werds[14] = "Bass";
werds[15] = "Drums";
werds[16] = "Keyboards";
werds[17] = "Synths";
werds[18] = "Merch";
werds[19] = "Albums";
werds[20] = "Records";
werds[21] = "Food";
werds[22] = "People";
werds[23] = "Adults";
werds[24] = "Teens";
werds[25] = "Profit";
werds[26] = "Alternative";
werds[27] = "Rock";
werds[28] = "Metal";
werds[29] = "Pop Punk";
werds[30] = "Record Labels";
werds[31] = "Autographs";
werds[32] = "Popularity";
werds[33] = "Opinions";
werds[34] = "Tastes";
werds[35] = "Alcohol";
werds[36] = "Drugs";
werds[37] = "Straight-Edge";
werds[38] = "Violence";
werds[39] = "Europe";
werds[40] = "America";
werds[41] = "Australia";
werds[42] = "Tour";
werds[43] = "Bright Complementary Colors";
werds[44] = "Muted Similar Colors";
werds[45] = "Clean Cut";
werds[46] = "Grunge";
werds[47] = "Disfigured";
werds[48] = "Monsters";
werds[49] = "Beasts";
werds[50] = "Demons";
werds[51] = "Women";
werds[52] = "Horns";
werds[53] = "Deer Skulls";
werds[54] = "Plague";
werds[55] = "Modern";
werds[56] = "Groupies";
werds[57] = "Fan-girls";
werds[58] = "Stage";
werds[59] = "Show";

function rand()
{
	
}

function output()
{
	//document.write("hi");
	for(var x=0;x<werds.length;x++)
	{ 
		colour=Math.floor((Math.random()*8)+1);
		type=Math.floor((Math.random()*12)+9);
		size=Math.floor((Math.random()*5)+22);
		
		
		
		//document.write("");
		//<p class="colour type size">werds[x] + " "</p>
		document.write(werds[x] + " ");
		//werds.splice(x,1);
		
	}
}


//document.getElementById("demo").innerHTML="";

</script>
<button onclick="output()">Try it</button>


</body>
</html>



Is This A Good Question/Topic? 0
  • +

Replies To: APPLYING TEXT FORMAT IN HTML with javascript/css

#2 DblAAssassin  Icon User is offline

  • D.I.C Head

Reputation: 32
  • View blog
  • Posts: 246
  • Joined: 11-May 13

Re: APPLYING TEXT FORMAT IN HTML with javascript/css

Posted 09 October 2013 - 05:36 PM

I don't understand the CSS, section of the code, the css, is not referring to any element or class, as it is implying with the period
Was This Post Helpful? 0
  • +
  • -

#3 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3716
  • View blog
  • Posts: 5,976
  • Joined: 08-June 10

Re: APPLYING TEXT FORMAT IN HTML with javascript/css

Posted 09 October 2013 - 06:11 PM

There are two things I'd advice. (At this point, anyway.)

  • Don't use document.write like that. In fact, try to avoid it as much as humanly possible. Instead, manipulate the document after it has been loaded through the DOM. For instance, if you want to add a piece of HTML to an element, do it using DOM methods like document.getElementById and by either creating DOM elements in code, or by manipulating the innerHTML of elements. (The latter tends to be simpler.)

    For example, so I wanted to add list of items to a UL element.
    // Find the list element by it's ID.
    var list = document.getElementById("theList");
    
    // A variable to hold the HTML string for all the
    // new items.
    var itemsHtml = "";
    
    // Lets add 10 items to the list.
    for (var i = 0; i < 10; ++i) {
        // Determine whether an "even" or "odd" class should be
        // added to the item.
        var className = (i % 2 == 0) ? "odd" : "even";
        
        // Create the HTML to be added to the list.
        var itemHtml = '<li class="' + className + '"><a href="#' + i + '">' + i + '</a></li>';
        
        // Add the new item to the list.
        itemsHtml += itemHtml;
    }
    
    // And finally add the HTML for the items to
    // the list.
    list.innerHTML += itemsHTML;
    
    


  • Use more descriptive names for your style classes. At the very least, add the type of style it's meant to be (color, type, size) to the class name, so it's not as cryptic in the source.
    <style>
    .color1 { color: red; }
    .color2 { color: green; }
    .color3 { color: blue; }
    </style>
    <script>
    var color = "color" + Math.floor(Math.random() * 3);
    </script>
    
    

Was This Post Helpful? 0
  • +
  • -

#4 my_antiHero  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 09-October 13

Re: APPLYING TEXT FORMAT IN HTML with javascript/css

Posted 09 October 2013 - 11:47 PM

I still don't understand how exactly you can apply styles to javascript code in an HTML document. I'm trying to randomly select a font color, size, and typeface. But I'm stuck at getting it to print out on the site page.. HELP PLEASE!

Here's a simplified version of what i'm trying to do..

<!DOCTYPE html>
<html>
<head>

<style>
p.a1{color:"red";}
p.a2{font-family:serif;}
p.a3{font-size:16px;}
</style>

</head>

<body>
<script>
function go(){
var colour=Math.floor((Math.random()*1)+1);
var type=Math.floor((Math.random()*1)+2);
var size=Math.floor((Math.random()*1)+3);

var x=("a"+colour);
var y=("a"+type);
var z=("a"+size);
alert(x+y+z);

//no idea what to do at this point here 
document.write(<p class="x y z">content</p>);

}
</script>

<button onclick="go()">press me</button>

</body>
</html>


Was This Post Helpful? 0
  • +
  • -

#5 jimzcoder  Icon User is offline

  • D.I.C Regular

Reputation: 54
  • View blog
  • Posts: 331
  • Joined: 14-November 12

Re: APPLYING TEXT FORMAT IN HTML with javascript/css

Posted 10 October 2013 - 12:54 AM

try separating your java script into .js file.
i've also encountered same problem while using inline js declaration.

pls keep us posted if it helped.

Happy coding.
Was This Post Helpful? 0
  • +
  • -

#6 andrewsw  Icon User is offline

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3325
  • View blog
  • Posts: 11,246
  • Joined: 12-December 12

Re: APPLYING TEXT FORMAT IN HTML with javascript/css

Posted 10 October 2013 - 03:01 AM

Do not use document.write. It will re-write the page and is, effectively, a deprecated feature.

Get a reference to a page element using getElementById() and use className to add, or change, this element's class(es):

var elem = document.getElementById("element_id");
elem.className = elem.className + " otherclass";
// or
elem.className = "classname";

This post has been edited by andrewsw: 10 October 2013 - 03:14 AM

Was This Post Helpful? 0
  • +
  • -

#7 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3716
  • View blog
  • Posts: 5,976
  • Joined: 08-June 10

Re: APPLYING TEXT FORMAT IN HTML with javascript/css

Posted 10 October 2013 - 04:13 AM

Duplicate threads merged. Please don't open multiple threads for the same question.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1