CODEWITHSUNDEEP
javascriptdomdom-events
Jhonnatan Gonzalez Rodriguez
Jhonnatan Gonzalez Rodriguez

Reputation: 573

Changing paragraph style using childNodes in JavaScript

I'm new at JavaScript. I have an html document and I want to change to fontsize of paragraphs that are inside a div but I'm having a problem. I got this error in the console:

Uncaught TypeError: Cannot set property 'fontSize' of undefined codigo.js:5

This is my html:

<!DOCTYPE html>
<html leng="es">
<head>
<meta charset="UTF-8">
<title>Mi ejercicio DHTML</title>
<link rel="stylesheet" type="text/css" href="css/estilos.css">
<script type="text/javascript" src="js/codigo.js" ></script>
</head>
<body>
<div id="parrafos">
<p>
    Your bones don't break, mine do. That's clear. Your cells react to bacteria 
</p>
<p>
    Your bones don't break, mine do. That's clear. Your cells react to bacteria 
</p>
<p>
    Your bones don't break, mine do. That's clear. Your cells react to bacteria 
</p>
<p>
    Your bones don't break, mine do. That's clear. Your cells react to bacteria 
</p>
<p>
    Your bones don't break, mine do. That's clear. Your cells react to bacteria 
</p>
</div>
</body>
</html>

This is my js:

window.addEventListener('load', inicio); 

function inicio(){
var parrafos = document.getElementById('parrafos');
parrafos.childNodes[0].style.fontSize='10px';
}

What I want is by using the childNodes on the div called parrafos change the style of every paragraph by accessing its index parrafos.childNodes[2].style.... etc etc

[EDIT]

I ended with this code:

window.addEventListener('load', inicio); 

function inicio(){
var parrafos = document.getElementById('parrafos');
parrafos.childNodes[1].style.fontSize='1.5em';
parrafos.childNodes[3].style.fontSize='1.3em';
parrafos.childNodes[5].style.fontSize='.5em';
parrafos.childNodes[7].style.fontSize='1em';
parrafos.childNodes[9].style.fontSize='.2em';

}

and I found that because of space en html documents it doesn't follows a consecutive order it seems weird because I thought it should go consecutive.

Upvotes: 1

Views: 3531

Answers (3)

Nate
Nate

Reputation: 661

In your example you should set the fontSize to '10pt' instead of '10px' (or '1em') see: http://jsfiddle.net/K9Uhn

var parrafos = document.getElementById('parrafos');
parrafos.childNodes[1].style.fontSize='10pt';

Also, You should also look into using jQuery for this. It would save you a ton of headaches as it handles the element iteration and dom issues itself. For example, the jQuery code to change all the font sizes for the above example would be

$("#parrafos").css("font-size", "10pt");

No need to do the for loop yourself, jQuery handles all this. And, it's compatible with all browsers (something you will find is a huge plus): www.jquery.com

Upvotes: 1

Alex Wayne
Alex Wayne

Reputation: 187134

Tweaking the styles like this on a per-element basis is not a good idea. Stylesheets and element clases are your friend!

Please think about the next guy who picks up your code. They need to change the font size. They look in the stylesheet, where you would expect to find that value, and it's not there. After a few hours they find it in the JavaScript, where you wouldn't expect it. Then they get off work, drink heavily and botch about your code to their friends because of how hard you just made their day.

Maintanability is the thing that minimizes how often this scenario occurs.

So instead, how about you give your body class a tag, and have some styles that change font sizes based on that?

/* Stylesheet */
p {
  font-size: 16px
}

body.small p {
  font-size: 10px
}

Now your JS function that takes the action simply becomes this:

// Javascript
function inicio(){
    document.body.className = 'small';
}

Which is far easier to manage.

See it work here: http://jsfiddle.net/s6BAf/

In general, dont use inline styles in your HTML, or set CSS values directly in your javascript if you can avoid it. Instead, manipulate the classes of elements on your page, and let your stylesheet do what it does: style your content.

Upvotes: 0

javakorr
javakorr

Reputation: 76

Try this: 

window.addEventListener('load', inicio); 

function inicio(){
var parrafos = document.getElementById('parrafos');

for (var i=0; i<parrafos.children.length; i++) {
    parrafos.children[i].style.fontSize = '10px';
}
}

Upvotes: 1

Related Questions