Mehrere Parameter durch einen Button ausgeben in Javascript?

Ich lerne gerade Javascript mit einer Tutorial Reihe und der Mann im Tutorial hat mehrere Parameter benutzt um einen Liebes Test zu Programmieren. Ich wollte dann das man erst einen Knopf drücken muss um das Ergebnis angezeigt zu bekommen. Aber es funktioniert nicht denn wenn ich auf den Button drücke, passiert nichts. woran liegt das ? Das ist mein Code: (Die formatierung ist eigentlich anders)

<!DOCTYPE html>

<html>

<head>

</head>

<body>

function LiebesTest(name1, name2){

document.write(name1 + " und " + name2 + " haben " + punkte + " Punkte ");

var punke;

punkte= (name1+name2).length;

}

LiebesTest("Filme", "serien");

</script>

<form>

<input onclick="text" type="button" value="Test!"

</form>

</body>

</html>

2 Antworten

Vom Fragesteller als hilfreich ausgezeichnet

Dory1

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

JavaScript

20.03.2019, 17:25

<input onclick="text"

kann nicht funktionieren, da keine Variable mit dem Namen "text" definiert ist. Ich dachte du möchtest beim Klick die Funktion "LiebesTest" mit 2 Parametern aufrufen?

Also:

<input onclick="LiebesTest('Filme', 'serien')"

Die Funktion LiebesTest müsstest du noch wie folgt umschreiben:

function LiebesTest(name1, name2) { 
  var punkte  = (name1 + name2).length; 
  document.write(name1 + " und " + name2 + " haben " + punkte + " Punkte ");
}

jennylo2708

Fragesteller

20.03.2019, 17:28

Danke für die Antwort. Ich habe nun aber das Problem das man auf der Seite das Ergebnis sieht ohne das man auf den Button drücken muss. Das Ergebnis sollte aber erste gezeigt werden wenn man den Button drückt. Kannst du mir da helfen ?

Dory1

20.03.2019, 18:39

@jennylo2708

Du hast vermutlich noch irgendwo im JavaScript den Funktions-Aufruf stehen:

LiebesTest('Filme', 'serien');

Der muss natürlich raus, so dass die Funktion erst beim Klick auf den Button aufgerufen wird.

jennylo2708

Fragesteller

20.03.2019, 18:52

@Dory1

Okay habs jetzt ^^" Vielen Dank für die Hilfe

regex9

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, HTML, programmieren

20.03.2019, 17:25

Ja, dein Code hat eine Menge Fehler.

1) Der title-Tag im head fehlt.

2) Der input-Tag ist unvollständig, es fehlt eine Klammer (>) am Ende.

3) Das onclick-Attribut verweist auf ein Element (text), welches nicht existiert. Eigentlich ist der Button selbst ohne Funktion für dein Programm.

4) Du verwendest eine Variable punkte, die nirgendwo zuvor definiert wird.

Schreibe es so um:

<!DOCTYPE html>
<html>
  <head>
    <title>Liebestest</title>
  </head>
  <body>
    <script>
      function Liebestest(name1, name2) {
        var punkte = (name1 + name2).length;
        document.write(name1 + " und " + name2 + " haben " + punkte + " Punkte.");
      }

      Liebestest("Filme", "serien");
    </script>
  </body>
</html>

Demo

PS.: Achso, dein Button soll den Liebestest triggern... dann füge den noch hinzu:

<button onclick="Liebestest('Filme', 'serien')" type="button">Liebestest</button>

und entferne dafür noch den Aufruf im script-Block.

Aktualisierte Demo

jennylo2708

Fragesteller

20.03.2019, 17:36

Hallo. Danke erstmal für deine Antwort. "Du verwendest eine Variable punkte, die nirgendwo zuvor definiert wird." verstehe ich nicht ganz da ich doch zuvor mit " var punkte = (name1 + name2).length;" der variable einen Wert zuweise, oder ?

Dazu habe ich jetzt alles so gemacht wie du geschrieben hast, das neue Dokument öffnet sich aber trotzdem nicht wenn ich auf den Button drücke. Woran liegt das ?

regex9

20.03.2019, 18:49

@jennylo2708

(...) da ich doch zuvor mit " var punkte = (name1 + name2).length;" der variable einen Wert zuweise, oder ?

Du machst es weder vor dem ersten Gebrauch, noch steht diese Zeile irgendwo in deinem Code.

Dazu habe ich jetzt alles so gemacht wie du geschrieben hast, (...)

Dann würde es ja funktionieren. Schau dir die Demos an, die ich zu meiner Antwort verlinkt habe. Wenn du deinen Fehler nicht findest, lade das Dokument erst neu, klicke auf den Button und öffne dann die Browserkonsole, um über mögliche Fehler informiert zu werden.

