Bonjour à tous,

Je poste ce message car j'ai une difficulté dans l'affichage dans un formulaire dynamique en HTML et JS.

A chaque fois que l'internaute choisit une réponse, j'essaie d'afficher un bloc correspondant à la réponse.

Dans ce cas, lorsqu'il répond à la première question, le bon bloc 2 s'affiche bien. Mais quand on passe à la question 3, impossible d'afficher le bon bloc en question. En lisant en ligne la doc, j'ai compris qu'il y a un conflit entre mes balises <span> qui encadre les blocs 3 à 5 et ma fonction "onchange" qui est censé appeler le bon bloc en fonction de la réponse.

Avez-vous une idée : savez-vous comment je pourrais contourner ce problème ?
Je suis débutante en JS.
Merci d'avance pour votre aide.

Voici mon code :
Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="style-devis.css" />
        <title>Demande de devis</title>
    </head>
 
    <body onload="aff_vitrine('non'); aff_commerce('non'); seo('non'), blog_vitrine('non')"  />
 
 
    <H1>Commencez votre projet : demandez un devis</H1>
 
    <p>Vous avez une idée, un projet web mais vous ne savez pas par quoi commencer.<br/>
        Répondez au formulaire ci-dessous. Son objectif : vous aider à trouver la solution la plus adéquate.</p>
 
 
    <form method="post" action="postIndex.php">
 
        <!-- question 1 -->
        <label>Quel type de site souhaitez-vous ?</label><br/>
        <input type="radio" name="site" value="Site Vitrine"  onchange="aff_vitrine('oui'); aff_commerce('non')" /><label>Site Vitrine</label>
        <input type="radio" name="site" value="Site E-commerce" onchange="aff_vitrine('non'); aff_commerce('oui')"/><label>Site E-commerce</label> </br>
*********<br/>
 
        <!-- question 2 si réponse site vitrine -->
        <span type="hidden" id="block_vitrine">
        <label>Combien de pages contiendra votre site ?</label><br/>
            <input type="radio" name="pages" value="One page" onchange="seo('oui'); blog_vitrine('non')" /><label>Uniquement 1 page</label>
        <br/>
            <input type="radio" name="pages" value="Five pages" onchange="seo('non'); blog_vitrine('oui') "/><label>Entre 1 et 5 pages</label>
        <br />
            <input type="radio" name="pages" value="Ten pages" onchange="seo('non'); blog_vitrine('oui')"/><label>De 6 à 10 pages</label>*
        </span>
 
        <!-- question 2 si réponse e-commerce -->
        <span id="block_commerce">
        <label>Combien de pages contiendra votre site ?</label><br/>
        <input type="radio" name="pages" value="Five pages" />Entre 1 et 5 pages
        <br />
        <input type="radio" name="pages" value="Ten pages" />De 6 à 10 pages
        </span>
 
        <!-- question 3 si site vitrine et Une page -->
        <span id="block_seo">
        <label>Souhaitez-vous que l'on optimise le référencement de votre site pour qu'il soit plus visible sur les moteurs de recherche ?</label><br/>
        <input type="radio" name="seo" value="yes" />Oui
        <br/>
        <input type="radio" name="seo" value="no" />Non
        </span>
 
        <!-- question 3 si site vitrine et 1 à 10 pages -->
        <span id="block_blog">
        <label>Dans votre site, un espace "Blog" sera utile ?</label><br/>
        <input type="radio" name="blog" value="yes" />Oui
        <br/>
        <input type="radio" name="blog" value="no" />Non
        </span>
 
        <input type="submit" value="Envoyez" />
    </form>
 
 
<!-- Fonctions JS -->
<script>
    function aff_vitrine(action){
        if (action == "oui") {
            document.getElementById('block_vitrine').style.display="inline";
        }
        else {
            document.getElementById('block_vitrine').style.display="none";
        }
        return true;
    }
 
    function aff_commerce(action){
        if (action == "oui")  {
            document.getElementById('block_commerce').style.display="inline";
        }
        else {
            document.getElementById('block_commerce').style.display="none";
        }
        return true;
    }
 
    function seo(action){
        if (action == "oui")  {
            document.getElementById('block_seo').style.display="inline";
        }
        else {
            document.getElementById('block_seo').style.display="none";
        }
        return true;
    }
 
    function blog_vitrine(action){
        if (action == "oui")  {
            document.getElementById('block_blog').style.display="inline";
        }
        else {
            document.getElementById('block_blog').style.display="none";
        }
        return true;
    }
 
</script>
</body>
</html>