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/

如果你不明白，只要问一下！

<强>更新

calc解释

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()将innerHTML个span元素存储在数组中：

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 个答案: