Why isn't this javascript with else if working?

Question

I'm sorry I can't be any more specific - I have no idea where the problem is. I'm a total beginner, and I've added everything I know to add to the coding, but nothing happens when I push the button. I don't know at this point if it's an error in the coding, or a syntax error that makes it not work.

Basically I am trying to get this function "Rip It" to go through the list of Dewey decimal numbers, change some of them, and return the new number and a message saying it's been changed. There is also one labeled "no number" that has to return an error (not necessarily an alert box, a message in the same space is okay.)

I am a total beginner and not particularly good at this stuff, so please be gentle! Many thanks!

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function RipIt()
{
for (var i = l; i <=10 i=i+l)
{
var dewey=document.getElementById(i);
dewey=parseFloat(dewey);

if (dewey >= 100 && 200 >= dewey)
    {
    document.getElementById('dewey'+ 100)
    }
else if (dewey >= 400 && 500 >= dewey)
    {
    document.getElementById('dewey'+ 200)
    }
else if (dewey >= 850 && 900 >= dewey)
    {
    document.getElementById('dewey'-100)
    }
else if (dewey >= 600 && 650 >= dewey)
    {
    document.getElementById('dewey'+17)
    }
}
}
</script>       
</head> 
<body>

<h4>Records to Change</h4>
<ul id="myList">
  <li id ="1">101.33</li>
  <li id = "2">600.01</li>
  <li id = "3">001.11</li>
<li id = "4">050.02</li>
  <li id = "5">199.52</li>
  <li id = "6">400.27</li>
<li id = "7">401.73</li>
  <li id = "8">404.98</li>
  <li id = "9">no number</li>
<li id = "10">850.68</li>
  <li id = "11">853.88</li>
  <li id = "12">407.8</li>
  <li id = "13">878.22</li>
  <li id = "14">175.93</li>
  <li id = "15">175.9</li>
<li id = "16">176.11</li>
  <li id = "17">190.97</li>
  <li id = "18">90.01</li>
<li id = "19">191.001</li>
  <li id = "20">600.95</li>
  <li id = "21">602.81</li>
<li id = "22">604.14</li>
  <li id = "23">701.31</li>
  <li id = "24">606.44</li>
  <li id = "25">141.77</li>

</ul>
<b> </b>
<input type="button" value="Click To Run" onclick="RipIt()">
<!-- <input type="button" value="Click Here" onClick="showAlert();"> -->

</body>
</html>

AFAIK IDs must not start with a digit. What should `getElementById('dewey' + 100)` do? — ComFreek, Oct 24 '13 at 15:38
@ComFreek: They can in HTML. It's only in CSS id selectors that starting with a digit is disallowed. Rules: [HTML](http://www.w3.org/TR/html5/elements.html#the-id-attribute) | [CSS](http://www.w3.org/TR/CSS21/syndata.html#value-def-identifier) — T.J. Crowder, Oct 24 '13 at 15:40
@T.J.Crowder Thanks for the correction. If anyone is interested, here is the official spec which defines an 'identifier': http://www.w3.org/html/wg/drafts/html/master/dom.html#the-id-attribute — ComFreek, Oct 24 '13 at 15:42
Welcome to SO. Can you clarify a bit what are you trying to achieve? I'm confused with `"dewey"+100` because that ID doesn't exist (or your list of numbers here is not final). — Shomz, Oct 24 '13 at 15:42
@Shomz Thank you - I realized from others' comments that that will make element "dewey100" not add 100 to whatever number is between 100 and 200, (the number identified by "dewey") like I was trying to do. Any ideas how to do this? thank you! — Uni, Oct 24 '13 at 19:15
`"dewey"+100` gives you `"dewey100"` while, if you have `var dewey = 100;`, `dewey+100` will give you `200`... So in these cases, you're looking for a DOM element with id `dewey100` and `200`, respectively, which don't exist. Try describing what you expect to happen. — Shomz, Oct 24 '13 at 20:14

T.J. Crowder · Answer 1 · 2013-10-24T15:47:19.637

I see a few issues:

You need to ensure that the id values in the HTML match what you actually feed into getElementById. For instance, you have document.getElementById('dewey'+ 100) which will look for an element with the id value "dewey100", but I don't see any element in your markup with that id value.
You seem to have typed the lower-case letter l where you meant to type the digit 1 (in your for loop).
This code:
```
var dewey=document.getElementById(i);
dewey=parseFloat(dewey);
```
...retrieves the element with the id from i (so far so good), but then tries to parse the element as a floating-point number. DOM elements are objects, passing them into parseFloat won't do anything useful. :-) In this case, if you're trying to parse the content of the element, you can get that via the innerHTML property or (on most browers) innerText for just the text. So perhaps:
```
var dewey=document.getElementById(i);
dewey=parseFloat(dewey.innerHTML);
```
The line