Wenn du danach noch immer nicht weiterkommst, lade den Code formatiert bei pastebin hoch und verlinke dies hier.

jennylo2708

Fragesteller

20.03.2019, 18:54

@regex9

Ich habe es inzwischen Geschafft. Danke für die Antworten und Erklärungen ^^

Ich habe es schon mit document.write und document.get versucht. Die Aufgabenstellung lautet wie folgt:

"Erstellen Sie eine html Seite, die einen Button enthält. Klickt man auf den Button, wird eine Java Script Funktion aufgerufen, die einen beliebigen Text als alert auf der Seite ausgibt. "

Ich habe bisher folgendes:

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <title>Test</title>
   </head>
   <body>
      <form name="button">
      <input type=button value="Alert" onclick="Box()">
      </form>
      <script language="JavaScript">
         function Box() {alert("Alarm!!")};
      </script>
   </body>
</html>

...zur Frage

HTML input in JavaScript-Variable?

Wenn ich in HTML ein form ausfülle und abschicke wie bekomme ich dann das eingegeben im Input in eine JavaScript Variable. Habe provisorisch mal das hier gemacht und komme nicht weiter. Danke für eure Hilfe :)

<!DOCTYPE html>

<html>

<head>

<title>Input to Variable</title>

var input = "Wie bekomme ich den eingegebenen input hier hin?"

</script>

</head>

<body>

<button>Submit</button>

</body>

</html>

...zur Frage

Website dauerhaft mit Javascript bearbeiten?

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <div>
      <input placeholder="Irgendwas eingeben" id="password">
    </div>
    <button onclick="password()"> Press Me</button>
    <script>
      
      function password() {
        let password = document.getElementById('password').value;
        let element = document.createElement('div');
        element.innerText = password;
        document.body.appendChild(element);
      }
    </script>
  </body>
</html>

Hi wenn ich nun die Website neu Lade dann bleiben die Divs nicht bestehen,

kann mir jemand sagen wie ich die Divs dauerhaft auch für andere clients sichtbar

behalten kann.?

...zur Frage

HTML Label verschieben?

Möchte gerne das Label im untenstehenden HTML Code verschieben. Hab es mit margin im Css versucht weis aber nicht ganz genau wie es geht.

<!DOCTYPE html>

<html>

<head

<title>Probe Seite</title>

</head>

<body>

<h1> Textfelder erstellen </h1>

<label for "vname"> Vorname:

<button type="button" id="button"> auslesen </button>

</label for "vname">

</body>

</html>

...zur Frage

Wie sende ich Variablen von JavaScript nach Flask via jQuery?

Hallo,

ich bin in JavaScript/jQuery und auch Python/Flask noch ein ziemlicher Anfänger. Ich versuche gerade, einfach nur ein JSON-Objekt aus JavaScript in einem HTML-Template mit Flask anzuzeigen.

Hier mein Code:

Flask:

from flask import Flask,request, render_template

app = Flask(__name__)

@app.route("/")
def rofl():
  return render_template("test.html")

@app.route("/test", methods=['POST'])
def test():
  Namensliste = request.get_json(True)
  print(Namensliste)
  return render_template("rofl.html", Namensliste=Namensliste)

if __name__ == '__main__':
  app.run(port=5200)

test.html:

<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <form action="#" method="post">
    <button type="button" onclick="JSONTest()"> Send UserInfo</button>
  </form>
</body>

rofl.html:

<head>
  <meta charset="UTF-8">
  <title>Titel</title>
</head>
<body>
  NamensListe: {{Namensliste}}
</body>

JavaScript-Datei:

var myJason = {
  "name1" : "Jens",
  "name2" : "Josef",
  "name3" : "Johannes"
}

function JSONTest() {
  var MyJason= JSON.stringify(myJason);
  console.log(MyJason)
  $.ajax({
    type: 'POST',
    url: '/test',
    data: MyJason,
    success: function(data) {
      console.log(data, "Rückmeldung1");
  }});
}

Wie mein Code eigentlich funktionieren soll ist: Ich rufe die Route "/" auf, drücke auf den Button: "JSONTest()" und meine Funktion sendet via jQuery mein JSON-Objekt an "/test". Dort wird das Objekt in Namensliste gespeichert und rofl.html mit der Namensliste darin aufgerufen.

Ich weiß, dass hier wahrscheinlich viele Grundlagenfehler drin sind, aber ich habe wirklich ewig lang gegooglet und finde einfach nicht, wie man es richtig macht.

Danke schon einmal für jede Idee.

...zur Frage

Javascript - getElementById funktioniert nicht?

