✔ onkeyup für Bildanzeige

rernanded

rernanded

Erfahrenes Mitglied
Hallo,
brauche Idee für folgendes Problem:

Bei Eingabe von Worten in ein Input soll je Wort ein anderes Bild eingeblendet werden.

Ich stelle mir vor das die Worte und die dazugehörenden Bilder wie in einer selectbox "definiert" sind.

Ich brauche aber ein Input für Freitext, da wenn kein vordefiniertes Wort eingegeben wird auch kein Bild erscheint.

Vllt. ist onkeyup der richtige eventhandler, habe aber zu wenig Ahnung von js.

Eine Lösung mit selectbox mit onchange habe ich hingekriegt.

MONI
 
Zuletzt bearbeitet:
Soll denn in das Eingabefeld immer nur ein Wort oder auch mehrere eingetragen werden können?
onkeyup ist IMO schon der richtige Handler. Woran scheitert es denn bei dir? Wenn Du es mit einer Selectbox schon hast, können deine Kenntnisse in JS doch nicht sooo schlecht sein.
 
Sempervivum hat gesagt.:
Soll denn in das Eingabefeld immer nur ein Wort oder auch mehrere eingetragen werden können?
onkeyup ist IMO schon der richtige Handler. Woran scheitert es denn bei dir? Wenn Du es mit einer Selectbox schon hast, können deine Kenntnisse in JS doch nicht sooo schlecht sein.
Zum Vergrößern anklicken....
Hallo,
ja kann sein, aber mir fehlt die richtige Idee das für ein Input umzusetzen.
Schön wäre es wenn ich in das Input Worte schreiben kann und sobald ein Wort eingegeben wurde dem ein Bild zugeordnet ist, erscheint das Bild. So kann ich im Prinzip einfach weiterschreiben - falls technisch machbar. Habs auch mit php versucht, klappt aber auch nicht, da ich den "event" nicht hinkriege, ausser ich setz einen zusätzlichen submit-Button ein.

Ich habe das Ganze irgendwo mal mit autocomplete gesehen, aber ich weiß nicht mehr wo. autocomplete ist hier nicht notwendig.

Moni

Hier mal mein Code:
HTML: 
<html>
<head>
<title>bw</title>
<script type="text/javascript">
<!--
function bild_wechsel(select){
document.getElementById("bild").src = select.options[select.options.selectedIndex].value;
return true;
}
// -->
</script>
</head>
<body>
<form action="bw.htm" method="post" name="bw">
<img src="" height="300" width="300" id="bild"><br>
<select name="" onchange="bild_wechsel(this)">
<option value="1.jpg">1</option>
<option value="2.jpg">2</option>
<option value="3.jpg">3</option>
</select>
</form>
</body>
</html>
 
Fang mal so an:
Code: 
var words = {Wort1: "bild1.jpg", Wort2: "bild2.jpg", Wort3: "bild3.jpg"};
var currentWord = "";
function checkWord(text) {
    var currentWords = text.split(" ");
    lastWord = currentWords[currentWords.length - 1];
    im = words[lastWord];
    if (im && currentWord != lastWord) {
        currentWord = lastWord;
        document.getElementById("bild").src = im;
    }
}
Aufruf dann im Eventhandler mit checkWords(this.value).
Ungetestet, aber ich hoffe, dass dieser Ansatz richtig ist.
 
Sempervivum hat gesagt.:
Fang mal so an:
Code: 
var words = {Wort1: "bild1.jpg", Wort2: "bild2.jpg", Wort3: "bild3.jpg"};
var currentWord = "";
function checkWord(text) {
    var currentWords = text.split(" ");
    lastWord = currentWords[currentWords.length - 1];
    im = words[lastWord];
    if (im && currentWord != lastWord) {
        currentWord = lastWord;
        document.getElementById("bild").src = im;
    }
}
Aufruf dann im Eventhandler mit checkWords(this.value).
Ungetestet, aber ich hoffe, dass dieser Ansatz richtig ist.
Zum Vergrößern anklicken....



Hallo,
klappt zu 95% und beim eventhandler muß es checkWord(this.value) lauten, bei Dir ist ein "s" zuviel - s. function.
Zu 95% heißt: bei Eingabe von Wort1, ich hab es mal ersetzt mit 1, also bei 1 erscheint bild1.jpg, aber ich muß erst 1 wieder löschen um zB 2 einzugeben.
Schön wäre der Bildwechsel wenn ich 1 eingebe, dann 2 und dann 3 ohne den vorherigen Wert löschen zu müssen.
Also vielen Dank bis hierhin. Noch eine Idee für das Restproblem? Könnte ich lösen mit onfocus!? Oder gehts auch wenn die Werte stehen bleiben?

MONI
 
Ich habe den Code extra so geschrieben, dass es auch mit mehreren Worten funktionieren sollte. Die Worte müssen durch Leerzeichen getrennt sein. Kannst Du es irgendwo hochladen, damit ich es mir ansehen kann? Wenn nicht, mache ich eine Testdatei.
 
Hab's jetzt getestet und funktioniert einwandfrei. Wenn Du mit "1", "2" und "3" getestet hast, hattest Du wahrscheinlich keine Leerzeichen dazwischen.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück