22
Input Text öffnet div tag
Hallo Leute
Ich suche nach einem ganz einfachen weg ein Div durch ein <input type text zu öffnen (nur HTML und CSS)
Was will ich???
Es soll eine einfache Frage gestellt werden zum beispiel "Wie heißt der Kaier von...." bei der Antwort China soll darunter ein kleiner <div> tag aufgehen. Das wars schon. Kann mir jemand helfen???? Mir fehlt die Richtige Idee und leider auch die Kenntnis.
Gruß
Jo
Ich suche nach einem ganz einfachen weg ein Div durch ein <input type text zu öffnen (nur HTML und CSS)
Was will ich???
Es soll eine einfache Frage gestellt werden zum beispiel "Wie heißt der Kaier von...." bei der Antwort China soll darunter ein kleiner <div> tag aufgehen. Das wars schon. Kann mir jemand helfen???? Mir fehlt die Richtige Idee und leider auch die Kenntnis.
Gruß
Jo
Share on Facebook
Share on Twitter
Share on Reddit
Share on LinkedinPlease also mark the comments that contributed to the solution of the article
Content-Key: 300949
Url: https://administrator.de/contentid/300949
Printed on: April 19, 2024 at 20:04 o'clock
22 Comments
Latest comment
Ohne javascript wird das wohl nicht gehen... (oder php)
Super genial @114757 klappt einfach traumhaft. Ich schau mal das ich mir noch nen absende button einbaue aber das denke ich kriege ich schon hin. Der Java Code war das was mir gefehlt hat 
und was ich einfach nicht kann
und was ich einfach nicht kann Zitat von @jocheng:
Super genial @114757 klappt einfach traumhaft. Ich schau mal das ich mir noch nen absende button einbaue
https://jsfiddle.net/6ck6qnvb/11/Super genial @114757 klappt einfach traumhaft. Ich schau mal das ich mir noch nen absende button einbaue
Das geht aber nicht!! oder klappt es bei dir?
War nur ein Tippfühler 
Ist korrigiert.
Ist korrigiert.
Perfekt jetzt muß ich nur noch statt dem Korrekt einen {include file="details/item.tpl"} ausführen können oder einen Link (a href) setzen können dann habe ich alles.
reicht da ein inner.HTML???
reicht da ein inner.HTML???
Entweder du setzt die Eigenschaft innerHTML des DIVs per JavaScript so wie ich es im Beispiel gemacht habe.
Oder du setzt das Template direkt in den DIV im HTML-Code und setzt dann im Inline-Style des DIVs den DIV initial als ausgeblendet
In dem Fall lässt du dann zusätzlich die Zeilen in denen der Inhalt gesetzt wird weg
Das sind diese:
Fertsch ...
Oder du setzt das Template direkt in den DIV im HTML-Code und setzt dann im Inline-Style des DIVs den DIV initial als ausgeblendet
<DIV id="answer_div" style="display:none"></DIV>
Das sind diese:
eltarget.innerText = "KORREKT";
eltarget.innerText = "FALSCH";
<DIV id="answer_div" style="display:none"></DIV>
damit geht es gut nur das Problem ist das ich dann entweder bei beiden den Inhalt des divs angezeigt bekomme oder eben nicht. Bei der falschen Antwort kann ich das div zwar einfach auf none lassen aber dann kommt keine Fehlermeldung. auch mit :before habe ich keine Richtige Lösung hinbekommen. Hast du ne Idee?
Zudem wird der Smarty Include einfach nicht ausgeführt :/ (im div). HTML Links gehen
damit geht es gut nur das Problem ist das ich dann entweder bei beiden den Inhalt des divs angezeigt bekomme oder eben nicht. Bei der falschen Antwort kann ich das div zwar einfach auf none lassen aber dann kommt keine Fehlermeldung. auch mit :before habe ich keine Richtige Lösung hinbekommen. Hast du ne Idee?
Zudem wird der Smarty Include einfach nicht ausgeführt :/ (im div). HTML Links gehen
Dann mach halt zwei DIVs die du je nach Antwort einblendest oder eben ja nach Antwort den entsprechenden Inhalt rein schreibst.
Einfach mal das Hirn einschalten....
Einfach mal das Hirn einschalten....
habe es mit nem 2ten div gemacht. Kannst du mir sagen woran es liegt das ein include mit vode {include file="details/item.tpl"} nicht klappt?
Ich kenn dein CMS und Template System nicht ...
Du wirst wohl die Tags im JavaScript escapen müssen das handelt jedes System anders. Denn geschweifte Klammern sind nunmal in JavaScript spezielle Zeichen die interpretiert werden.
Schau einfach in die Doku deines CMS da steht das 100% drin!!
Du wirst wohl die Tags im JavaScript escapen müssen das handelt jedes System anders. Denn geschweifte Klammern sind nunmal in JavaScript spezielle Zeichen die interpretiert werden.
Schau einfach in die Doku deines CMS da steht das 100% drin!!
Hey Jodel32 ich habe mich heute nochmal dran gesetzt und es geht jetzt alles super. Danke für deine Hilfe.
Das einzige was ich einfach nicht hinbekomme ist das bei Richtiger Antwort ein anderes Div aufgeht wie bei einer Falschen Antwort.
Als Richtig divrichtig und bei falsch divfalsch.
kannst du mir nochmals helfen?
Das einzige was ich einfach nicht hinbekomme ist das bei Richtiger Antwort ein anderes Div aufgeht wie bei einer Falschen Antwort.
Als Richtig divrichtig und bei falsch divfalsch.
kannst du mir nochmals helfen?
2 DIVs in dein HTML reinpacken, beide initial display:none und dann wie gezeigt den style per Javascript auf display:block setzen. feddich. Hirn einschalten 
{literal}
<style type="text/css">
.wrong {
display: block!important;
color: red;
}
.correct {
display: block!important;
color: green;
}
#answer{
display:inline;
font-family:Arial,Sans-Serife;
}
</style>
{/literal}
{literal}
<script language="javascript" type="text/javascript">
function checkInput(elInput,elAnswer,strAnswer){
var eltarget = document.getElementById(elAnswer);
var elInput = document.getElementById(elInput);
if(elInput.value.toLowerCase() == strAnswer.toLowerCase()){
eltarget.setAttribute("class","correct");
}else{
eltarget.setAttribute("class","wrong");
}
}
</script>
{/literal}
wie heißt der Kaiser von china?
<input type="text" id="input_answer" value="" />
<input type="button" value="Prüfen" onClick="checkInput('input_answer','answer_div','china')"/>
<DIV id="answer_div" style="display:none;">Richtig</DIV>
<DIV id="answer_div .wrong" style="display:none;">falsch </DIV> habe ich probiert aber das geht nicht
Doch.
aber wenn man die Klasse in das ID Tag einträgt, ist Hopfen und Malz vollkommen verloren ..
aber wenn man die Klasse in das ID Tag einträgt, ist Hopfen und Malz vollkommen verloren ..
Ich raff es einfach nicht. Ich habe schon
habe ich auch schon probiert aber dann wird mir das div ja immer angezeigt. Ich glaube ich habe da heute einfach schon zu lange drauf geschaut. Kannst du mir bitte helfen
<DIV id="answer_div" class="wrong" style="display:none;">falsch </DIV> habe ich auch schon probiert aber dann wird mir das div ja immer angezeigt.
Ich glaube ich habe da heute einfach schon zu lange drauf geschaut. Kannst du mir bitte helfen
du bist genial ;) DANKE DANKE DANKE
ich brauche nochmals deine Hilfe . was muß ich tun damit 2 Antworten möglich sind???? Ich habe jetzt probiert den input Bereich zu verändern:
aber das funktioniert nicht
<input type="text" id="input_answer" value="Antwort eingeben" onblur="if(this.value=='')this.value='Antwort eingeben';" onfocus="if(this.value=='Antwort eingeben')this.value='';" class="form-control" />
<input type="button" value="Antworten" class="btn btn-primary btn-block btn-sm" onClick="checkInput('input_answer','AntwortA'),('input_answer','AntwortB')"/>
aber das funktioniert nicht
Grüezi,
ich glaub auf den User da oben kannst du lange warten, der hat sich doch abgemeldet?!
https://jsfiddle.net/6ck6qnvb/13/
Aber irgendwie sinnlos, wenn jeder Depp sich die Lösung aus seinem Browserquelltext herausholen kann...
Gruß skybird
ich glaub auf den User da oben kannst du lange warten, der hat sich doch abgemeldet?!
https://jsfiddle.net/6ck6qnvb/13/
Aber irgendwie sinnlos, wenn jeder Depp sich die Lösung aus seinem Browserquelltext herausholen kann...
Gruß skybird
Und wieder suche ich nach einer kleinen erweiterung. Was muß ich machen damit man die Frage nur einmal beantworten muß! Also auf Seite xxx/kaiser.html wird danach gefragt und auf xxx/koenig.html auch noch. Wenn man die Frage aber auf der kaiser.html Seite beantwortet hat soll auch auf koenig.html das Div angezeigt werden.
Da ich ja keinen Plan davon habe bräuchte ich hilfe. Ich habe schon gegoogelt und etwas mit data-id gefunden. Geht es das man dem div eine data-id gibt?
Da ich ja keinen Plan davon habe bräuchte ich hilfe. Ich habe schon gegoogelt und etwas mit data-id gefunden. Geht es das man dem div eine data-id gibt?
<DIV id="correct" class="correct" data-id="kaiser"> 
