Henry: Taschenrechner tastaturbedienbar

0 48

Taschenrechner tastaturbedienbar

  1. 0
  2. 0
    1. 1
      1. 0
        1. 0
  3. 0
    1. 0
      1. 0
        1. 0
          1. 0
            1. 0
              1. 0
      2. 0
        1. 1
          1. 0
            1. 0
            2. 0
              1. 0
                1. 0
                  1. 0
                    1. 0
                      1. 0
                        1. 0
                2. 1
                  1. 0
                    1. 1
                      1. 0
                3. 1
                  1. 1
                    1. 1
                    2. 0
                      1. 0
                        1. 0
                          1. 0
                            1. 0
                              1. 0
                                1. 0
                                2. 0
                      2. 1
                        1. 0
                        2. 2
                          1. 0
                            1. 0
                              1. 0
                                1. 1
                                  1. 0
                                    1. 0

Hallo,

ich arbeite gerade an einer Taschenrechnerfunktionalität. Dabei fand ich auch das Beispiel hier im Wiki, welches leider nicht zahlentastaturbedienbar ist. Meine Version kann das zwar weil ich ein Inputfeld nutze, nur habe ich noch nicht den richtigen Lösungsansatz das Ergebnis per Entertaste ausgeben zu lassen. Accesskey scheint da auch keine Option zu sein und keypress auch nicht wirklich, hättet ihr eine Idee?

Gruss
Henry

