Javascript, wie erstellt man event handler? Jquery?

Wir sollen klick event handler erstellen.

  1. Erstellen Sie einen Klick-Event-Handler, welcher fur eine eingegebene Zahl (ein HTML- Input-Feld) herausfindet, ob das dritte Bit dieser Zahl gesetzt ist.

Hinweis: Bsp: Eingabe: 4, 4 = 100(Dualsystem) Das dritte Bit ist gesetzt! Verwenden Sie logische Operatoren um diese Aufgabe zu l ̈osen.

 Aufgabe 2 – Sortieren

Erstellen Sie einen Klick-Event-Handler, welcher drei eingegebene Zahlen (je ein HTML-Input-Feld) der Gro ̈ße nach aufsteigend sortiert und diese in der richtigen Reihenfolge nach auf Ihrer Seite ausgibt. Nutzen Sie den entsprechenden Typ fu ̈r Zahlen.

Hinweis: Verwenden Sie zum Testen die If- oder If ... Then ... Else- Anweisung sowie die booleschen Operatoren zur U ̈berpru ̈fung der Bedingungen. Machen Sie sich vorerst Gedanken, wie man die Reihenfolge u ̈berpru ̈fen kann.

Aufgabe 3 – Benotung

Schreiben Sie einen Klick-Event-Handler, welcher eine Zahl zwischen 1 und 6 (Schul- note) als Eingabe erwartet. Abh ̈angig von der Eingabe soll auf Ihrer Seite die Schul- note in Textform ausgegeben werden. Wenn eine Zahl gro ̈ßer als 6 oder kleiner als 1 eingegeben wird, soll eine Fehlermeldung ausgegeben werden. Geben Sie das Ergebnis auf Ihrer Webseite aus.

Hinweis: Die Bewertungen lauten: 1: sehr gut 3: befriedigend 5: mangelhaft 2: gut 4: ausreichend 6: ungenugend

Wir arbeiten mit Typescript und jquery. Kann mir jemand helfen wie ich hier an die Sache ran gehen soll? Ich weiss dass ich eine html datei und eine typescript datei brauche. Aber bin so verwirrt wie ich das anlegen soll.

...zum Beitrag

Aufgabe 3

html:

<!DOCTYPE html>

<html lang="de">

<head>

  <meta charset="UTF-8">

  <title>Benotung</title>

  <script src="node_modules/jquery/dist/jquery.min.js"></script>

  <script src="6.3.js"></script>

</head>

<body>

<section id= "6.3">

  <hr class="section-heading-spacer">

  <div class="container">

    <h2 class="section-heading">Aufgabenblatt 6</h2>

    <div class="row">

      <div class="col-md-3">

        <h3 class="section-heading">Aufgabe 6.3 Noten zuordnen</h3>

        <label for="Eingabe">Note eingeben:</label>

        <input id="Eingabe" class="form-control" type=number/>

        <button id="Bewertung" class="btn btn-info">Bewertung</button>

        <p id="Ausgabe"></p>

      </div>

    </div>

  </div>

  <script src="6.3.js"></script>

</body>

</html>

ts/js:

$(function () {

  $("#Bewertung").click(function (event) {

    var Note = document.getElementById("Eingabe").value;

    switch (Note) {

      case '1':

        $("#Ausgabe").text("Deine Note ist sehr gut");

        break;

      case '2':

        $("#Ausgabe").text("Deine Note ist gut");

        break;

      case '3':

        $("#Ausgabe").text("Deine Note ist befriedigend");

        break;

      case '4':

        $("#Ausgabe").text("Deine Note ist ausreichend");

        break;

      case '5':

        $("#Ausgabe").text("Deine Note ist mangelhaft");

        break;

      case '6':

        $("#Ausgabe").text("Deine Note ist ungenügend");

        break;

      default:

        $("#Ausgabe").text("Die eingegebene Zahl ist keine Schulnote");

        break;

    }

  });

});

...zur Antwort