Menu
I am following a book to learn JavaScript, and it appears to have coding errors as what I am following does not appear to work. Here's what I have:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Examples of moving around in the DOM using native JavaScript methods</title>
<meta charset="UTF-8">
<!-- CSS Stylesheet -->
<link rel="stylesheet" href="css/show.css">
</head>
<body>
<!-- Let's get the parent element for the target node and add a class of "active" to it -->
<ul id="nav">
<li><a href="/" id="home">Home</a></li>
<li><a href="/about" id="about">About Us</a></li>
<li><a href="/contact" id="contact">Contact Us</a></li>
</ul>
<input type="button" onclick="targetClass()" value="Target the Class"/>
<input type="button" onclick="prevNextSibling()" value="Target Next and Previous Sibling"/>
<script src="js/js.js"></script>
</body>
</html>
JavaScript:
// This block of JavaScript obtains the parent element
// target the "about" link and apply a class to its parent list item
function targetClass()
{
document.getElementById("about").parentNode.setAttribute("class", "active");
}
// This block of code adds a Class to Previous and Next Sibling Nodes
function prevNextSibling()
{
// get "about" parent, then its previous sibling and apply a class
document.getElementById("about").parentNode.previousSibling.setAttribute("class", "previous");
// get "about" parent, then its next sibling and apply a class
document.getElementById("about").parentNode.nextSibling.setAttribute("class", "next");
}
As per the book the output of the generated HTML I should be getting is:
<ul id="nav">
<li class=" previous" ><a href="/" id="home">Home</a></li>
<li class=" active" ><a href="/about" id="about">About Us</a></li>
<li class=" next" ><a href="/contact" id="contact">Contact Us</a></li>
</ul>
But when I click on my text boxes nothing is happening.
How can I fix this problem?
943
Some browsers insert white spaces in between DOM elements
Read the Notes section in the following link
https://developer.mozilla.org/en-US/docs/Web/API/Node.nextSibling
The solution is to use prevElementSibling and nextElementSibling. This selects the next sibling which is of the same type
This Works: http://jsfiddle.net/E2k6t/1/
function targetClass()
{
document.getElementById("about").parentNode.setAttribute("class", "active");
}
function prevNextSibling()
{
document.getElementById("about").parentNode.previousElementSibling.setAttribute("class", "previous");
document.getElementById("about").parentNode.nextElementSibling.setAttribute("class", "next");
}
It's not recommended to use inline javascript in your HTML code (onclick="targetClass()") while you are doing actual development - Discussions here and here. Use Event Listeners
79
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
