host_255 host_255 - 2 months ago 9
HTML Question

JavaScript attributes not writing to page

I am taking a JavaScript Tutorial (1 hr 18 min). Everything in my HTML file works except for writing the attributes on the page.

The following is an excerpt from my HTML file I am working on while following the course:

<!doctype html>
<html lan="en">
<head>
<meta charset="utf-8">

<style type="text/css">
body {font-size: 1.6em;}
.hidden {display:none;}
.show {display:inLine !important;}
button {
border: 2px solid black; background: #ESE4E2;
font-size: .5em; font-weight: bold; color: black;
padding: .8em 2em;
margin-top: .4em;
}
</style>

</head>
<body>

<div id="sampDiv"><p>Lorem ipsum dolor sit amet, <em>consetetur sadipscing</em> elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, <b>sed diam nonumy</b> eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo <em>duo dolores et</em> ea rebum. <b>Stet clita kasd gubergren</b>, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p></div>

<img src="ntt-logo.png" id="logo2" alt="NIT Logo" height="180" width="180"><br />

<button id="goToGoogle">Go to Google</button><br />

<button id="forwardPage">Forward Page</button><br />

<button id="backPage">Back Page</button></br />

<button id="reload">Reload Page</button><br />

<script>

document.write("Current URL : ", window.location.href, "<br />");

document.write("Current HOST : ", window.location.hostname, "<br />");

document.write("Current Path : ", window.location.pathname, "<br />");

document.getElementById('goToGoogle').onclick = function(event)
{window.location.href = "http://google.com"}

document.getElementById('forwardPage').onclick = function(event){
history.forward();
}

document.getElementById('backPage').onclick = function(event){
history.back();
}

/*var backTwo = history.go(-2); // go back 2
var forwardTwo = history.go(2)// go forward 2
console.log("backTwo : ",backTwo,"<br />");
console.log("forwardTwo : ",forwardTwo,"<br />");*/

document.getElementById('reload').onclick = function(event){
window.location.reload(true);
}

var pElements = document.getElementsByTagName('p');
pElements[1].style.backgroundColor = 'red';
pElements[2].style.backgroundColor = 'blue';

document.childNodes[1].style.backgroundColor = "#FAEBD7";

var sampDiv2 = document.getElementById('sampDiv');

sampDiv2.childNodes[0].style.backgroundColor = "#F0FFFF";

sampDiv2.childNodes[0].childNodes[1].style.backgroundColor = "#BFAFB2";

// JavaScript gets confused about text nodes or white space
// You can get rid of text nodes by eleminating white space or using child nodes
// If you deltee all of the white space, you can use lastChild and firstChild on any browser without issues; however, it is just as efficient targeting id's and nodetype

document.write("Node Type : ", sampDiv2.childNodes[0].childNodes[0].nodeType, "<br />");

document.write("Node Name : ", sampDiv2.childNodes[0].childNodes[0].nodeName, "<br />"); // gets #text for text node

document.write("Node Name : ", sampDiv2.childNodes[0].childNodes[1].nodeName, "<br />"); // gets EM for the <em></em> emphasize node type

// Nothing prints to the browser after this point.

var nttLogo2 = document.getElementById('logo2');

document.write("Logo has alt : ", nttlogo2.hasAttribute("alt"),"<br />");

nttLogo2.setAttribute("alt", "NTT Logo2");

document.write("Logo alt value : ", nttLogo2.getAttribute("alt"), "<br />");

var attribList = document.getElementById('logo2').attributes;

for(i=0;i<attribList.length;i++){
document.write("Attribute ", i, " : ", attribList[i].nodeName, " : ", attribList[i].nodeValue, "<br />");
}

</script>


</body>
</html>


I carefully examined the code and compared it to the video, but I cannot spot why the attributes are not writing to the page.

Please help me figure out why this is not printing.

Answer

There were couple of errors in your code.

First error at line number 60:

 var pElements = document.getElementsByTagName('p');
    pElements[1].style.backgroundColor = 'red';
    pElements[2].style.backgroundColor = 'blue';

Array index starts from 0, not from 1. So the correct code would be

var pElements = document.getElementsByTagName('p');
    pElements[0].style.backgroundColor = 'red';
    pElements[1].style.backgroundColor = 'blue';

Second : you declared variable name nttLogo2 but tried to access nttlogo2 at line 87.

Correct those errors, Page would work/write attributes as expected.