diff --git a/javascript/exercises/dom.html b/javascript/exercises/dom.html index f65fe614..ce3f44e9 100644 --- a/javascript/exercises/dom.html +++ b/javascript/exercises/dom.html @@ -31,7 +31,7 @@ img.width = 400; img.src = 'http://www.logostage.com/logos/yahoo.GIF'; var button = document.getElementById('gbqfba'); -button.innerHTML = 'Yahoooo!'; +button.textContent = 'Yahoooo!'; @@ -49,11 +49,14 @@ <body> <h1>About Me</h1> - <ul> - <li>Nickname: <span id="nickname"></span> - <li>Favorites: <span id="favorites"></span> - <li>Hometown: <span id="hometown"></span> - </ul> + <dl> + <dt>Nickname:</dt> + <dd id="nickname"></dd> + <dt>Favorites:</dt> + <dd id="favorites"></dd> + <dt>Hometown:</dt> + <dd id="hometown"></dd> + </dl> </body> </html> @@ -61,7 +64,7 @@
  • Add a script tag to the bottom.
  • Change the body style so it has a font-family of "Arial, sans-serif".
  • Replace each of the spans (nickname, favorites, hometown) with your own information. -
  • Iterate through each li and change the class to "listitem". Add a style +
  • Iterate through each dt and change the class to "listitem". Add a style tag that sets a rule for "listitem" to make the color red.
  • Create a new img element and set its src attribute to a picture of you. Append that element to the page. @@ -83,18 +86,21 @@ <body> <h1>About Me</h1> - <ul> - <li>Nickname: <span id="nickname"></span> - <li>Favorites: <span id="favorites"></span> - <li>Hometown: <span id="hometown"></span> - </ul> + <dl> + <dt>Nickname:</dt> + <dd id="nickname"></dd> + <dt>Favorites:</dt> + <dd id="favorites"></dd> + <dt>Hometown:</dt> + <dd id="hometown"></dd> + </dl> <script> document.body.style.fontFamily = 'Arial, sans-serif'; - document.getElementById('nickname').innerHTML = 'Pamela Fox'; - document.getElementById('favorites').innerHTML = '27'; - document.getElementById('hometown').innerHTML = 'Pasadena, CA'; - var items = document.getElementsByTagName('li'); + document.getElementById('nickname').textContent = 'Pamela Fox'; + document.getElementById('favorites').textContent = '27'; + document.getElementById('hometown').textContent = 'Pasadena, CA'; + var items = document.getElementsByTagName('dt'); for (var i = 0; i < items.length; i++) { items[i].className = 'listitem'; } diff --git a/jsweb/exercises/dom_manipulation_advanced.html b/jsweb/exercises/dom_manipulation_advanced.html index a9dd0800..a8a1bfc7 100644 --- a/jsweb/exercises/dom_manipulation_advanced.html +++ b/jsweb/exercises/dom_manipulation_advanced.html @@ -125,11 +125,14 @@ <body> <h1>About Me</h1> - <ul> - <li>Nickname: <span id="nickname"></span> - <li>Favorites: <span id="favorites"></span> - <li>Hometown: <span id="hometown"></span> - </ul> + <dl> + <dt>Nickname:</dt> + <dd id="nickname"></dd> + <dt>Favorites:</dt> + <dd id="favorites"></dd> + <dt>Hometown:</dt> + <dd id="hometown"></dd> + </dl> </body> </html> @@ -137,7 +140,7 @@
  • Add a script tag to the bottom of the HTML body.
  • (In the JavaScript) Change the body tag's style so it has a font-family of "Arial, sans-serif".
  • (In the JavaScript) Replace each of the spans (nickname, favorites, hometown) with your own information.
  • -
  • Iterate through each li and change the class to "list-item".
  • +
  • Iterate through each dt and change the class to "list-item".
  • (In the HTML head) Add a style tag that sets a rule for .list-item to make the color red.
  • Create a new img element and set its src attribute to a picture of you. Append that element to the page.
  • @@ -159,18 +162,21 @@ <body> <h1>About Me</h1> - <ul> - <li>Nickname: <span id="nickname"></span> - <li>Favorites: <span id="favorites"></span> - <li>Hometown: <span id="hometown"></span> - </ul> + <dl> + <dt>Nickname:</dt> + <dd id="nickname"></dd> + <dt>Favorites:</dt> + <dd id="favorites"></dd> + <dt>Hometown:</dt> + <dd id="hometown"></dd> + </dl> <script> document.body.style.fontFamily = 'Arial, sans-serif'; document.getElementById('nickname').textContent = 'Princess Bubblegum'; document.getElementById('favorites').textContent = 'science, music, my candy subjects'; document.getElementById('hometown').textContent = 'Candy Kingdom'; - var items = document.getElementsByTagName('li'); + var items = document.getElementsByTagName('dt'); for (var i = 0; i < items.length; i++) { items[i].className = 'list-item'; }