获取数组中的所有span innerHTML

Question

所以我试图了解JS，一直在做一个小JS项目来学习它。 试图用javascript / html创建一个简单的计算器，但已经卡住了。

我想从数组的所有范围中获取innerHTML，但是我不知道如何做到这一点。 （我想使用纯JavaScript）。 我试过的是：

var allSpans = document.getElementsByTagName('span');
var arrayNumbers = [];

for (var i = 0; i <= allSpans.length; i++) {
   arrayNumbers.push(allSpans[i].innerHTML);
}

和我的HTML：

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
</head>
<body>
  <div id="calculator">
    <span class="numb">1</span>
    <span class="numb">2</span>
    <span class="numb">3</span>
    <span class="calc">x</span><br />

    <span class="numb">4</span>
    <span class="numb">5</span>
    <span class="numb">6</span>
    <span class="calc">/</span><br />

    <span class="numb">7</span>
    <span class="numb">8</span>
    <span class="numb">9</span>
    <span class="calc">√</span><br />

    <span class="numb">0</span>
    <span class="calc">+</span>
    <span class="calc">-</span>
    <span class="calc">=</span><br />
    <input type="text" >
  </div>
</body>
</html>

最佳方法是什么？为什么？ 尝试以正确的方式学习它：)非常感谢！

Answer 1

您的代码很好。 只需将i <= allSpans.length替换为i < allSpans.length 。

参见jsfiddle 。

Array.length返回数组中元素的数量。 但是请记住，数组索引从0开始（不仅在JS中，而且在大多数语言中）。 因此，如您的示例所示，长度为16的数组最多只能有15个索引。访问array[16]将使代码崩溃。

为了防止出现这样的错误，您可以使用jQuery .each（但我建议您首先学习标准JS）。

var array = [];
$('span').each(function () {
    array.push(this.innerHTML);
});

参见jsfiddle 。

Answer 2

您几乎明白了，只有一个小错误：在for循环中使用<而不是<= ：

for (var i = 0; i < allSpans.length; i++) {
   arrayNumbers.push(allSpans[i].innerHTML);
}

使用数组索引时，它们从0到length - 1 （等于length元素的数量），因此在循环中必须确保不超过此范围。

Answer 3

您的循环中有<= 。 allSpans有16个元素（0-15）。 当您尝试访问第16个元素时，该元素undefined ； undefined.innerHTML引发错误； 然后您的代码停止。

解决方案：将<=替换为< 。

另外：在这种情况下，这无关紧要，但是如果您有一个按钮>或& ，则会得到不好的结果。 我建议在这里使用.textContent而不是.innerHTML 。

Answer 4

尝试这样的事情

    var allSpans = document.getElementsByTagName('span');
    var arrayNumbers = [];

    for (var i = 0; i < allSpans.length; i++) {
       arrayNumbers.push(allSpans.item(i).innerHTML);
    }

getElementsByTagName（）方法以NodeList对象的形式返回具有指定标记名的元素子元素的集合。

参考

https://studio.tellme.com/dom/ref/methods/getelementsbytagname.html

Answer 5

几周前，我使用与您类似的方法编写了一个非常简单的计算器...

它适用于移动设备和现代浏览器。

这是CSS

body,html{
 height:100%;
 margin:0;
 padding:0;
 background-color:#666;
}
*{
 box-sizing:border-box;
}
.clc{
 width:256px;
 height:320px;
 clear:both;
}
.clc>*{
 border:4px solid #666;
 border-radius:4px;
 font:normal normal bold 20px/56px Arial,Helvetica,sans-serif;
 border-radius:10px;
}
.clc>input{
 width:100%;
 height:20%;
 text-align:right;
 padding:0 20px;
}
.clc>div{
 width:25%;
 height:20%;
 background-color:#5a5a5a;
 color:#fff;
 text-align:center;
 float:left;
}
.clc>div:nth-child(4n+1){
 background-color:#f36573;
}
.clc>div:nth-last-child(1){
 width:100%;
 background-color:#ffb343;
}

这是很短的javascript代码，可以为您完成工作

function calc(e){
 var a=e.target.innerText,b=this.firstChild;
 b.value=a=='='?eval(b.value):a=='C'?'':b.value+a;
}
var gui=document.createElement('div');
gui.className='clc';
gui.innerHTML='<input><div>'+('789+456-123*C0./='.split('').join('</div><div>'))+'</div>';
gui.addEventListener('click',calc,false);

window.onload=function(){
 document.body.appendChild(gui);
}

这是一个生动的例子

http://jsfiddle.net/trjsJ/

如果您听不懂，那就问一下！

更新

计算解释

function calc(event){
 var clickedText=event.target.innerText,// this is the clicked element inner Text
 inputBox=this.firstChild; // this is the input box
 if(clickedText=='='){// if the clicked text is equal symbol
  inputBox.value=eval(inputBox.value); // calculate the input string by evulating it
 }else{
  if(clickedText=='C'){ // if clicked text is C 
   inputBox.value='';// clear the input box
  }else{
   inputBox.value=inputBox.value+clickedText; // add the clicked text
  }
 }
}

Answer 6

您可以使用Array.prototype.map()将span元素的innerHTML存储在数组中：

var span = document.getElementsByTagName('span');
var span_array = [].map.call(span, function (element) {
  return element.innerHTML;
});

您可以使用ECMAScript 6（ES6）优化此过程：

const span = document.getElementsByTagName('span');
let span_array = Array.from(span, element => element.innerHTML);

注意：如果您尝试访问标记内的非HTML内容，我个人建议将textContent与trim()函数结合使用，而不是innerHTML 。

获取数组中的所有span innerHTML

问题描述

6 个解决方案

解决方案1
2 已采纳 2013-11-28 09:26:55

解决方案2
1 2013-11-28 09:25:29

解决方案3
1 2013-11-28 09:25:37

解决方案4
1 2013-11-28 09:27:46

解决方案5
1 2013-11-28 09:37:52

解决方案6
0 2018-04-23 01:51:02

获取数组中的所有span innerHTML

问题描述

6 个解决方案

解决方案1 2 已采纳 2013-11-28 09:26:55

解决方案2 1 2013-11-28 09:25:29

解决方案3 1 2013-11-28 09:25:37

解决方案4 1 2013-11-28 09:27:46

解决方案5 1 2013-11-28 09:37:52

解决方案6 0 2018-04-23 01:51:02

解决方案1
2 已采纳 2013-11-28 09:26:55

解决方案2
1 2013-11-28 09:25:29

解决方案3
1 2013-11-28 09:25:37

解决方案4
1 2013-11-28 09:27:46

解决方案5
1 2013-11-28 09:37:52

解决方案6
0 2018-04-23 01:51:02