Hey alle zusammen, kann mir jemand sagen, wieso auf der Konsole nicht "123" ausgegeben wird?

echo "</head><body style=\"font-family: Verdana;\">";
echo "<script type = 'text/JavaScript'>console.log('geht los:');console.log(document.getElementById('scannerInput').value);</script>";
echo "<input type=\"text\" id=\"scannerInput\" value=\"123\" />";

...zur Frage

Warum wird alert nicht ausgeführt (Javascript)?

Hi ich Frage mich warum mein alert nicht ausgeführt wird wenn ich auf den buten klicke ...könnte jemand der Javascript beherrscht mir den Fehler sagen ?

Code:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

alert ("willkommen hier");

</script>

var beschreibung = "super,mega,hammer";

var alter= 25;

var vergeben = false;

var name = "boy withb the spoon";

var leer = null;

document.write(name + "ist" + beschreibung + alter + "und sein status ist vergeben " + vergeben);

</script>

//diese variable ist sehr komplieziert

function geklickt(){

alert ("willkommen hier zum zweiten mal");

}

</script>

<form>

</form>

</body>

</html>

...zur Frage

Einfacher Taschenrechner JS?

Hallo :)

Ich soll einen einfachen Taschenrechner mit Eingabefeldern erstellen, so dass er am Ende wie im Bild aussieht, ich weiß nur nicht, wie ich den <script> Teil schreiben muss, sodass er auch tatsächlich funktioniert, kann mir da jemand weiterhelfen?

Hier noch mein bisheriger Code:

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Praktikum Webanwendungen 1</title>
    <style>
      input,
      button {
        margin: 10px;
      }
    </style>
    <script>
     
    </script>
  </head>
  <body>
    <h1>Taschenrechner</h1>
    <label for="number1">Zahl1:</label>
    <input id="number1" type="number">


    <label for="number2">Zahl2:</label>
    <input id="number2" type="number">


    <div>
      <button onclick="add()">+</button>
      <button onclick="subtract()">-</button>
      <button onclick="multiply()">x</button>
      <button onclick="divide()">/</button>
    </div>


    <label for="result">Ergebnis:</label>
    <input id="result" type="number">
  </body>
</html>

...zur Frage

Was funktioniert mit meinem Java Script/html code nicht?

Ich versuche gerade eine einfache Passwortabfrage mit Javascript zu programmieren. Ihr müsst mir auch nicht erst sagen das ich es lieber mit php machen sollte, ich weiß dass das überall steht aber das kapier ich überhauptnicht. Hier ist mein code:

<!DOCTYPE html>
<html>
    <head>
        <title>Basic Web Page</title>
        <script>
            let rightpass = 'hallo';
            let inpu = document.getElementById(input);
            let dkfjl = inpu == rightpass;
            function passwortabfrage() {
                if (dkfjl) {
                    alert('Es hat geklappt')
                } else {
                    alert('failed')
                }
            }
        </script>
    </head>
    <body>
        <form>
        <input type="text" id="input" >
        <input type="submit" onclick="passwortabfrage()">
        </form>
    </body>
</html>

Es geht mir dabei im Moment nicht um Sicherheit, sondern nur darum zu wissen wie was nicht funktioniert. Viele Grüße und Danke für eure Antworten

...zur Frage

HTML/Javscript Euro umrechnen?

Hallo!
Ich bin momentan am verzweifeln.

Ich probiere nun schon seit 1 Stunde einen Euro Umrechner mit Javascript zu progamieren.

Zuerst hat es auch ganz gut geklappt aber als ich mehrere gleichzeitig umrechnen wollte muss ich wohl einen Fehler gemacht haben.

Kennt sich irgend jemand aus und weiß was ich falsch gemacht habe?

Ich bedanke mich schon mal im Voraus :)

Hier der Code für den Rechner der Euro in mehrere Währungen Umrechnen soll:

<html>
<head><center>
<title>Umrechnung Euro - ? </title>
<script language="JavaScript">
function Umrechnung(){



    var EUROBetrag, DMBetrag, DOLLARBetrag, KRONENBetrag;

     EUROBetrag = document.Umrechnung.EURO.value;
     DMBetrag = document.Umrechnung.DM.value;
     DOLLARBetrag = document.Umrechnung.DOLLAR.value;
     KRONENBetrag = document.Umrechnung.KRONEN.value;



    EUROBetrag = DMBetrag / 1.95583;
    EUROBetrag = DOLLARBetrag / 1,13370;
    EUROBetrag = KRONENBetrag / 7,44;

  document.Umrechnung.DM.value=DMBetrag;
  document.Umrechnung.DOLLAR.value=DOLLARBetrag;
  document.Umrechnung.KRONEN.value=KRONENBetrag;

}// Ende
</script>
</center>
</head>

