Bloc imbriqué javascript

Résolu/Fermé

nikoala0672 Messages postés 2 Date d'inscription dimanche 25 janvier 2009 Statut Membre Dernière intervention 27 janvier 2009 - 25 janv. 2009 à 19:50
Posotaz Messages postés 489 Date d'inscription samedi 23 juin 2007 Statut Membre Dernière intervention 19 juin 2011 - 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>

A voir également:

Bloc imbriqué javascript
Telecharger javascript - Télécharger - Langages
Bloc-notes (windows) - Télécharger - Traitement de texte
Code bloc - Télécharger - Langages
Bloc note gratuit - Télécharger - Agendas & Calendriers
Bloc invisible minecraft - Forum Minecraft

2 réponses

Réponse 1 / 2

Posotaz Messages postés 489 Date d'inscription samedi 23 juin 2007 Statut Membre Dernière intervention 19 juin 2011 225
27 janv. 2009 à 01:08

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 dimanche 25 janvier 2009 Statut Membre Dernière intervention 27 janvier 2009
27 janv. 2009 à 12:14

merci, c'est exactement ça.

Réponse 2 / 2

Posotaz Messages postés 489 Date d'inscription samedi 23 juin 2007 Statut Membre Dernière intervention 19 juin 2011 225
28 janv. 2009 à 00:37

Content d'avoir pu t'aider :-)

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

Discussions similaires

Javascript Arrondi à 2 chiffres après la virgule

Le bloc lu n'est pas un bloc

nom de metier

Comment avoir des barrières invisible Minecraft pe

java script error in the main process