InnerHTML et input

**Obaibi** · 13/05/2016, 00h20

Bonjour,

J'ai un petit soucis avec le script, j'ai fait le script suivant:

Code :

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
<html>
<head>
<meta charset="UTF-8"/>
<title> Baromètre Social </title>
 </head>
 <body>
 <form>
 <div id="titre">
<h2 onclick="change_title()" >Sans titre</h2>
</div>
 </form>
 <script>
    function change_title()
{
     document.getElementById("titre").innerHTML="<input type='text' value='Sans titre'/>";
}
</script>
</body>
<html>

Ma question est simple: comment faire pour que le contenu saisi dans l'input de l'�venement javascript modifie le titre en g�n�ral ? En gros faire en sorte que cela change le titre entre les deux balises h2. Je sais pas si c'est possible. J'ai vraiment quelques rudiments de javascript pas plus mais je suis preneur pour une explication.

Merci d'avance
-

**ABCIWEB** · 13/05/2016, 02h44

Salut,

Si tu veux pouvoir modifier le titre depuis le html par l'interm�diaire d'un input de type texte, il faut mettre cet input dans le html, � moins que tu veuille faire afficher cet input dynamiquement en javascript. Ensuite tu r�cup�re la valeur de l'input avec la propri�t� "value".

Comme je ne sais pas trop ce que tu veux faire je te donne un petit exemple qui devrait t'occuper un peu :

Code :

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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="Description" content = "">
<title>Baromètre Social</title>
 
</head>
<body>
 
<h1 id="titre">Sans titre</h1>
 
<p onclick="addInput(this,'insert_input')">Cliquer ici pour insérer un champ</p>
 
<div id="insert_input"></div> 
 
<p onclick="changeTitle('toto')">Cliquer ici pour changer le titre avec toto</p>
 
 
<script>
function addInput(element,id_cible)
{
	var input = '<input type="text" /><button onclick="changeTitle(this.previousSibling.value);">Changer le titre avec le contenu de l\'input text ci-contre</button>';	
 
        document.getElementById(id_cible).innerHTML = input;
 
	element.remove();
}
 
function changeTitle(value)
{
	document.getElementById("titre").innerHTML = value;
}
</script>
 
</body>
</html>

**Obaibi** · 13/05/2016, 13h30

Bonjour,

Tout d'abord merci pour votre r�ponse.

J'ai regard� le script, je l'ai compris. Je vais le reprendre m�me si mon id�e de d�part �tait de ne pas interagir avec un bouton. Je voulais faire un champs un peu la google form, quand tu cliques dessus tu as l'input qui appara�t, tu peux �crire ce que tu veux dedans et quand tu cliques ailleurs sur la page �a fait appara�tre le texte que tu as saisi sous forme de titre uniquement. Mais �a m'a l'air trop complexe pour mon niveau.

Je vous remercie de l'aide apport�e.

**ABCIWEB** · 13/05/2016, 19h27

Salut,

Si j'ai bien compris ce que tu veux, c'est pas difficile, m�me un peu plus simple : dans la fonction "addInput()" du code ci-dessus il te suffit de remplacer la variable "var input" :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

var input = '<input type="text" /><button onclick="changeTitle(this.previousSibling.value);">Changer le titre avec le contenu de l\'input text ci-contre</button>';

par

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

var input = '<input  type="text"  onblur="changeTitle(this.value)" />';

Apr�s pour avancer plus en avant dans la gestion des �v�nements javascript il faudra rapidement t'int�resser � addEventListener

**Auteur** · 15/05/2016, 00h47

Autre m�thode : on peut tr�s bien avoir le champ input cach�. Lors du clic sur le titre, le titre disparait et laisse place au champ input. Lorsque l'on quitte le champ, l'effet inverse se produit.

Code javascript :

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
function clickTitle()
{
	var i = document.getElementById("txt");
	var t = document.getElementById('titre');
	t.style.display = "none";
	i.style.display = "inline";	
	i.value = "";
	i.focus();
}
 
function focusOut()
{
	var i = document.getElementById("txt");
	var t = document.getElementById('titre');
	i.style.display='none';
	t.innerHTML = i.value;
	t.style.display = "block";
}

Code html :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
<h1 id="titre" onclick="clickTitle()">Ceci est un titre</h1>
<input id="txt" type="text" style="display:none" onblur="focusOut()"/>

Par contre, pour le code JS il vaut mieux le mettre dans l'ent�te (balises head) et pas dans le corps (body) de la page.

J'en profite aussi pour dire que les balises h doivent ob�ir � une certaine hi�rarchie :
https://developer.mozilla.org/fr/doc...ading_Elements

**ABCIWEB** · 15/05/2016, 03h47

Envoy� par Auteur

Par contre, pour le code JS il vaut mieux le mettre dans l'ent�te (balises head) et pas dans le corps (body) de la page.

Non, mettre le code javascript en bas du body permet aux navigateurs de commencer � construire la page sans attendre la fin du chargement du code javascript.

Il y a quelques ann�es je faisais comme toi, mais bon j'en ai eu marre des messages de google PageSpeed donc j'ai fini par mettre le js en bas du body. Cela fonctionne tout aussi bien et si cela peut permettre d'optimiser le chargement de la page...

Donc si en consultant le code source des pages tu vois aujourd'hui une grande majorit� de javascript en bas de page, ce n'est pas une erreur ni une n�gligence : les plaintes sont � d�poser chez google

**NoSmoking** · 15/05/2016, 10h38

Bonjour,
SylvainPV � �crit une entr�e de faq la dessus :
O� placer les balises script dans le code de la page HTML ?.

**Obaibi** · 15/05/2016, 14h06

Bonjour, je regarde le code et j'essaie de le comprendre dans la soir�e. J'ai pas eu le temps de revenir dessus. Merci beaucoup en tout cas.

Edit: Pour ce qui est de la place, j'ai pris l'habitude de placer des courts scripts js en bas du body sur symfony. Donc j'ai gard� cette pratique.

Merci pour le code j'ai r�solu mon probl�me.

InnerHTML et input

JavaScript

Discussions similaires

Partager

Partager