JavaScript Input darstellen nach Button Klick mit onclick

[Pfandfinder]

ich habe mit PHP eine schleife durch eine Datenbank wodurch mehrere Zeilen angezeigt werden, daher denke ich kann ich das nur mit onclick als Attribut beim Button machen. ich habe daher folgendes probiert, aber es zeigt das input Feld nicht an beim Klicken, warum ?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="button" type="button" value="Click" onclick="document.getElementById('fn').display = 'block'">
<br>
<div id="fn" style="display: none;">First Name :
  <input type="text" />
</div>

 

[kim88]

Wenn du jQuery einbindest könntest du auch jQuery verwenden. Auch hier würde ich nicht mit Inline JS arbeiten sondern irgendwie so machen:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="button" type="button" value="Click" data-loopnr=".loop-xy">
<br>
<div id="fn" class="loop-xy" style="display: none;">First Name :
  <input type="text" />
</div>
<script>
    jQuery('input[type="button"]').on('click', function() {
        var loop_nr = jQuery(this).data('loopnr');
        jQuery(loop_nr).show();
    });
</script>

Der jQuery Teil kann in ein seperates File, und man statt jedesmall jQuery zu schreiben kann man das auch verwenden. Wenn ich dich richtig verstanden habe wird dein Code oben als Loop ausgegeben. das heisst die id "fn" existiert mehrmals. Aber eine ID darf nur einmal auf einer Seite sein.

In meinem Codebeispiel kannst du die Loops Counten und jeweils das xy durch die Loop-Nr ersetzen.

 

[Pfandfinder]

ah ok danke. wie kann ich das aber jetzt auf ein <i> symbol ändern anstatt button ?

 

[kim88]

Naja am besten gibst du dem eine Klasse: egal ob Button oder sonst was einfach ein class="meine_coole_klasse" zum Elemnt hinzufügen und:

jQuery('input[type="button"]').on('click', function() {

ersetzen durch

jQuery('.meine_coole_klasse').on('click', function() {

 

[Pfandfinder]

hmm aber das klappt nicht mit font awesome icons: https://jsfiddle.net/mc2guz3t/

mit Text geht es: https://jsfiddle.net/szjuo9q8/

 

[kim88]

Du nutzt offenbar die JavaScript Engine von FontAwesome - die erstellt aus dem <i> ein inline SVG Image. deshalb geht es nicht.

Ich denke du kannst das Problem lösen wenn du das <i> in ein <span einbaust und den JS Click Event auf das Span legst.

<span class="diese_klasse_fuer_js_click"><i class="fab fa-accessible-icon" data-loopnr=".2"></i></span>

 

[Pfandfinder]

geht leider auch nicht. https://jsfiddle.net/eo2y4pg3/