如果工作，为什么这个 javascript 不能与 else 一起使用？答案

【问题标题】：Why isn't this javascript with else if working?如果工作，为什么这个 javascript 不能与 else 一起使用？
【发布时间】：2013-10-24 15:36:53
【问题描述】：

很抱歉，我不能更具体 - 我不知道问题出在哪里。我是一个完全的初学者，我已经添加了我所知道的所有内容以添加到编码中，但是当我按下按钮时没有任何反应。目前我不知道这是编码中的错误，还是导致它无法工作的语法错误。

基本上，我试图让这个函数“Rip It”遍历杜威十进制数字列表，更改其中的一些，然后返回新数字和一条消息，说明它已被更改。还有一个标有“无编号”的，必须返回错误（不一定是警告框，在同一个空格中的消息是可以的。）

我是一个初学者，不是特别擅长这个东西，所以请温柔！非常感谢！

<!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 ID 不得以数字开头。 getElementById('dewey' + 100) 应该怎么做？
@ComFreek：他们可以在 HTML 中。只有在 CSS id 选择器中，才不允许以数字开头。规则：HTML | CSS
@T.J.Crowder 感谢您的更正。如果有人感兴趣，这里是定义“标识符”的官方规范：w3.org/html/wg/drafts/html/master/dom.html#the-id-attribute
欢迎来到 SO。你能澄清一下你想要达到什么目的吗？我对 "dewey"+100 感到困惑，因为该 ID 不存在（或者您的数字列表不是最终的）。
@Shomz 谢谢-我从其他人的 cmets 中意识到，这将使元素“dewey100”不会像我一样将 100 添加到 100 到 200 之间的任何数字（由“dewey”标识的数字）试图做。任何想法如何做到这一点？谢谢！

标签： javascript if-statement parsefloat

【解决方案1】：

我发现了一些问题：

您需要确保 HTML 中的 id 值与您实际输入 getElementById 的值相匹配。例如，您有document.getElementById('dewey'+ 100)，它将查找具有id 值"dewey100" 的元素，但我在您的标记中没有看到具有该id 值的任何元素。
您似乎输入了小写字母 l，而您的本意是输入数字 1（在您的 for 循环中）。
这段代码：
```
var dewey=document.getElementById(i);
dewey=parseFloat(dewey);
```
...从i 检索带有id 的元素（到目前为止一切顺利），但随后尝试将元素解析为浮点数。 DOM 元素是对象，将它们传递给parseFloat 不会做任何有用的事情。 :-) 在这种情况下，如果您尝试解析元素的内容，您可以通过 innerHTML 属性或（在大多数浏览器上）innerText 仅获取文本。所以也许：
```
var dewey=document.getElementById(i);
dewey=parseFloat(dewey.innerHTML);
```
线

document.getElementById('dewey'+ 100)

...本身就是一个“什么都不做”的行：它查找元素，但随后不做任何事情。我建议进行更改，但我不知道您要如何处理该元素。 :-)

您可能不知道它（是新的），但您的浏览器几乎肯定有一个非常强大的工具，称为“调试器”。查看菜单，但在大多数浏览器中，您可以使用 F12 键访问“开发工具”。然后您转到结果窗口中的“源”或“代码”选项卡，这将显示您的代码。如果单击一行的左侧，在大多数设置了断点的调试器中，该断点将在该点停止代码，以便您查看发生了什么。花一些时间学习使用该工具是值得的，这样您就可以实际观察您的代码运行。

【讨论】：

好的，谢谢！我做了第一件事。我只是不擅长javascript，你能更具体地说明最后一句话的意思吗？我需要改变什么？谢谢
@Uni：实际上，因为你的代码都在一个点击调用的函数中（我一开始没有看到这个函数），我原来的第一段是错误的，所以我删除了它。
@TJ: RE: 1) and 4) 那是我试图，例如第一个，将 100 加到 100 到 200 之间的所有数字上，依此类推。如何制作我提取的一组数字（例如，100 到 200 之间的所有杜威）数学数字，以便我可以向它们添加或减去某些东西（例如 +100）并让它返回答案（例如 300）？你是对的，这主要是目前的问题。 2) 哎呀！谢谢！更正（见上面的 Darion） 3）我改变了 var dewey 和 parseFloat 部分 - 谢谢！回复：调试器 - 是的，我听说过这个，不知道如何使用它或它在哪里。我正在使用 Firefox ...
...我在哪里可以找到 Firefox 中的调试器以及如何打开它？
@Uni: 工具 |网页开发者 |调试器。还有一个名为 FireBug 的附加组件，它具有很好的功能。事实上，多年来，Mozilla 并没有费心在 Firefox 中安装调试器，因为 FireBug 就在那里。然后FireBug项目的负责人忙于其他事情，所以他们终于解决了这个问题。就个人而言，我推荐使用 Chrome 而不是 Firefox 进行开发。

【解决方案2】：

正在编辑我的旧答案...

对于您的 HTML，我删除了列表项中的 id，因为您可以找到更好的方法来遍历它们。这样，当您要添加 li 时，您不必添加新的 id。见下文：

<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()">

对于您的 javascript，我找到了 li 的数量并存储在 children 中。然后找到这个数组的长度并设置为'length'。然后我从 children 数组中的每个子项中提取 innerHTML 并对其进行 parseFloat 处理。然后我运行你的条件并根据孩子的价值创造了一个新的价值。

最后将该值存储在有问题的子 li 项中。

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;

  }

}

您可能需要处理条件（if/else）才能得到您想要的。您并没有真正在答案中指定每个条件需要做什么，所以我只是使用了您的原始代码。

【讨论】：

感谢您让我知道关于 1/l 的事情 - 我误读了有人为我写下的 L，当时它是 1。这很有帮助！关于我要循环的第二部分，请参阅@TJ。谢谢！！