Taschenrechner tastaturbedienbar

[Orlok]

Hallo Matthias

Das Problem ist das nicht unterstützte array.from.

Lohnt der Polyfill oder gibt es eine einfachere Variante?

Soweit ich sehe, wird Array.from() nur an einer Stelle verwendet:

Array.from(document.querySelectorAll("#calc button")).forEach( // ...

Da hier kein Rückgabewert gespeichert, sondern nur Array.prototype.forEach() aufgerufen wird, besteht überhaupt kein Anlass, die als Argument übergebene NodeList in ein Array zu konvertieren.

Man könnte die Methode auch einfach im Kontext der NodeList aufrufen:

Array.prototype.forEach.call(NodeList, callback)

Andererseits besitzt das NodeList–Interface selbst eine Methode forEach(). Die vom Internet Explorer natürlich ebenfalls nicht unterstützt wird.

Diese Methode sollte im vorliegenden Fall eigentlich verwendet werden und ein Polyfill hierfür ist schnell geschrieben:

if (!NodeList.prototype.forEach) NodeList.prototype.forEach = Array.prototype.forEach;

Dann kann die Zeile oben direkt so geschrieben werden:

document.querySelectorAll("#calc button").forEach( // ...

Edit: Ich sehe gerade, dass Array.from() nicht das einzige Problem ist, wenn Internet Explorer unterstützt werden soll. In dem Programm wird außerdem an mehreren Stellen die Methode Array.prototype.includes() verwendet, die für den IE ebenfalls zu neu ist.

Zu dieser Arraymethode habe ich vor einiger Zeit mal einen recht ausführlichen Artikel für’s Wiki geschrieben: Array.prototype.includes

Dort findet sich auch ein Beispiel für ein Polyfill. Habe es jetzt nicht nochmal getestet, aber das sollte funktionieren:

if (!Array.prototype.includes) {
 
  Array.prototype.includes = function includes(searchElement) {
    if (this == null) {
      throw new TypeError('this is null or undefined');
    }

    var object = Object(this),
        length = object.length >>> 0;

    if (length === 0) {
      return false;
    }

    var start = arguments[1] >> 0,
        key = start < 0 ? Math.max(start + length, 0) : start,
        currentElement;

    while (key < length) {
      currentElement = object[key];

      if (searchElement === currentElement
      || (searchElement !== searchElement
      && currentElement !== currentElement)) {
        return true
      }

      key ++;
    }

    return false;
  };
 
}

Viele Grüße,

Orlok