繁体   English   中英

为什么这个javascript与其他工作不一致?

[英]Why isn't this javascript with else if working?

对不起,我不能再具体了 - 我不知道问题出在哪里。 我是一个初学者,我已经添加了我知道的所有内容以添加到编码中,但是当我按下按钮时没有任何反应。 我不知道在这一点上是否是编码中的错误,或者语法错误导致它无法正常工作。

基本上我试图让这个函数“翻录它”来浏览杜威十进制数列表,更改其中的一些,并返回新的数字和一条消息说它已被更改。 还有一个标记为“无数字”的必须返回错误(不一定是警告框,同一空间中的消息也可以。)

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

<!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>

我看到一些问题:

  1. 您需要确保HTML中的id值与实际提供给getElementById匹配。 例如,你有document.getElementById('dewey'+ 100) ,它将寻找id值为"dewey100"的元素,但是我没有在你的标记中看到任何带有该id值的元素。

  2. 您似乎键入了小写字母l ,您打算键入数字1 (在for循环中)。

  3. 这段代码:

     var dewey=document.getElementById(i); dewey=parseFloat(dewey); 

    ...从i检索具有id的元素(到目前为止一直很好),然后尝试将该元素解析为浮点数。 DOM元素是对象,将它们传递给parseFloat将不会做任何有用的事情。 :-)在这种情况下,如果你试图解析元素的内容,你可以通过innerHTML属性或(在大多数浏览器上) innerText只获取文本。 所以也许:

     var dewey=document.getElementById(i); dewey=parseFloat(dewey.innerHTML); 
  4. 这条线

    document.getElementById('dewey'+ 100)

......本身就是一个“无所事事”的行:它查找元素,但随后不对它做任何事情。 我建议改变,但我不知道你要用这​​个元素做什么。 :-)


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

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

对于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的数量并存储在儿童中。 然后找到这个数组的长度并设置为'length'。 然后我从children数组中的每个子项中拉出innerHTML,然后解析它。 然后我运行条件并根据子项的值创建一个新值。

最后,该值存储在相关的子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)以获得您想要的内容。 您没有真正指定在答案中需要执行的每个条件,因此我只使用了原始代码。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM