onclick funktionsaufruf

[ChrisW]

Hallo zusammen,

schon mal vorne Weg, danke für eure Hilfe. Für alle hier ist die Frage wahrscheinlich extrem dämlich, für mich aber irgendwie eine große Hürde.

Ich hab den Auftrag bekommen eine HTML Seite zu erstellen, bei der per Knopfdruck 2 Strings mit einander verglichen werden.

Der Button steht, die Eingabe auch, die Funktion ebenso. Was mir jetzt Probleme bereitet ist der Aufruf der Funktion bei "onclick".

  
  
<form action="input_text.htm">  
  <p>Master Code:<br><input name="Code1" type="text" size="30" maxlength="30"></p>  
  <p>Vergleichs Code:<br><input name="Code2" type="text" size="30" maxlength="40"></p>  
  
    <button name="Button_Vergleichen" type="button" style="width:100px;height: 100px"  
            value="Vergleichen" onclick="setVergleichen()">  
  
                <b>Vergleichen</b>  
  
    </button>  
</form>  
<script type="text/javascript">  
function setVergleichen(event) {  
        if (Code1 === Code2)  
            alert('Codes sind gleich!');  
        else if (Code1 !== Code2)  
            alert('Codes Ungleich!');  
  
}  
  
  
</script>

So sieht das bei mir aus. Kann mir jemand sagen wie ich das machen muss?

Danke im Vorraus.

Grüße ChrisW

[Gunnar Bittersmann]

@@ChrisW:

nuqneH

<p>Master Code:<br><input name="Code1" type="text" size="30" maxlength="30"></p>
  <p>Vergleichs Code:<br><input name="Code2" type="text" size="30" maxlength="40"></p>

„Master Code“ und „Vergleichs Code“ sollten:

1. als label ausgezeichnet werden. (Was im Artikel nicht genannt wird: besonders wichtig auch für Nutzer assistiver Technologien wie Screenreader, die sonst schwer bis gar nicht erkennen, welchen Zweck ein Eingabefeld hat.)

2. richtig geschrieben werden.

So sieht das bei mir aus. Kann mir jemand sagen wie ich das machen muss?

http://de.selfhtml.org/javascript/objekte/elements.htm@title=Formularelement ansprechen und Wert auslesen.

Danke im Vorraus.

Gerrn.

Qapla'

[Gunnar Bittersmann]

@@ChrisW:

nuqneH

<button name="Button_Vergleichen" type="button" style="width:100px;height: 100px"
            value="Vergleichen" onclick="setVergleichen()">

JavaScript sollte nicht in HTML-Attributen (wie onclick) stehen. Besser: die Handler per JavaScript registrieren.

<b>Vergleichen</b>

Das b-Element sollte nicht zur Präsentation (fett) eingesetzt werden. Hier ist es auch unnötig, der Button kann mit CSS entsprechend formatiert werden: button { font-weight: bold }

Qapla'

[Quincunx]

Hallo ChrisW,

<form action="input_text.htm">

if (Code1 === Code2) {alert('Codes sind gleich!');}

else {alert('Codes Ungleich!');}

  
Deine Form braucht zumindest ein NAME Attribute.  
`<form name="compare" action="input_text.htm">`{:.language-html}  
  
erst dann kannst du die Werte deine Formularelemente vergleichen.  
  
entweder per Form Name:  
~~~javascript
function setVergleichen() {  
  if (document.compare.Code1.value === document.compare.Code2.value) alert('Codes sind gleich!');  
  else alert('Codes Ungleich!');  
}

oder per Element ID:

function setVergleichen() {  
  var code1 = document.getElementById('Code1').value,  
  code2 = document.getElementById('Code2').value;  
  (code1 === code2) ? alert('Codes sind gleich!') : alert('Codes Ungleich!');  
}

gruesse qx

[heut aus Spass mal anonym]

Hi!

Deine Form braucht zumindest ein NAME Attribute.
<form name="compare" action="input_text.htm">

Aha.

erst dann kannst du die Werte deine Formularelemente vergleichen.

Hae?

entweder per Form Name:

function setVergleichen() {

if (document.compare.Code1.value === document.compare.Code2.value) alert('Codes sind gleich!');
  else alert('Codes Ungleich!');
}

  
Okay. So stimmt das.  
  

> oder per Element ID:  
> ~~~javascript

function setVergleichen() {  

>   var code1 = document.getElementById('Code1').value,  
>   code2 = document.getElementById('Code2').value;  
>   (code1 === code2) ? alert('Codes sind gleich!') : alert('Codes Ungleich!');  
> }

Und dafuer braucht das Formular jetzt warum genau einen Namen? ;)

Du haettest aber etwas naeher darauf eingehen koennen, dass das If else If Konstrukt umstaendlich und in der Form unnoetig ist, weil ein Vergleich auf ungleichheit unnoetig ist wenn schon ein Vergleich auf Gleichheit false geliefert hat, statt ihm einfach die verkuerzte Schreibweise hinzuhauen.

[quincunx]

statt ihm einfach die verkuerzte Schreibweise hinzuhauen.

für Prosa bin ich völlig ungeeignet, Erklärungen sind für mich mühselig auch können das andere viel besser! Mein Ansatz ist ein funktionierendes Beispiel im Zusammenhang der gestellten Frage.

<!DOCTYPE html>  
<html lang="de">  
<head>  
<meta charset="UTF-8">  
<title>setVergleichen</title>

<style>  
#Button_Vergleichen {  
  width: 100px;  
  height: 100px;  
}  
</style>

  
</head>  
<body>  
  
<form name="compare" action="input_text.htm">  
  <p>Master Code:<br><input id="code1" name="code1" type="text" size="30" maxlength="30"></p>  
  <p>Vergleichs Code:<br><input id="code2" name="code2" type="text" size="30" maxlength="30"></p>  
  <button id="Button_Vergleichen" type="button">Vergleichen</button>  
</form>

<script>  
var compare = {  
  
  $: function (id) {  
    return (id !== null) ? document.getElementById(id) : null;  
  },  
  
  add: function (obj, eTyp, prog, capt) {  
    capt = capt || false;  
    if (obj) {  
      if (obj.addEventListener) {  
        obj.addEventListener(eTyp, prog, capt);  
      }  
      else if (obj.attachEvent) {  
        obj.attachEvent('on' + eTyp, prog);  
      }  
    }  
  },  
  
  setVergleichen : function (e) {  
    var code1 = compare.$('code1').value,  
    code2 = compare.$('code2').value;  
    (code1 === code2) ? console.log('Codes sind gleich!') : console.log('Codes Ungleich!');  
  }  
  
};  
compare.add(compare.$('Button_Vergleichen'), 'click', compare.setVergleichen);  
</script>

</body>  
</html>

[Steel (schon wieder ohne Anmeldung)]

Uh. Cool. JS for runaways. Ich glaub das haut den TE aus seinen "Starterpantoffeln des JS Adepten +1".

[Quincunx]

Uh. Cool. JS for runaways. Ich glaub das haut den TE aus seinen "Starterpantoffeln des JS Adepten +1".

yupp!