Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Greg Schudel
Greg Schudel
4,090 Points

Cannot get DOM to be minipulated

I cannot get this DOM to be minipulated. Using some new methods to experiment. Any ideas as to why?

1st paragraph works

2nd paragraph gives me an error

3rd paragraph wont work. Is the syntax wrong?

HTML FILE:

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript and the DOM</title>
    <link rel="stylesheet" href="css/style.css">

  </head>
  <body>
    <h1 id="myHeading">JavaScript and the DOM</h1>    
   <div>
     <p id="makeBigger" >This is me messing around</p>
     <p id="makeBold" >Trying to get this thing right</p>
     <p id="makeItalicBlue">Hope to get it soon</p>
    </div>

  <script src="app.js"></script>  
  </body>


</html>

JS FILE

const myList = document.getElementsByTagName('p');


for (let i = 0; i < myList.length; i += 1){

  document.getElementById('makeBigger').style.color = 'purple';
  myList[1].str.bold('makeBold');
  myList[2].str.italics('makeItalicBlue');


};

1 Answer

Katie Wood
Katie Wood
19,141 Points

Hi there,

It looks like you might be trying to use the Javascript string.italics() and string.bold() methods. I should mention that these methods are no longer standard and might not behave as expected in some browsers - they might still work, but I wouldn't depend on it. You also don't need the for loop in this case, since you're targeting each one individually anyway. That being said, the correct syntax for that would look like this, if you're curious:

const myList = document.getElementsByTagName('p');

myList[0].style.color = 'purple';
myList[1].innerHTML = myList[1].innerHTML.bold();
myList[2].innerHTML = myList[2].innerHTML.italics();

Since you need to be targeting a string before you call .bold() or .italics(), we need to do innerHTML - remember that what you selected are <p> elements, so what we want is the text inside them. In addition, calling .bold() or .italics() won't actually change the value - it returns the string with <b> or <i> tags around it, which means you still have to assign it to something, hence the "myList[1].innerHTML =" bit.

Now, I've told you that these two methods are deprecated (though they will still work a good bit of the time, probably), so what should you do instead? You can use .style the way you did with the first paragraph, and change the font properties that way:

const myList = document.getElementsByTagName('p');

myList[0].style.color = 'purple';
myList[1].style.fontWeight = 'bold';
myList[2].style.fontStyle = 'italic';

Hope this helps!

Greg Schudel
Greg Schudel
4,090 Points

I find the fact that those methods are deprecated strange. I got them from WC3 site: https://www.w3schools.com/jsref/jsref_bold.asp

Weird. Thanks!

Greg Schudel
Greg Schudel
4,090 Points
  • remember that what you selected are <p> elements, so what we want is the text inside them. In addition, calling .bold() or .italics() won't actually change the value - it returns the string with <b> or <i> tags around it, which means you still have to assign it to something, hence the "myList[1].innerHTML =" bit.

It interesting to learn that just because you change something in javascript doesn't mean you don't have to assign it. It's like changing and assigning are two different things. An interesting way to think about coding.

Katie Wood
Katie Wood
19,141 Points

I'm not sure why they're not standard anymore - the W3schools page does say they're no longer standard (first line under Definition/Usage), but it also indicates support in all browsers. I tend to use MDN, but it said something similar - my guess is that it was removed from the standard recently enough that it still works, but going forward it's safer to use methods that are still part of the standard to avoid things breaking in the future.

I agree that assignment is interesting to think about - it occurs in other languages as well. It seems to depend on what exactly the method does, and what it returns. For example, we have to assign in this case because the method takes the value, alters it, and returns the string, rather than actually changing the value in the DOM.