为什么我的脚本没有在无序列表中添加整数

Why is my script is not adding the integer inside the unordered list?

本文关键字：列表 添加 整数 无序 我的 脚本 为什么      更新时间：2023-09-26

我遇到了类似的问题，我的代码如下：

<!doctype html>
<html>
    <title> this is a test page</title>
    <meta charset="utf-8">
    <head>
      <script>
        function test(){
            var unorderedList = document.getElementById('list');
            var noList = unorderedList.getElementsByTagName('li');
            var number; 
            alert("this is a test : "+noList[0].value);
            for( int i=0; i<noList.length; i++){
                number = number + noList[i].value;}
            console.log(number);};    
        window.onload=test;         
     </script>
   </head>
   <body>  
     <ul id="list">
        <li> 2</li>
       <li> 3</li>
     </ul>   
   </body>

我不能把"ul"中的数字加起来，你能帮我吗？

您要找的不是value，而是innerHTML。

所以，与其说

number = number + noList[i].value

你应该说

number = number + noList[i].innerHTML

此外，在你尝试对数字进行整数加法之前，你需要确保它有一个数值

var number;

你应该说

var number = 0

编辑：根据您的评论，问题是innerHTML返回为字符串。

有四种方法可以解决这个问题。

方法1:

 list_item = noList[i].innerHTML
 if(list_item.charAt(0) == "0"){
       number = number + parseInt(list_item, 10);
 } else {
       number = number + parseInt(list_item);
 }

说明1：您将字符串读入list_item。然后检查字符串中的第一个字符以确定数字的基数。这是为了确保与旧浏览器兼容。从ECMAScript 5开始，parseInt默认为基数10，但是，旧的实现通常使用基数8来表示以0开头的字符串。

方法2:

 list_item = +noList[i].innerHTML
 number = number + list_item

解释2：每种类型都有一个一元运算符。对于整数，这是+，因此将+应用于任何事物都将尝试将其强制转换为整数，应用!!将尝试将它强制转换为Boolean，等等。

方法3：

 list_item = Number(noList[i].innerHTML);
 number = number + list_item

说明3：Number对象是一个构造函数对象，它试图解析一个数字并提供方便的方法。目前只有Firefox真正完全支持，尽管基本的解析可以在其他浏览器中工作。

方法4:

 list_item = noList[1].innerHTML*1
 number = number+list_item

说明4：Javascript使用Duck Typeing(如果它像鸭子一样走路，像鸭子一样发抖，那么它一定是鸭子(，所以如果一个项目响应*1，那么它必须是一个数字。还有处理浮点数字的额外好处。

我推荐哪一个？

我可能暂时不使用Number构造函数，因为它并没有真正广为人知/得到支持。一般来说，我实际上会推荐parseInt，因为它是最广为人知的方法，大多数开发人员都会知道代码在做什么。

值得注意的是，在Chrome和最近的Firefox中，parseInt也是速度最快的，然而，在旧版本的Firefox中，Number构造函数提供了类似的性能优势(并且完全支持(。

然而，IE通常很慢，但最快的是一元运算符和乘法(尽管不多(。

反对parseInt()的唯一真正重要的论点是Opera，其中parseInt使其他方法的成型率低了近3倍。

try:

<ul id="list">
  <li value="2"> 2</li>
  <li value="3"> 3</li>
</ul>
相关文章：