獲取數組中的所有span innerHTML
[英]Get all span innerHTML in an array
問題描述
所以我試圖了解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>
最佳方法是什么？為什么？ 嘗試以正確的方式學習它：)非常感謝！
6 個解決方案
解決方案1
2 已采納 2013-11-28 09:26:55
您的代碼很好。 只需將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 。
解決方案2
1 2013-11-28 09:25:29
您幾乎明白了，只有一個小錯誤：在for循環中使用<而不是<= ：
for (var i = 0; i < allSpans.length; i++) {
arrayNumbers.push(allSpans[i].innerHTML);
}
使用數組索引時，它們從0到length - 1 （等於length元素的數量），因此在循環中必須確保不超過此范圍。
解決方案3
1 2013-11-28 09:25:37
您的循環中有<= 。 allSpans有16個元素（0-15）。 當您嘗試訪問第16個元素時，該元素undefined ； undefined.innerHTML引發錯誤； 然后您的代碼停止。
解決方案：將<=替換為< 。
另外：在這種情況下，這無關緊要，但是如果您有一個按鈕>或& ，則會得到不好的結果。 我建議在這里使用.textContent而不是.innerHTML 。
解決方案4
1 2013-11-28 09:27:46
嘗試這樣的事情
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
解決方案5
1 2013-11-28 09:37:52
幾周前，我使用與您類似的方法編寫了一個非常簡單的計算器...
它適用於移動設備和現代瀏覽器。
這是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);
}
這是一個生動的例子
如果您聽不懂，那就問一下！
更新
計算解釋
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
}
}
}
解決方案6
0 2018-04-23 01:51:02
您可以使用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。
如何通過ID javascript獲取元素的子范圍的innerhtml
[英]How to get innerhtml of child span of element by ID javascript
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.