Hide/show toggle Button mit for Schleife

[hanswerdenfels]

Hallo Python Forum,
Versuche mich momentan zum erstenmal an HTML5 Code.
Mein ziel ist dass ich einen Ordner mit PDF Datein hab welche angezeigt/ausgeblendet werden, wenn auf einen Button mit ihrem Namen geklickt wird. Nun wollte ich wie im code erkennbar die ID meines Listenelements(bzw. PDFs) gleich dem Dateinamen setzten. Beim ausführen werden die PDFS und Buttons angezeigt aber beim klicken auf buttons passiert nichts. Wär mega, wenn mir jemand zeigen könnte wo mein Denkfehler war.

Lg Hannes

Python code:

Code: Alles auswählen

@app.route("/abstract")
def abstract():
    pdf_list = os.listdir("static/PDF")

    return render_template("abstract.html", pdf_list=pdf_list)

HTML code:

Code: Alles auswählen

{% extends "layouts/main.html" %}

{% block content %}
    <script>
    	function toggleElement(test){
        	var x = document.getElementById(test);
        	if (x.style.display==="none"){
        	    	x.style.display="block";
        	}
        	else{
            		x.style.display="none";
        	}
  	  }		
    </script>

    <docs>
        <ul>
            {% for pdf in pdf_list %}

                <button type="submit" onclick="toggleElement({{ pdf }})"> {{ pdf }} </button>
                <li id="{{ pdf }}" ><embed type="application/pdf" src="../../static/PDF/{{ pdf }}" width="80%" height="600px" ></li>

            {% endfor %}
            
       </ul>
    </docs>

[Sirius3]

Auch bei JavaScript-Code sollte man einheitlich Einrücken und nicht Tabs mit Leerzeichen mischen.
x für ein Listenelement ist ein schlechter Variablename. `test` für eine ID auch.
<docs> ist kein Standard-Element. Was soll das sein?
In einem <ul>-Element sollten nur <li>-Elemente vorkommen und nicht auch noch <button>s.
Wenn Du gar keine <form> hast, dann sollte der Typ nicht submit sein.
`pdf` sollte wohl ein String sein und keine Javascript-Variable.

[hanswerdenfels]

Danke für dir schnelle Antwort hab alles soweit angepasst:

Code: Alles auswählen

{% extends "layouts/main.html" %}

{% block content %}
    <script>
    function toggleElement(id){
        var doc = document.getElementById(id);
        if (doc.style.display === "none"){
            doc.style.display="block";
        }
        else{
            x.style.display="none";
        }
    }
    </script>

    <ul>
        {% for pdf in pdf_list %}

            <li><input type="button" onclick="toggleElement({{pdf}})" value="{{pdf}}"></button></li>
            <li><embed id="{{pdf}}" type="application/pdf" src="../../static/PDF/{{ pdf }}" width="80%" height="600px" ></li>

        {% endfor %}
    </ul>

{% endblock %}

Nur das weiss ich nicht wie geht:

`pdf` sollte wohl ein String sein und keine Javascript-Variable.

Soll ich da einfach ein str() oder toString() um {{pdf}} packen oder wie geht das?

Danke und Grüße
Hannes

[Sirius3]

Na dann schau Dir mal die HTML-Seite an, und was da als JavaScript ausgeführt wird.

[hanswerdenfels]

Meinst du so?
Wenn ich die Id manuell eingebe sprich ohne Funktionsparameter klappts aber so irgendwie nicht es scheitert schon immer daran den {{ pdf }} vom button zu übernehmen, wenn ich da Integers einsetze klappt es. Warum übernimmt es die Id nicht von Strings?
Grüße Hannes

Code: Alles auswählen

{% extends "layouts/main.html" %}

{% block content %}
    <script>
    function toggleElement(id){
        stringedId=String(id);
        doc=document.getElementById(stringedId);
        if(doc.style.display === "none"){
            doc.style.display="block";
        }
        else{
            doc.style.display="none";
        }
    }
    </script>

    <ul>
        {% for pdf in pdf_list %}

            <li><input type="button" onclick="toggleElement({{ pdf }})" value="{{pdf}}"></button></li>
            <li><embed id="{{ pdf }}" type="application/pdf" src="../../static/PDF/{{ pdf }}" width="80%" height="600px" ></li>

        {% endfor %}
    </ul>

{% endblock %}

[Sirius3]

In JavaScript werden wie in Python literale Strings in Anführungszeichen gesetzt: toggleElement('{{pdf}}')

[hanswerdenfels]

Funktioniert jetzt, Vielen Dank Sirius!