Question

I am trying to create a navigation bar with rounded corners for the first and last children (using an unordered list). I want to use the onclick javascript function and dynamically assign rounded corners within javascript. Here is my code which I tried. Can anyone please point me to the reason and/or suggest a solution or resource? Thanks a lot in advance.

HTML:

                   <nav>
                        <ul id="navBar">
                            <li><a href="#" title="View"><div class="menu" onClick="select(this)">View</div></a></li>
                            <li><a href="#" title="Duplicate"><div class="menu" onClick="select(this)">Duplicate</div></a></li>
                            <li><a href="#" title="Edit"><div class="menu" onClick="select(this)">Edit</div></a></li>
                            <li><a href="#" title="Delete"><div class="menu" onClick="select(this)">Delete</div></a></li>
                    </ul>
                  </nav>

Javascript:

  document.getElementById('ul#navBar li:first-child').style.MozBorderRadiusTopleft = '13px';
document.getElementById('ul#navBar li:first-child').style.MozBorderRadiusBottomleft = '13px';
document.getElementById('ul#navBar li:last-child').style.MozBorderRadiusTopRight = '13px';
document.getElementById('ul#navBar li:last-child').style.MozBorderRadiusBottomRight = '13px';

Answer 1

CSS for your stylesheet:

.is-rounded li:first-child {
    -moz-border-radius: 13px 0 0 13px;
    -webkit-border-radius: 13px 0 0 13px;
    border-radius: 13px 0 0 13px;
}

.is-rounded li:last-child {
    -moz-border-radius: 0 13px 13px 0;
    -webkit-border-radius: 0 13px 13px 0;
    border-radius: 0 13px 13px 0;
}

Javascript:

function makeRounded(e) {
   document.querySelector('#navBar').className += 'is-rounded';
}

document.querySelector('#el').addEventListener('click', makeRounded, false);

This assumes than an element with the id of “el” is the element that, when clicked, triggers the whole thing.

See example: http://jsfiddle.net/cgrFe/3/

You seem to know very little about this. A few books to get you started: http://domscripting.com/book/ and http://domenlightenment.com/ . The last of the two is fairly new, but must be good.