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>
2 answers
solution1
2 2013-10-24 15:39:24
I see a few issues:
You need to ensure that the
idvalues in the HTML match what you actually feed intogetElementById. For instance, you havedocument.getElementById('dewey'+ 100)which will look for an element with theidvalue"dewey100", but I don't see any element in your markup with thatidvalue.You seem to have typed the lower-case letter
lwhere you meant to type the digit1(in yourforloop).This code:
var dewey=document.getElementById(i); dewey=parseFloat(dewey);...retrieves the element with the
idfromi(so far so good), but then tries to parse the element as a floating-point number. DOM elements are objects, passing them intoparseFloatwon't do anything useful. :-) In this case, if you're trying to parse the content of the element, you can get that via theinnerHTMLproperty or (on most browers)innerTextfor 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.
solution2
1 2013-10-24 15:50:41
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.