unable to understand getElementById('?')

waydown · Jul 3, 2011

Hi,
I'm new to Javascript, so please bear with me if my question seems silly. I found code on a website part of which is shown below:

Code:

<script type="text/javascript">
var selectedTab = 0;

function tabclick(n) {
  if (n === selectedTab) return; // nothing to do.
  curvyCorners.setWinResize(false); // for IE, block spurious window resize events 
  var li = document.getElementById('tab' + selectedTab);
  curvyCorners.adjust(li, 'className', ''); // Remove the 'select' style
  li = document.getElementById('page' + selectedTab);
  li.style.display = 'none';                // hide the currently selected sub-page
  li = document.getElementById('page' + n);
  li.style.display = 'block';               // show the new sub-page
  li = document.getElementById('tab' + n);  // get the new (clicked) tab
  curvyCorners.adjust(li, 'className', 'select'); // and update its style
  curvyCorners.redraw();        // Redraw all elements with className curvyRedraw
  selectedTab = n;              // store for future reference
  curvyCorners.setWinResize(true); // OK, allow genuine resize events now
}

curvyCorners.addEvent(window, 'resize', new Function('curvyCorners.handleWinResize();'));
</script>

<body>
.........
<div id="tabrow">
 <ul>
  <li id="tab0" onclick="tabclick(0);" class="select curvyRedraw">Intro</li>
  <li id="tab1" onclick="tabclick(1);" class="curvyRedraw">RepeatX</li> ............
</body>

What I find hard to understand is how can tab0 be passed to getElementById('tab'). I thought the id had to be "tab" and not tab0, tab1, etc. Further, what is the purpose of class="select curvyRedraw", what does it actually do. I would be very grateful for all help.

PcolaSteve · Jul 3, 2011

Sorry, can't really help. I just locked up on the "===" part of the code. I am familiar with == and =, but I don't recall seeing a === before; then I could be wrong too.

What is the code meant to do exactly?

The shortest distance between two points is NOT a straight line; it's a worm hole!

vacunita · Jul 3, 2011

1. The ID of each tab is the string "tab" and a number starting from 0. So the tabclick() function gets the tab number and then uses it in the getElementById function to generate the tab's complete ID by concatenating the string "tab" and the passed number.
"tab" + 0 = "tab0"
"tab" + 1 = "tab1"

etc...
Its a little pointless really to pass a number from the clicked tab rather than an actual reference to the clicked tab but its still very much possible.

2. class-"select curvyRedraw" is just assigning 2 classes to the <li>

Whatever stylings those classes have will both be applied to the element. For instance:

Code:

.select{
width:300px;
}

.curveRedrawy{
background-color:gray;
}

The element would be 300px wide, and have a gray background.

@PcolaSteve:

The === is for strict comparisons, of type and value.
== only compares values.
= assigns values

http://www.w3schools.com/js/js_comparisons.asp

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

PcolaSteve · Jul 4, 2011

Comparisons....I forgot, but then again I have never used them. Thanks for the refresher!

The shortest distance between two points is NOT a straight line; it's a worm hole!

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

unable to understand getElementById('?')

waydown

Programmer

PcolaSteve

Programmer

vacunita

Programmer

PcolaSteve

Programmer

Similar threads

Part and Inventory Search

Sponsor