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