jocheng
Goto Top

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

Content-Key: 300949

Url: https://administrator.de/contentid/300949

Ausgedruckt am: 28.03.2024 um 16:03 Uhr

Mitglied: agowa338
agowa338 05.04.2016 um 20:04:22 Uhr
Goto Top
Ohne javascript wird das wohl nicht gehen... (oder php)
Mitglied: 114757
114757 05.04.2016 aktualisiert um 22:59:25 Uhr
Goto Top
Mitglied: jocheng
jocheng 07.04.2016 um 14:55:20 Uhr
Goto Top
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 face-sad und was ich einfach nicht kann face-sad
Mitglied: 114757
114757 07.04.2016, aktualisiert am 09.04.2016 um 18:22:41 Uhr
Goto Top
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/
Mitglied: jocheng
jocheng 09.04.2016 um 16:48:38 Uhr
Goto Top
Das geht aber nicht!! oder klappt es bei dir?
Mitglied: 114757
114757 09.04.2016 aktualisiert um 18:23:51 Uhr
Goto Top
War nur ein Tippfühler face-smile Ist korrigiert.
Mitglied: jocheng
jocheng 09.04.2016 um 20:03:15 Uhr
Goto Top
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???
Mitglied: 114757
114757 09.04.2016 aktualisiert um 21:05:54 Uhr
Goto Top
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
<DIV id="answer_div" style="display:none"></DIV>
In dem Fall lässt du dann zusätzlich die Zeilen in denen der Inhalt gesetzt wird weg
Das sind diese:
eltarget.innerText = "KORREKT";
eltarget.innerText = "FALSCH";
Fertsch ...
Mitglied: jocheng
jocheng 10.04.2016 um 08:46:33 Uhr
Goto Top
<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 face-smile
Mitglied: 114757
114757 10.04.2016 aktualisiert um 09:16:22 Uhr
Goto Top
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....
Mitglied: jocheng
jocheng 10.04.2016 um 15:30:06 Uhr
Goto Top
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?
Mitglied: 114757
114757 10.04.2016 aktualisiert um 15:47:36 Uhr
Goto Top
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!!
Mitglied: jocheng
jocheng 19.04.2016 um 13:08:55 Uhr
Goto Top
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?
Mitglied: 114757
114757 19.04.2016 um 13:16:31 Uhr
Goto Top
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 face-wink
Mitglied: jocheng
jocheng 19.04.2016 um 15:49:46 Uhr
Goto Top
{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
Mitglied: 114757
114757 19.04.2016 aktualisiert um 15:55:38 Uhr
Goto Top
Doch.
aber wenn man die Klasse in das ID Tag einträgt, ist Hopfen und Malz vollkommen verloren ..
Mitglied: jocheng
jocheng 19.04.2016 um 17:09:52 Uhr
Goto Top
Ich raff es einfach nicht. Ich habe schon
<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. face-sad Ich glaube ich habe da heute einfach schon zu lange drauf geschaut. Kannst du mir bitte helfen face-smile
Mitglied: 114757
114757 19.04.2016 aktualisiert um 17:20:15 Uhr
Goto Top
Mitglied: jocheng
jocheng 19.04.2016 um 18:32:05 Uhr
Goto Top
du bist genial ;) DANKE DANKE DANKE
Mitglied: jocheng
jocheng 05.06.2016 um 16:50:09 Uhr
Goto Top
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:

<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
Mitglied: 129413
Lösung 129413 05.06.2016 aktualisiert um 17:40:24 Uhr
Goto Top
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
Mitglied: jocheng
jocheng 10.07.2016 um 06:39:54 Uhr
Goto Top
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?

<DIV id="correct" class="correct" data-id="kaiser">