--
Meine Meinung zu DSGVO & Co:
„Principiis obsta. Sero medicina parata, cum mala per longas convaluere moras.“
  1. Hallo Henry,

    keypress ist richtig.

    Der Wiki-Taschenrechner macht sich die meiste Arbeit damit, eine "lesbare" Anzeige zu präsentieren und Schaden vor eval() fernzuhalten...

    Rolf

    --
    sumpsi - posui - clusi
  2. Hallo Henry,

    nee, sorry, nicht keypress.

    Submit ist viel schöner

    Rolf

    --
    sumpsi - posui - clusi
    1. Hallo Ingrid,

      Jetzt auch mit History

      Rolf

      --
      sumpsi - posui - clusi
      1. Lieber Rolf,

        Jetzt auch mit History

        nettes Feature! Aber warum nicht gleich auch noch das Ergebnis in Klammern dahinter notieren?

        Liebe Grüße,

        Felix Riesterer.

        1. Hallo Felix,

          nettes Feature! Aber warum nicht gleich auch noch das Ergebnis in Klammern dahinter notieren?

          Das bleibt als einfache Übung dem Leser überlassen.

          Rolf

          --
          sumpsi - posui - clusi
  3. Lieber Henry,

    Dabei fand ich auch das Beispiel hier im Wiki, welches leider nicht zahlentastaturbedienbar ist.

    also gut, ich habe das Tutorial um eine Tastatureingabe erweitert. Über die Bedienung der Sonderfunktionen wie Wurzel, Quadrat und natürlichem Logaritmus bin ich mir noch nicht im Klaren. Welche Tasten sollten diese Funktionalitäten auslösen? mittels X und ln mittels L? OK, aber was ist mit ? Soll diese über W wie ***W***urzel, oder über S wie ***S***quare-root ausgelöst werden?

    Liebe Grüße,

    Felix Riesterer.

    1. Hallo Felix Riesterer,

      also gut, ich habe das Tutorial um eine Tastatureingabe erweitert.

      Prima.

      Über die Bedienung der Sonderfunktionen wie Wurzel, Quadrat und natürlichem Logaritmus bin ich mir noch nicht im Klaren. Welche Tasten sollten diese Funktionalitäten auslösen? mittels X und ln mittels L? OK, aber was ist mit ? Soll diese über W wie ***W***urzel, oder über S wie ***S***quare-root ausgelöst werden?

      L - Logarithmus (logarithm)
      S - Quadrat (square)
      R - Wurzel (root)

      Dann müsste man imho auch noch einen Hinweis auf die richtige Taste unterbringen. Vielleicht im title-Attribut für sehende Maussschubser?

      <button title="natürlicher Logarithmus [L]">ln<button>

      und in geeigneter Weise für alle anderen?

      Bis demnächst
      Matthias

      --
      Pantoffeltierchen haben keine Hobbys.
      1. Hallo Matthias,

        warum nicht

        <button title="natürlicher Logarithmus">ln [L]<button>

        Gruß
        Jürgen

        1. Lieber JürgenB,

          <button title="natürlicher Logarithmus">ln [L]<button>

          damit würde dieser Button zu breit. Oder man macht dann alle Buttons breiter. Und dann passt es wieder nicht aufs Smartphone.

          Nö, ich bin für eine eigene Legende.

          Liebe Grüße,

          Felix Riesterer.

          1. Hallo Felix,

            Infos zur Tastaturbedienung im Title halte ich für wenig sinnvoll, und Tastaturbedienung auf dem Smartphone auch nicht.

            Gruß
            Jürgen

            1. Lieber JürgenB,

              Infos zur Tastaturbedienung im Title halte ich für wenig sinnvoll, und Tastaturbedienung auf dem Smartphone auch nicht.

              auf dem Smartphone hast Du die Buttons, die Du eben wie ein Mausschubser "klickst". Das passt schon. Die Legende kann man bei schmalen Viewports unterhalb anstatt nebenstehend positionieren. Dann sehen die Smartphone-Nutzer diese nur, wenn sie das wollen.

              Du hast völlig recht wenn Du meinst, dass die Tastaturbedienung für Touchgeräte keine Relevanz hat. Daher möchte ich die Bedienungshinweise auch nicht im "GUI" des Taschenrechners selbst enthalten haben, sondern gesondert.

              Liebe Grüße,

              Felix Riesterer.

              1. Hallo Felix,

                wie wäre es, die Tastaturhinweise zu verstecken, wenn der Viewport zu klein ist?

                Gruß
                Jürgen

      2. Lieber Matthias,

        L - Logarithmus (logarithm)
        S - Quadrat (square)
        R - Wurzel (root)

        und wenn man dann noch sin, cos und tan hinzufügen möchte? Dann wäre S doppeldeutig...

        Die Hinweise auf die Tasten kommen in einen gesonderten Abschnitt im HTML - außerhalb des Taschenrechners:

        <h2>Hinweise zur Bedienung rein mit der Tastatur:</h2>
        <dl>
          <dt><strong></strong> (Wurzel)</dt>
          <dd><strong>R</strong> (root - Englisch für Wurzel)</dd>
          <dt><strong></strong> (Quadrat)</dt>
          <dd><strong>S</strong> (square - Englisch für Quadrat)</dd>
          <dt><strong>ln</strong> (natürlicher Logarithmus)</dt>
          <dd><strong>L</strong> (logarithm - Englisch für Logarithmus)</dd>
          <dt><strong>C</strong> (zurücksetzen auf Null)</dt>
          <dd><strong>Entf</strong> oder <strong>Backspace</strong></dd>
        </dl>
        

        Liebe Grüße,

        Felix Riesterer.

        1. problematische Seite

          Hallo Ingrid,

          und wenn man dann noch sin, cos und tan hinzufügen möchte? Dann wäre S doppeldeutig...

          es wird von meiner Seite aus schlicht keine solche Erweiterung geben, daher habe ich jetzt alles wie besprochen umgesetzt.

          Liebe Grüße,

          Felix Riesterer.

          1. problematische Seite

            Hallo Felix,

            daher habe ich jetzt alles wie besprochen umgesetzt.

            sieht erst mal gut aus. Habe nur noch nicht raus gefunden warum es im IE nicht klappt. Danke an alle.

            Gruss
            Henry

            --
            Meine Meinung zu DSGVO & Co:
            „Principiis obsta. Sero medicina parata, cum mala per longas convaluere moras.“
            1. problematische Seite

              Hallo Henry,

              Habe nur noch nicht raus gefunden warum es im IE nicht klappt.

              Interessant. Der Taschenrechner arbeitet im IE11 tatsächlich nicht. Eine Fehlermeldung sehe ich in der Konsole nicht.

              Lediglich: DOM7011: Der Code auf dieser Seite hat die Zwischenspeicherung für das Vor- und Zurücknavigieren deaktiviert. Weitere Informationen dazu finden Sie unter: http://go.microsoft.com/fwlink/?LinkID=291337 Beispiel:JS_Taschenrechner.html

              und: HTML1300: Navigation wurde ausgeführt. Beispiel:JS_Taschenrechner.html

              Bis demnächst
              Matthias

              --
              Pantoffeltierchen haben keine Hobbys.
            2. problematische Seite

              Lieber Henry,

              Habe nur noch nicht raus gefunden warum es im IE nicht klappt.

              den unterstütze ich nicht mehr. Edge ist nun der Browser von M$, demnächst als sozusagen Chromium rebranded.

              Liebe Grüße,

              Felix Riesterer.

              1. problematische Seite

                Hallo Felix Riesterer,

                den unterstütze ich nicht mehr.

                Könntest du für das Wiki eine Ausnahme machen oder zumindest herausfinden, warum es nicht funktioniert?

                Edge ist nun der Browser von M$, demnächst als sozusagen Chromium rebranded.

                Laut CanIUse wird der IE11 mehr genutzt als alle Edge-Versionen zusammen.

                Bis demnächst
                Matthias

                --
                Pantoffeltierchen haben keine Hobbys.
                1. problematische Seite

                  Lieber Matthias,

                  Könntest du für das Wiki eine Ausnahme machen oder zumindest herausfinden, warum es nicht funktioniert?

                  der IE läuft auf meinem Linux nicht. Und unter meinem alten Win7 läuft eventuell nicht der IE, der unter einem aktuellen Windoof läuft.

                  Liebe Grüße,

                  Felix Riesterer.

                  1. problematische Seite

                    Hallo Felix,

                    würde mich wundern, wenn der IE11 unter Win7 ein anderer wäre als der unter Win10.

                    Rolf

                    --
                    sumpsi - posui - clusi
                    1. problematische Seite

                      Lieber Rolf,

                      würde mich wundern, wenn der IE11 unter Win7 ein anderer wäre als der unter Win10.

                      Win7 und IE11

                      Liebe Grüße,

                      Felix Riesterer.

                      1. problematische Seite

                        Hallo Felix,

                        ok, da sind ein paar Unterschiede in der Einbindung. Das ist aber nicht der Browserkern. Die Rendering-Engine und der JS Interpreter sollten das gleiche tun

                        Rolf

                        --
                        sumpsi - posui - clusi
                        1. problematische Seite

                          Lieber Rolf,

                          Die Rendering-Engine und der JS Interpreter sollten das gleiche tun

                          Du gehst immer noch davon aus, dass auf meinem Win7 der IE11 läuft? Ich nutze den IE nie! Warum hätte ich den also je upgraden sollen? Wenn überhaupt Windoof, dann mit einem FF...

                          Liebe Grüße,

                          Felix Riesterer.

                2. problematische Seite

                  Hallo,

                  ich habe mir das gerade mal im IE11 angesehen: Das Problem ist das nicht unterstützte array.from.

                  Gruß
                  Jürgen

                  1. problematische Seite

                    Hallo JürgenB,

                    ich habe mir das gerade mal im IE11 angesehen:

                    Danke.

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

                    Lohnt der Polyfill oder gibt es eine einfachere Variante?

                    Bis demnächst
                    Matthias

                    --
                    Pantoffeltierchen haben keine Hobbys.
                    1. problematische Seite

                      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

                      1. problematische Seite

                        Lieber Orlok,

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

                        ach ja, diese lästige Sache mit den aktuellen Dingen, die der IE nicht unterstützt.

                        Lohnt der Polyfill oder gibt es eine einfachere Variante?

                        Es geht bestimmt viel kürzer mit Array.prototype.slice.call().

                        Liebe Grüße,

                        Felix Riesterer.

                3. problematische Seite

                  Lieber Matthias,

                  Laut CanIUse wird der IE11 mehr genutzt als alle Edge-Versionen zusammen.

                  da ihr alle so lieb wart und mir gleich mit Array.from() den Schuldigen auf dem Silbertablett präsentiert habt, war ich natürlich unter Zugzwang und habe sowohl das Beispiel, als auch das Tutorial entsprechend verbessert.

                  Liebe Grüße,

                  Felix Riesterer.

                  1. problematische Seite

                    Hallo Felix,

                    leider wird mit

                    // initialize only if <output> is found and browser supports Array.from()
                    	if (out && typeof Array.from == "function") {
                    

                    der IE immer noch ausgesperrt.

                    Gruß
                    Jürgen

                    1. problematische Seite

                      Lieber JürgenB,

                      // initialize only if <output> is found and browser supports Array.from()
                      	if (out && typeof Array.from == "function") {
                      

                      da habe ich wohl zu schnell geschossen. Danke für den Hinweis. Nun sollte es klappen.

                      Liebe Grüße,

                      Felix Riesterer.

                    2. problematische Seite

                      Hallo,

                      includes ist auch noch drin. Ich habe gerade mal Orloks Polyfill eingebaut, aber danach ging es immer noch nicht, auch keine Fehlermeldung. Da scheint noch mehr im Argen zu liegen. Vielleicht wäre eine kurze Meldung "Der IE wird nicht unterstützt!" doch besser.

                      Gruß
                      Jürgen

                      1. problematische Seite

                        Lieber JürgenB,

                        Vielleicht wäre eine kurze Meldung "Der IE wird nicht unterstützt!" doch besser.

                        ich schrubte bereits, dass ich ihn nicht unterstütze. Und die Sache mit Array.from() habe ich ausgebügelt. Wenn es jetzt noch an Array.includes() hängt, dann werde ich wieder bockig und sage: "Der IE kann mich mal. Es gibt auch Browser! Wer keinen will, installiert sich halt keinen. Ist ja nicht so, dass man dafür irgend ein Geld ausgeben müsste."

                        Ich sehe meine Bockigkeit insofern als gerechtfertigt an, als dass diejenigen, die tatsächlich Websites basteln und sich mit JavaScript beschäftigen wollen, aus Prinzip mit einem Browser hantieren, also nicht (primär) mit dem IE. Außerdem hat der standardmäßig unzureichende Entwicklerwerkzeuge, so dass es unnötig schwer ist, mit seinen kryptischen Fehlermeldungen à la "Das Objekt unterstützt diese Eigenschaft nicht." umgehen zu müssen. So ein Firebug war schon eine tolle Sache, als es Vergleichbares im FF mit seinem DOM-Inspector damals noch nicht gab - aber eben nicht im IE!

                        Liebe Grüße,

                        Felix Riesterer.

                        1. problematische Seite

                          Hallo Felix,

                          Vielleicht wäre eine kurze Meldung "Der IE wird nicht unterstützt!" doch besser.

                          ich schrubte bereits, dass ich ihn nicht unterstütze.

                          ich baue in meine Seiten oft folgendes ein, wenn ich keine einfachen Alternativen finde:

                          if(Methode) {}
                          else {
                           alert("Ihr Browser unterstützt nicht die benötigten Methoden!");
                          }
                          

                          Hiermit sperre ich z.B. den IE8 aus:

                          	if(window.addEventListener) {
                          			window.addEventListener("DOMContentLoaded",JB.GPX2GM.start,false);
                          	}
                          	else {
                          		window.onload = function() { 
                          			document.querySelectorAll("div[class*='gpxview:'],figure[class*='gpxview:']")[0].innerHTML = "<p style='font-weight:bold;padding:2em;text-align:center;background-color:#fb5'>Leider wird Ihr Browser vom GPX-Viewer nicht mehr unterstützt.</p>";
                          			console.error("Leider wird Ihr Browser vom GPX-Viewer nicht mehr unterstützt.");
                          		}
                          	}
                          

                          Gib also einfach eine Alert-Meldung aus, und gut ist's. In einem Tutorial muss man sich ja die Frage stellen, unterstütze ich „alle“ Browser oder lehre ich modernes Javascript. Du hast dich eben für letzteres entschieden.

                          Gruß
                          Jürgen

                          1. problematische Seite

                            Lieber JürgenB,

                            Gib also einfach eine Alert-Meldung aus, und gut ist's.

                            das finde ich in mehrfacher Hinsicht kontraproduktiv. Es sind ja unbedarfte Anwender, die Du mit diesem knappen Hinweis vor den Kopf stößt. Da fände ich persönlich einen Hinweis besser, der erklärt, dass die Leute gerade mit einem Internet Explorer auf Deine Seite gesurft kommen, zu dem es gute, sichere und kostenlose Alternativen gibt, die man Browser nennt. Und dann eben die Links zu Firefox, Chromium und Vivaldi.

                            In einem Tutorial muss man sich ja die Frage stellen, unterstütze ich „alle“ Browser oder lehre ich modernes Javascript. Du hast dich eben für letzteres entschieden.

                            Ich habe mich dazu entschieden, diese Problematik in diesem Tutorial wenigstens anzusprechen. Da meine Korrekturen unzureichend waren, ich den IE auch zutiefst verabscheue (habe mich lange genug mit der Version 6 herumärgern müssen, und nun kann ein aktueller noch nicht einmal ECMA6?!), sehe ich nun für mich die Grenze dessen erreicht, für das ich mich und meine Zeit noch einzusetzen bereit bin.

                            Liebe Grüße,

                            Felix Riesterer.

                            1. problematische Seite

                              Servus!

                              In einem Tutorial muss man sich ja die Frage stellen, unterstütze ich „alle“ Browser oder lehre ich modernes Javascript. Du hast dich eben für letzteres entschieden.

                              Ich habe mich dazu entschieden, diese Problematik in diesem Tutorial wenigstens anzusprechen. Da meine Korrekturen unzureichend waren, ich den IE auch zutiefst verabscheue (habe mich lange genug mit der Version 6 herumärgern müssen, und nun kann ein aktueller noch nicht einmal ECMA6?!), sehe ich nun für mich die Grenze dessen erreicht, für das ich mich und meine Zeit noch einzusetzen bereit bin.

                              @Felix Riesterer @JürgenB

                              Vielen Dank für eure Verbesserungen.

                              Wenn ich das richtig verstanden habe, soll es den neuen Edge mit Chromium abweichend von der bisherigen MS-Policy eben auch für die älteren Windows-Versionen geben.

                              Bisher blieb Nutzern von XP und Win 7 ja nur der Weg zu den Alternativen Chrome, Firefox und Opera. Anscheinend hat MS da dazugelernt. Mal abwarten!

                              Herzliche Grüße

                              Matthias Scharwies

                              --
                              "I don’t make typos. I make new words."
                              1. problematische Seite

                                Hallo Matthias,

                                wenn ich mir die Browserstatistiken ansehe, habe ich das Gefühl, das auch unter Windows 10 der IE11 noch oft zum Einsatz kommt. Wenn der IE nicht per Zwangsupdate ersetzt wird, bleibt er uns erhalten, bis der letzte Windows 7 Rechner stirbt.

                                Gruß
                                Jürgen

                                1. problematische Seite

                                  Servus!

                                  wenn ich mir die Browserstatistiken ansehe, habe ich das Gefühl, das auch unter Windows 10 der IE11 noch oft zum Einsatz kommt. Wenn der IE nicht per Zwangsupdate ersetzt wird, bleibt er uns erhalten, bis der letzte Windows 7 Rechner stirbt.

                                  wollt grad schreiben - das geht doch gar nicht - hab's grad im Netz gesehen - geht doch. 😟

                                  Herzliche Grüße

                                  Matthias Scharwies

                                  --
                                  "I don’t make typos. I make new words."
                                2. problematische Seite

                                  Hallo

                                  wenn ich mir die Browserstatistiken ansehe, habe ich das Gefühl, das auch unter Windows 10 der IE11 noch oft zum Einsatz kommt. Wenn der IE nicht per Zwangsupdate ersetzt wird, bleibt er uns erhalten, bis der letzte Windows 7 Rechner stirbt.

                                  Ersetze „Windows 7“ durch „Windows 10“ und du kommst der Sache weitaus näher. Auch dort ist der IE11 vorhanden. Auch dort lässt er sich nicht deïnstallieren. Auch dort wird er von Gewohnheitstieren der bereits vorhandenen und um Längen besseren Alternative [1] Edge vorgezogen.

                                  @Matthias Scharwies: Auch wenn der Chromium-Edge entgegen der aktuellen Praxis für ältere Windows-Versionen bereitgestellt werden sollte, können wir wohl davon ausgehen, dass dies für das seit fast fünf Jahren aus dem Support ausgeschiedene Windows-XP nicht mehr der Fall sein wird. Das Gleiche gilt für Windows Vista [2] (Supportende 11. April 2017). Bleibt an alten aber noch unterstützten Windows-Versionen also nur Windows 7 und, wenn sie denn rechtzeitig fertig werden sollten, Windows Server 2008 (R2) (und neuere) übrig.

                                  Tschö, Auge

                                  --
                                  Eine Kerze stand [auf dem Abort] bereit, und der Almanach des vergangenen Jahres hing an einer Schnur. Die Herausgeber kannten ihre Leser und druckten den Almanach auf weiches, dünnes Papier.
                                  Kleine freie Männer von Terry Pratchett

                                  1. Ich behaupte nicht, dass Edge gut sei. Besser als der IE ist er aber allemal. ↩︎

                                  2. Ja, es gibt Windows-Versionen, deren Wikipedia-Artikel man verlinken muss, weil es Leute gibt, die die nicht kennen [3]. ↩︎

                                  3. Also die Windows-Verionen, nicht die Wikipedia-Artikel [4]. ↩︎

                                  4. Obwohl man in diesen Fällen davon ausgehen muss, dass diesen Leuten auch die Wikipedia-Artikel unbekannt sein dürften. ↩︎

                      2. problematische Seite

                        Hallo Jürgen

                        includes ist auch noch drin. Ich habe gerade mal Orloks Polyfill eingebaut, aber danach ging es immer noch nicht, auch keine Fehlermeldung. Da scheint noch mehr im Argen zu liegen.

                        Danke, dass du meinen Beitrag gelesen hast. Ich wünschte, dass hätte Felix auch gemacht. 😀

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

                        Ich zitiere mich mal selbst:

                        [Es] besteht überhaupt kein Anlass, die als Argument übergebene NodeList in ein Array zu konvertieren.

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

                        Wie es noch ein wenig besser geht, habe ich in meinem anderen Beitrag aufgeschrieben.

                        Der Grund dafür, dass es trotz Polyfill für includes() immernoch nicht funktioniert, ist wahrscheinlich die mangelnde Unterstützung des Internet Explorers für das output–Element.

                        Da der Browser das Element nicht kennt, gibt es auch keine Reflektion der Eigenschaft value. Sprich, die Zuweisung an diese Eigenschaft bewirkt nicht, dass das Attribut gesetzt und der textuelle Inhalt des Elements angepasst wird.

                        Daran soll es aber nicht scheitern. Man kann auch einfach textContent verwenden.

                        Also nicht:

                        out.value = // ...
                        

                        Sondern:

                        out.textContent = // ...
                        

                        Dann müsste es gehen. Sonst sehe ich erstmal keine Probleme hinsichtlich IE.

                        Mir ist allerdings noch aufgefallen, dass innerhalb eines Eventhandlers, der mit der Methode addEventListener() registriert wird, false zurückgegeben wird. Das ist unnötig, weil darüber schon die Methode preventDefault() aufgerufen wird, und unsinnig, weil der Rückgabewert bei dieser Form der Registrierung ohnehin verworfen wird.

                        Viele Grüße,

                        Orlok

                        1. problematische Seite

                          Lieber Orlok,

                          Ich wünschte, dass hätte Felix auch gemacht. 😀

                          ich habe ihn eher überflogen, denn wirklich gelesen. Das war sicherlich ein Fehler meinerseits. Da ich aber nicht Willens bin, den IE zu unterstützen, lasse ich es jetzt einfach konsequent sein. Wer meinen Artikel und das Beispiel noch IE-tauglich machen möchte, sei hiermit recht herzlich eingeladen.

                          Liebe Grüße,

                          Felix Riesterer.

                        2. problematische Seite

                          Hallo,

                          ich habe deine Änderungen eingebaut und getestet, jetzt scheint der Rechner auch im IE11 zu funktionieren. Ich möchte da jetzt im WIKI nicht in @Felix Riesterer 's Artikel rumändern, daher hier mein Quelltext:

                          <!DOCTYPE html>
                          <html><head>
                          <meta http-equiv="content-type" content="text/html; charset=UTF-8">
                          	<meta charset="utf-8">
                          	<title>Taschenrechner</title>
                          	<link rel="stylesheet" media="all" href="Taschenrechner-Dateien/BeispielSELFHTML-Beispiel-Grundlayout.htm">
                          	<style>
                          #calc {
                          	background: royalblue;
                          	border: 1px solid darkblue;
                          	border-radius: 0.5em;
                          	box-shadow: inset 0 0 5px white;
                          	display: inline-block;
                          	padding: 1em 0;
                          	text-align: center;
                          	width: 15em;
                          }
                          
                          #calc output {
                          	display: block;
                          	height: 1.5em;
                          	background: white;
                          	text-align :right;
                          	font-size: 100%;
                          	padding-right: 5%;
                          	margin: 5px 6%;
                          }
                          
                          #calc fieldset {
                          	border: none;
                          	margin: 0 auto;
                          	padding-bottom: 0;
                          }
                          
                          #calc button {
                          	cursor: pointer;
                          	margin: 5px 2%;
                          	width: 18%;
                          }
                          
                          #usage {
                          	display: inline-block;
                          	padding: 0 0 0 2em;
                          	vertical-align: top;
                          }
                          	</style>
                          	<script>
                          "use strict";
                          
                          document.addEventListener("DOMContentLoaded", function () {
                          
                          	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;
                          		};
                          	 
                          	}
                          
                          	var form = document.getElementById("calc"),
                          		out = document.querySelector("#calc output"),
                          		overwrite = true;
                          
                          	function clear () {
                          		out.textContent = 0;
                          		overwrite = true;
                          	}
                          
                          	function extra (type) {
                          
                          		switch (type) {
                          
                          			case "√":
                          				out.textContent = Math.sqrt(result(true));
                          			break;
                          
                          			case "x²":
                          				out.textContent = Math.pow(result(true), 2);
                          			break;
                          
                          			case "ln":
                          				out.textContent = Math.log(result(true));
                          			break;
                          		}
                          
                          		overwrite = true;
                          	}
                          
                          	function input (c) {
                          		// remove leading zero?
                          		if (overwrite) {
                          
                          			out.textContent = (c == "." ? "0." : c);
                          
                          		} else {
                          
                          			out.textContent += c;
                          		}
                          
                          		overwrite = false;
                          	}
                          
                          	function operator (c) {
                          		out.textContent += " " + c + " ";
                          		overwrite = false;
                          	}
                          
                          	function result (noDisplay) {
                          		var input = out.textContent,
                          			r = 0;
                          
                          		// replace × with * and ÷ with / for eval()
                          		input = input.replace(/×/g, "*").replace(/÷/g, "/");
                          
                          		// remove anything else that is not allowed here
                          		input = input.replace(/[^0-9. +\-*\/]/g, "");
                          
                          		try {
                          
                          			r = eval(input);
                          
                          		} catch (e) {
                          
                          			r = 0;
                          		}
                          
                          		if (noDisplay !== true) {
                          			out.textContent = r;
                          			overwrite = true;
                          		}
                          
                          		return r;
                          	}
                          
                          	// initialize only if <output> is found
                          	if (out) {
                          
                          		form.addEventListener("submit", function (ev) {
                          			// prevent form submission and page reload
                          			ev.preventDefault();
                          			ev.stopPropagation();
                          			return false;
                          		});
                          
                          		// button functionalities
                          		Array.prototype.forEach.call((document.querySelectorAll("#calc button")),function (b) { 
                          			var c = b.textContent;
                          
                          			switch (c) {
                          
                          				case "9":
                          				case "8":
                          				case "7":
                          				case "6":
                          				case "5":
                          				case "4":
                          				case "3":
                          				case "2":
                          				case "1":
                          				case "0":
                          				case ".":
                          					b.addEventListener("click", function () {
                          						input(c);
                          					});
                          				break;
                          
                          				case "+":
                          				case "-":
                          				case "×":
                          				case "÷":
                          					b.addEventListener("click", function () {
                          						operator(c);
                          					});
                          				break;
                          
                          				case "√":
                          				case "x²":
                          				case "ln":
                          					b.addEventListener("click", function () {
                          						extra(c);
                          					});
                          				break;
                          
                          				case "=":
                          					b.addEventListener("click", result);
                          				break;
                          
                          				case "C":
                          					b.addEventListener("click", clear);
                          				break;
                          			}
                          		});
                          
                          		// keyboard support
                          		document.addEventListener("keypress", function (ev) {
                          
                          			// decimal point
                          			if ([44, 46].includes(ev.charCode)) {
                          				// , .
                          				input(".");
                          			}
                          
                          			// digits
                          			if ([48, 49, 50, 51, 52, 53, 54, 55, 56, 57].includes(ev.charCode)) {
                          				// 0-9
                          				input(ev.charCode - 48);
                          			}
                          
                          			// operators
                          			if ([42, 43, 45, 47].includes(ev.charCode)) {
                          				// * + - /
                          				operator(
                          					["×", "+", "-", "÷"][
                          						[42, 43, 45, 47].indexOf(ev.charCode)
                          					]
                          				);
                          			}
                          
                          			// result
                          			if (ev.charCode == 61) {
                          				// =
                          				result();
                          			}
                          
                          			// clear
                          			if ([67, 99].includes(ev.charCode)) {
                          				// C, c
                          				clear();
                          			}
                          
                          			// logarithm
                          			if ([76, 108].includes(ev.charCode)) {
                          				// L, l
                          				extra("ln");
                          			}
                          
                          			// root
                          			if ([82, 114].includes(ev.charCode)) {
                          				// R, r
                          				extra("√");
                          			}
                          
                          			// square
                          			if ([83, 115].includes(ev.charCode)) {
                          				// S, s
                          				extra("x²");
                          			}
                          
                          			// additional clear and result keys
                          			switch (ev.code) {
                          				// <delete> and <backspace> to clear display
                          				case "Backspace":
                          				case "Delete":
                          					clear();
                          				break;
                          
                          				// both <enter> keys to display result
                          				case "Enter":
                          				case "NumpadEnter":
                          					result();
                          				break;
                          			}
                          		});
                          	}
                          });
                          	</script>
                          </head>
                          <body>
                          	<h1>Taschenrechner</h1>
                          	<main role="main">
                          		<form id="calc">
                          			<output>0</output>
                          			<fieldset>
                          				<button>√</button>
                          				<button>x²</button>
                          				<button>ln</button>
                          				<button>C</button>
                          
                          				<button>7</button>
                          				<button>8</button>
                          				<button>9</button>
                          				<button>+</button>
                          
                          				<button>4</button>
                          				<button>5</button>
                          				<button>6</button>
                          				<button>-</button>
                          
                          				<button>1</button>
                          				<button>2</button>
                          				<button>3</button>
                          				<button>×</button>
                          
                          				<button>0</button>
                          				<button>.</button>
                          				<button>=</button>
                          				<button>÷</button>
                          			</fieldset>
                          		</form>
                          		<aside id="usage">
                          			<h2>Hinweise zur Bedienung rein mit der Tastatur</h2>
                          			<dl>
                          				<dt><strong>=</strong> (Ergebnis berechnen)</dt>
                          				<dd><strong>=</strong> oder <strong>Enter</strong></dd>
                          				<dt><strong>√</strong> (Wurzel)</dt>
                          				<dd><strong>R</strong> (root - Englisch für Wurzel)</dd>
                          				<dt><strong>x²</strong> (Quadrat)</dt>
                          				<dd><strong>S</strong> (square - Englisch für Quadrat)</dd>
                          				<dt><strong>ln</strong> (natürlicher Logarithmus)</dt>
                          				<dd><strong>L</strong> (logarithm - Englisch für Logarithmus)</dd>
                          				<dt><strong>C</strong> (zurücksetzen auf Null)</dt>
                          				<dd><strong>C</strong> (clear - Englisch für klar), <strong>Entf</strong> oder <strong>Backspace</strong></dd>
                          			</dl>
                          		</aside>
                          	</main>
                          
                          </body></html>
                          

                          Gruß
                          Jürgen

                          1. problematische Seite

                            Hallo,

                            ich habe die IE-Unterstützung eingebaut und hoffentlich nichts übersehen.

                            Gruß
                            Jürgen

                            1. problematische Seite

                              Lieber JürgenB,

                              ich habe die IE-Unterstützung eingebaut und hoffentlich nichts übersehen.

                              die Stelle, an der Array.prototype.forEach() erklärt wird, habe ich passend umformuliert.

                              Liebe Grüße,

                              Felix Riesterer.

                              1. problematische Seite

                                Hallo Felix,

                                die Stelle, an der Array.prototype.forEach() erklärt wird, habe ich passend umformuliert.

                                sorry, ich habe den Text ersetzt, da ich auf die Variante

                                	if (!NodeList.prototype.forEach) NodeList.prototype.forEach = Array.prototype.forEach;
                                
                                 …
                                
                                			document.querySelectorAll("#calc button").forEach(function (b) { 
                                

                                umgeschwenkt bin.

                                Gruß
                                Jürgen

                                1. problematische Seite

                                  Lieber JürgenB,

                                  sorry, ich habe den Text ersetzt, da ich

                                  kein Grund sich zu entschuldigen! Ich habe frech Deine Änderungen noch einmal überarbeitet, um die Unterstützung des IE zu einem eigenständigen kleinen Kapitel des Tutorials zu machen.

                                  Liebe Grüße,

                                  Felix Riesterer.

                                  1. problematische Seite

                                    Hallo Felix,

                                    … Ich habe frech Deine Änderungen noch einmal überarbeitet, um die Unterstützung des IE zu einem eigenständigen kleinen Kapitel des Tutorials zu machen.

                                    wodurch es noch besser geworden ist.

                                    Gruß
                                    Jürgen

                                    1. problematische Seite

                                      Lieber JürgenB,

                                      wodurch es noch besser geworden ist.

                                      :-) Danke.

                                      Liebe Grüße,

                                      Felix Riesterer.