A nouveau un problème avec la balise <pre>

Bonjour à vous,

J'avais déjà soumis ce problème une première fois dans ce post :
https://forum.alsacreations.com/topic-2-90219-1-Probleme-avec-la-balise-ltpregt.html
et j'avais bien compris qu'il fallait que j'encapsule le code Javascript dans les balises <pre> et </pre> et surtout pas mettre chaque ligne dans ces balises.

Or, je viens de le faire dans l'exemple ci-dessous et le code en JavaScript ne s'affiche pas, il est exécuté.

<pre>&lt;!DOCTYPE html></pre>
                        <pre>&lt;html></pre>
                        <pre>   &lt;head></pre>
                        <pre>   &lt;/head></pre>
                        <pre>&lt;body></pre>
                        <pre><span class="mise_en_avant">   &lt;dialog id="myDialog"></span></pre>
                        <pre>     &lt;p>Voulez-vous vraiment supprimer cet élément ?&lt;/p></pre>
                        <pre>     &lt;button id="yesBtn">Oui&lt;/button></pre>
                        <pre>     &lt;button id="noBtn">Non&lt;/button></pre>
                        <pre><span class="mise_en_avant">   &lt;/dialog></span></pre>
                        <pre>   &lt;button id="openDialogBtn">Ouvrir la boîte de dialogue&lt;/button></pre>
                        <pre><script>
                                // Récupération des éléments du DOM
                                var dialog = document.getElementById('myDialog');
                                var openBtn = document.getElementById('openDialogBtn');
                                var yesBtn = document.getElementById('yesBtn');
                                var noBtn = document.getElementById('noBtn');
                                // Ajout d'un écouteur d'événement pour ouvrir la boîte de dialogue
                                openBtn.addEventListener('click', function() {
                                  dialog.show();
                                });
                                // Ajout d'écouteurs d'événements pour gérer la fermeture de la boîte de dialogue
                                yesBtn.addEventListener('click', function() {
                                  // Code pour supprimer l'élément
                                  dialog.close();
                                });
                                noBtn.addEventListener('click', function() {
                                  dialog.close();
                                });
                              </script></pre>
                        <pre>&lt;/body></pre>
                        <pre>&lt;html></pre>

D'où vient le problème ?

Merci pour votre aide.

C'est bon, j'ai vu d'où provenait l'erreur et je l'ai corrigé ! C'était la balise <script> qui n'était pas bien formatée. Je l'ai écrite &lt;script> et &lt;/script> et maintenant le code JavaScript s'affiche et n'est plus exécuté.
Modifié par ObiJuanKenobi (17 Jan 2023 - 07:57)

D'une manière générale il vous faut échapper les tags HTML à l'intérieur des pre. Mais lorsque vous coderez avec un langage dynamique il y aura des fonctions à disposition pour automatiser tout ça.

Salut,

@ObiJuanKenobi : ton code de base est illisible et faux (chevauchement d'élément HTML). On peut faire plus simple. Ce n'est pas du tout la peine de cumuler les <pre>. Un seul suffit. [^1]

<pre>
  &lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;span class="mise_en_avant"&gt;
        &lt;dialog id="myDialog"&gt;
            &lt;p&gt;Voulez-vous vraiment supprimer cet élément ?&lt;/p&gt;
            &lt;button id="yesBtn"&gt;Oui&lt;/button&gt;
            &lt;button id="noBtn"&gt;Non&lt;/button&gt;
        &lt;/dialog&gt;
    &lt;/span&gt;
    &lt;span class="mise_en_avant"&gt;
        &lt;button id="openDialogBtn"&gt;Ouvrir la boîte de dialogue&lt;/button&gt;
    &lt;/span&gt;
    &lt;script&gt;
        // Récupération des éléments du DOM
        var dialog = document.getElementById('myDialog');
        var openBtn = document.getElementById('openDialogBtn');
        var yesBtn = document.getElementById('yesBtn');
        var noBtn = document.getElementById('noBtn');
        // Ajout d'un écouteur d'événement pour ouvrir la boîte de dialogue
        openBtn.addEventListener('click', function() {
            dialog.show();
        });
        // Ajout d'écouteurs d'événements pour gérer la fermeture de la boîte de dialogue
        yesBtn.addEventListener('click', function() {
            // Code pour supprimer l'élément
            dialog.close();
        });
        noBtn.addEventListener('click', function() {
            dialog.close();
        });
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>

Comment suis je arrivé à ce résultat ? C'est très simple. En 2 minutes, j'ai monté un script python. Tu aurais pu le faire en php avec htmlspecialchars

import html


with open('index.html') as f:
    output = html.escape(f.read(), False)

with open('export.txt', 'w') as f:
    f.write(f'<pre>{output}</pre>')

[^1]:
- <pre>
Modifié par niuxe (17 Jan 2023 - 21:01)

@niuxe Moi je sais pourquoi il y a tous ces pre : c'est parce que cela lui semble plus propre lorsqu'il regarde son code source (l'indentation).

Bien sûr, dans la vraie vie, cette considération est superflues et même erronée. Mais chaque chose en son temps.
Modifié par Olivier C (18 Jan 2023 - 01:34)

Merci niuxe pour ta proposition de code en Python ou PHP mais je ne connais pas ces deux langages.

Et en effet, Olivier C a compris pourquoi j'utilise la balise <pre> dans chaque ligne de code. C'est pour que mon code HTML soit beaucoup plus "propre" et facile à lire. Sinon, je dois enlever les indentations parce qu'elles seront reportées sur le résultat final. Et si je les enlève, le code Javascript n'est plus aligné avec le code HTML et je n'aime pas ça.

J'ai vérifié la page web sur le Validator du W3C et il n'y aucune erreur !