document.getElementById('dewey'+ 100)

...by itself is a "do nothing" line: It looks up the element, but then doesn't do anything with it. I'd suggest a change, but I have no idea what you're trying to do with that element. :-)

You may not be aware of it (being new), but your browser almost certainly has quite a powerful tool in it called a "debugger". Look on the menus, but in most browsers you can access the "Dev Tools" using the F12 key. Then you go to the "Source" or "Code" tab in the resulting window, which will show you your code. If you click to the left of a line, in most debuggers that sets a breakpoint which will stop the code in its tracks at that point so you can see what's going on. It's worth spending some time learning to use that tool so you can actually watch your code run.

Okay thank you! I did the first thing. I am just not good at javascript, can you be more specific about what you mean by the last sentence? What do I need to change? Thanks — Uni, Oct 24 '13 at 15:43
@Uni: Actually, because your code was all in a function that was called by a click (I didn't see the function at first), my original first paragraph was wrong so I've removed it. — T.J. Crowder, Oct 24 '13 at 15:44
@TJ: RE: 1) and 4) That was me attempting to, for the first one for example, add 100 to all numbers between 100 and 200, and so on. How do I make the set of numbers I've pulled (e.g. all dewey between 100 and 200) math numbers so I can add or subtract something (e.g. +100) to them and have it return the answer (e.g. 300)? You're right, that's mostly the problem at this point. 2) Oops! Thank you! Corrected (see Darion above) 3)I changed the var dewey and parseFloat parts - thank you! Re: debugger - Yes, I've heard of this, no idea how to use it or where it is. I am using Firefox ... — Uni, Oct 24 '13 at 19:12
... where do I find the debugger in Firefox and how do I turn it on? — Uni, Oct 24 '13 at 19:13
@Uni: Tools | Web Developer | Debugger. There's also an add-on, called FireBug, that has nice features. In fact, for years, Mozilla didn't bother putting a debugger in Firefox because FireBug was out there. Then the lead of the FireBug project got busy with other things, so they finally got around to it. Personally, I recommend Chrome over Firefox for development. — T.J. Crowder, Oct 24 '13 at 21:35

keepitreal · Answer 2 · 2013-10-24T20:45:43.803

Editing my old answer...

For your HTML, I removed the id's in the list items since you can find a better way to iterate through them. This way you don't have to add a new id when you want to add an li. See below:

<h4>Records to Change</h4>

<ul id="myList">
    <li>101.33</li>
    <li>600.01</li>
    <li>001.11</li>
    <li>050.02</li>
    <li>199.52</li>
    <li>400.27</li>
    <li>401.73</li>
    <li>404.98</li>
    <li>no number</li>
    <li>850.68</li>
    <li>853.88</li>
    <li>407.8</li>
    <li>878.22</li>
    <li>175.93</li>
    <li>175.9</li>
    <li>176.11</li>
    <li>190.97</li>
    <li>90.01</li>
    <li>191.001</li>
    <li>600.95</li>
    <li>602.81</li>
    <li>604.14</li>
    <li>701.31</li>
    <li>606.44</li>
    <li>141.77</li>
</ul>

<input type="button" value="Click To Run" onclick="RipIt()">

For your javascript, I found the number of li's and stored in children. Then found the length of this array and set to 'length'. Then I pulled the innerHTML from each child item in the children array and parseFloat'ed it. Then I ran your conditional and created a new value based on the child's value.

Finally that value is stored in the children li item in question.

the JavaScript:

function RipIt() {
   var children = document.getElementById("myList").getElementsByTagName("li"),
       length = children.length;

  for (var i = 0; i < length; i++) {

    var child = children[i].innerHTML,
        newValue;
    child = parseFloat(child);

    if (child >= 100 && 200 >= child) {
      newValue = child + 100;
    } else if (child >= 400 && 500 >= child) {
      newValue = child + 200;
    } else if (child >= 850 && 900 >= child) {
      newValue = child - 100;
    } else if (child >= 600 && 650 >= child) {
      newValue = child + 17;
    }

     children[i].innerHTML = newValue;

  }

}

You will probably need to work on your conditionals (if/else) to get exactly what you want. You didn't really specify what each condition needed to do in your answer so I just used your original code.

Thanks for letting me know about that 1/l thing - I misread what someone wrote down for me as an L when it was a 1. That helps a lot! For the second part about what I am trying to loop, see @TJ. Thank you!! — Uni, Oct 24 '13 at 19:05

Why isn't this javascript with else if working?

2 Answers2