<body><center>
  <br>
  Wir wollen Euro Beträge umrechnen.
<br>
<br>
<form   name="Umrechnung">

EURO   <input type="text"  size="20"  name="Euro">
<br>
<p>
<input  type="button" value="Rechne um" onclick="Umrechnung()">
<p>
DM  <input type="text"  size="20"  name="DM">
DOLLAR  <input type="text"  size="20"  name="DOLLAR">
KRONEN <input type="text"  size="20"  name="KRONEN">

<br>

</form>
</center>
</body>
</html>

Und hier der Code für den Rechner der DM in Euro umrechnen soll und funkioniert:

<html>
<head><center>
<title>Umrechnung Euro - DM </title>
<script language="JavaScript">
function EuroUmrechnung(){



    var DMBetrag, EUROBetrag;

     DMBetrag = document.Umrechnung.DM.value;



    EUROBetrag = DMBetrag / 1.95583;

  document.Umrechnung.EURO.value=EUROBetrag;


}// Ende der Funktion
</script>
</center>
</head>

<body><center>
  <br>
  Wir wollen DM- Beträge in EURO umrechnen.
<br>
<br>
<form   name="Umrechnung">

DM   <input type="text"  size="10"  name="DM">

<br>
<p>
<input  type="button" value="Rechne um" onclick="EuroUmrechnung()">

<p>
EURO   <input type="text"  size="20"  name="EURO">

</form>
</center>
</body>
</html>

...zur Frage

Wie kann ich den Fehler bei meiner To-Do-Liste (mit HTML und JavaScript) beheben?

Mein Ziel ist es, eine To-Do-Liste mit HTML, CSS und Javascript zu erstellen. Eine Person gibt ihr To-Do ein und kann es mit ENTER oder mit dem "Bestätigen"-Button hinzufügen. Gleichzeitig wird auch die Leiste, wo man dies eingibt, wieder geleert.

Wenn man nun dort etwas eingibt und bestätigt, wird die Eingabeleiste geleert, aber das To-Do fügt sich nicht hinzu. Oder besser gesagt: Es erscheint nur für ein paar Millisekunden.

Wie kann ich den Fehler beheben (ich bin Anfänger)?

Hier der Code von der index.html-Datei:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ToDo Liste</title>
    <style>
      #input {
        margin: 50px;
        text-align: center;
      }
    </style>
    <script>
      function addTodo() {
        todolist.innerHTML += `${todofield.value}`;
        todofield.value= '';
      }
    </script>
  </head>
  <body>
    <form onsubmit="addTodo()">
      <div id="input">
        <input type="text" id="todofield">
        <button type="submit" for="todofield">Bestätigen</button>
      </div>
    </form>
    <div id="todolist"></div>
  </body>
</html>

Danke für eure Hilfe.

...zur Frage

Undisabled eines Buttons durch JavaScript?

Hallo,

ich möchte mit Hilfe von JavaScript einen Button, der vorher disabled war, wieder aktiviert, sodass er undisabled ist. Die funktioniert leider nicht und ich habe kein Ahnung an was es liegen könnte.

Mein HTML Code:

<body>

</body>

}

Mein Javascript Code:

let button = document.getElementbyid('button' );

function Test() {

button.disabled = false;

}

Weiß jemand an was es liegen könnte?

...zur Frage

Javascript Formular mit Placeholder rechnen?

Hallo,

ich habe folgenden Code:

<html>
    <head></head>
    <body>
        <input type="number" id="in1" placeholder="0">
        <input type="number" id="in2" placeholder="0">
        <input type="number" id="out">
        <input type="button" value="Weiter" onclick="
            out.value = parseFloat(in1.value) + parseFloat(in2.value);
        ">
    </body>
</html>

Wenn ich in ein Feld nichts eingebe, doll Javascript den placeholder (also 0) als Inhalt ansehen und mit diesem Wert weiterrechnen. Es klappt aber leider noch nicht. Kann mir da wer helfen?

...zur Frage

Warum funktioniert dieser code nicht?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Beta</title>
    <script>
        const bodyElement = document.querySelector("body");

        function setColorBlue() {
            bodyElement.background-color = "blue";
        };

        function setColorRed() {
            bodyElement.background-color = "red";
        };

        function setColorGreen() {
            bodyElement.background-color = "green";
        }
    </script>
</head>
<body>
    <div class="color-picker">
        <button onclick="setColorBlue()">Blue</button>
        <button onclick="setColorRed()">Red</button>
        <button onclick="setColorGreen()">Green</button>

    </div>
</body>
</html>

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen