Also versuche ich JS zu verstehen, habe ein kleines JS-Projekt gemacht, um es zu lernen. Der Versuch, einen einfachen Taschenrechner mit Javascript / HTML zu erstellen, blieb jedoch bereits hängen.

Ich möchte das innerHTML aus allen Bereichen eines Arrays abrufen, kann aber nicht herausfinden, wie es geht. (Ich möchte reines JavaScript verwenden). Was ich versucht habe ist folgendes:

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

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

Und mein 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>

Was ist die beste Methode und warum? Ich versuche es richtig zu lernen :) Vielen Dank!

0
Mark 28 Nov. 2013 im 13:21

6 Antworten

Beste Antwort

Ihr Code ist in Ordnung. Ersetzen Sie einfach i <= allSpans.length durch i < allSpans.length.

Siehe jsfiddle.

Array.length gibt die Anzahl der Elemente in einem Array zurück. Denken Sie jedoch daran, dass eine Array-Indizierung bei 0 beginnt (nicht nur in JS, sondern in den meisten Sprachen). Wie in Ihrem Beispiel hat ein Array mit einer Länge von 16 nur Indizes bis zu 15. Wenn Sie auf array[16] zugreifen, stürzt der Code ab.

Um einen solchen Fehler zu vermeiden, können Sie jQuery .each verwenden (ich empfehle jedoch, zuerst Standard-JS zu lernen).

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

Siehe jsfiddle.

2
Saturnix 28 Nov. 2013 im 09:32

Vor einigen Wochen habe ich einen sehr einfachen Taschenrechner geschrieben, der einen ähnlichen Ansatz verwendet wie Sie ...

Es funktioniert auf Mobilgeräten und modernen Browsern.

Hier ist das 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;
}

Hier ist der sehr kurze Javascript-Code, der die Arbeit für Sie erledigt

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);
}

Und hier ist ein lebendes Beispiel

http://jsfiddle.net/trjsJ/

Wenn Sie etwas nicht verstehen, fragen Sie einfach!

UPDATE

calc erklärt

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
  }
 }
}
1
cocco 28 Nov. 2013 im 11:30

Sie haben es fast verstanden, nur ein kleiner Fehler: Verwenden Sie < anstelle von <= in der for-Schleife:

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

Wenn Sie Array-Indizes verwenden, wechseln sie von 0 zu length - 1 (was einer Anzahl von length Elementen entspricht). In Ihrer Schleife müssen Sie also sicherstellen, dass Sie diesen Bereich nicht überschreiten.

1
Sirko 28 Nov. 2013 im 09:25

Ihre Schleife enthält <=. allSpans hat 16 Elemente (0-15). Wenn Sie versuchen, auf das 16. Element zuzugreifen, ist es undefined; undefined.innerHTML löst einen Fehler aus; und Ihr Code stoppt.

Lösung: Ersetzen Sie <= durch <.

Außerdem: In diesem speziellen Fall spielt es keine Rolle, aber wenn Sie eine Schaltfläche > oder & hätten, würden Sie schlechte Ergebnisse erhalten. Ich schlage vor, hier .textContent anstelle von .innerHTML zu verwenden.

1
Amadan 28 Nov. 2013 im 09:25

Sie können {{X0} verwenden } zum Speichern des {{ X1}} Ihres span Elemente in einem Array:

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

Sie können dieses Verfahren mit ECMAScript 6 (ES6) optimieren:

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

Hinweis: Ich würde persönlich die Verwendung von empfehlen textContent in Verbindung mit trim() Funktion statt innerHTML, wenn Sie versuchen, auf Nicht-HTML-Inhalte in Ihren Tags zuzugreifen.

0
Grant Miller 21 Nov. 2018 im 04:11

Versuche so etwas

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

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

Die Methode getElementsByTagName () gibt eine Sammlung der untergeordneten Elemente eines Elements mit dem angegebenen Tagnamen als NodeList-Objekt zurück.

REFERENZ

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

1
rajesh kakawat 28 Nov. 2013 im 09:27