Bloc imbriqué javascript

Résolu

nikoala0672 Messages postés 2 Date d'inscription Statut Membre Dernière intervention -
Posotaz Messages postés 489 Date d'inscription Statut Membre Dernière intervention - 28 janv. 2009 à 00:37

Bonjour,
j'aimerais que les blocs générés par le code javascript ci dessous ne se superposent pas mais s'affichent les uns en dessous des autres sans limites, cad un clic provoque l'affichage d'un bloc et ainsi de suite
merci pour les éventuelles réponses

<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<title> blocs imbriqués</title>
<meta name="Author" content="DORE Nicolas">
<style>
body{background-color:#FFFFCC; color:#000000; font-width:12pt; font-family:arial; margin-left:20px, margin-right:20px}
div.bloc{border-width:3px; border-style:solid; border-color:blue; border-width:3px;}
div.titre{font-size:20pt; border-style:solid; border-width:3px; border-color:red; margin-top:0px; margin-bottom:0px;
margin-left:25px; margin-right:25px; padding:15px; }
div.a{background-color:pink; border-style:dashed; border-width:2px; border-color:green; padding:5px; margin: 10px 10%;}
div.b{background-color:blue; border-style:dotted; border-color:red; border-width:2px; color:yellow; padding:20px;}
</style>
<script type="text/javascript">
function afficher_a(){
var message = form.input.value;
a_afficher= eval('document.all.resultat');
a_afficher.innerHTML = "<div class='a'>" + message + "</div><br>";
document.form.action="javascript:afficher_b();"
}
function afficher_b(){
var message = form.input.value;
a_afficher= eval('document.all.resultat');
a_afficher.innerHTML = "<div class='b'>" + message + "</div><br>";
document.form.action="javascript:afficher_a();"
}
</script>
</head>

<body>
<div class="bloc" align="center">
<div>

<div class="titre">
<b>Bienvenue sur notre site</b>
</div>
</div>
<br>
<form name="form" method="post" action="javascript:afficher_a();">
<input type="text" name="input">
<input type="submit" name="bouton" value="ajouter">
</form>

<div class="titre" id="resultat" name="resultat"></div>
</div>

</body>
</html>

Afficher la suite

A voir également:

Bloc imbriqué javascript
Bloc-notes (windows) - Télécharger - Traitement de texte
Code bloc - Télécharger - Langages
Telecharger javascript - Télécharger - Langages
Bloc note gratuit - Télécharger - Agendas & Calendriers
Ouvrez ce fichier avec un éditeur de texte simple (bloc-notes, textedit, gedit, etc.) pour y découvrir le nom d’un objet. ✓ - Forum Études / Formation High-Tech

2 réponses

Réponse 1 / 2

Posotaz Messages postés 489 Date d'inscription Statut Membre Dernière intervention 225

Bonjour Nikoala et bienvenue sur le forum de CCM.net !

JavaScript permet de rajouter dynamiquement des balises (appelons-les noeuds) au document. Il faut pour cela utiliser les objets du DOM (Document Object Model) dont voici une documentation avec exemples : http://fr.selfhtml.org/javascript/objets/node.htm

Et voici ce que j'ai adapté dans ton code pour parvenir au résultat que tu désires :


<script type="text/javascript">

function afficher_a(){
var message = form.input.value;
var a_afficher= eval('document.all.resultat');
var enfant = document.createElement("div");
var txt = document.createTextNode(message);
enfant.appendChild(txt);
enfant.setAttribute("class", "a");
a_afficher.appendChild(enfant);
document.form.action="javascript:afficher_b();"
}

function afficher_b(){
var message = form.input.value;
var a_afficher= eval('document.all.resultat');
var enfant = document.createElement("div");
var txt = document.createTextNode(message);
enfant.appendChild(txt);
enfant.setAttribute("class", "b");
a_afficher.appendChild(enfant);
document.form.action="javascript:afficher_a();"
}
</script>

En gros je crée un nouveau noeud et je le rajoute à ton div "resultat" plutôt que de remplacer tout simplement son texte. Simple comme bonjour, n'est-ce pas ? :D Il faut bien sûr optimiser tout ça et utiliser des pratiques un peu plus conventionnelles, mais le fonctionnel est là...

nikoala0672 Messages postés 2 Date d'inscription Statut Membre Dernière intervention

merci, c'est exactement ça.

Réponse 2 / 2

Posotaz Messages postés 489 Date d'inscription Statut Membre Dernière intervention 225

Content d'avoir pu t'aider :-)

Puis-je te demander de passer la discussion en "résolu" s'il te plait ?

Discussions similaires

Le bloc lu n'est pas un bloc

java script error in the main process

Javascript Arrondi à 2 chiffres après la virgule

Brancher des BAES sans télécommande ?

telecommande BAES

Votre réponse

Discussions similaires