Changer contenu d'une div

Version imprimable

Bonjour a tous,
avant de commencer je tiens a dire que je suis débutant en javascript, si je ne suis pas très clair dans mes propos n’hésitez pas à me demander ! :)

J'ai un TP à faire en javascript (pas de bibliothèque comme jquery ou autre autorisé), le but de ce tp est de changer le contenu d'une <div> (son contenu sera toujours sois une image, sois une vidéo) via un formulaire. Dans ce formulaire on mettra l'url de l'image/vidéo que l'on voudrait afficher.
J'ai passé 5 heures ce soir à essayer d'arriver à qlqc mais hélas rien ne marche :(

Voici mon code :

******------------------------------------------------------------------------------------------------------------------------------------------------------****
Le javascript
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 var url='<?php echo $url>'; //url de l'image ou vidéo envoyer via le formulaire GetPreviewDiv(){ // fait un getElementByID de la div de preview. var conteneur = document.getElementById('divPreview'); } GetHTMLToInsert(url){ // retourne le code html qui sera inséré dans la div var monImg = document.createElement('img'); // creation img monImg.src = url; // affectation de l'url pour le "<img src="xxx"> return monImg; } InsertHTML(url){ // utilise les deux fonctions précédentes pour insérer l'html dans la div. GetPreviewDiv().innerHTML = GetHTMLToInsert(url); // ici je tiens a dire que je ne suis pas sur du tout de ce que j'ai marqué. }
******------------------------------------------------------------------------------------------------------------------------------------------------------****
Le HTML :
Code:

1 2 3 4 5 6 7 8 <div id='divPreview' style='border-style:solid; height:315px; width:560px; max-width:100%;'> Ici la fameuse div </div> <FORM> <input type="text" id="url" /> <input type="submit" value="validez" onclick="InsertHTML(url);" /> </FORM>
******------------------------------------------------------------------------------------------------------------------------------------------------------****

Voilà j’espère qu'une âme charitable puisse m'aider car je suis sacrément dans la mierda ^^ Si vous avez des questions n'hésitez pas !!
Merci d'avance

22/12/2014, 00h13
SylvainPV

Bonsoir,
Bon y'a du boulot...
- déjà ce n'est pas du tout comme ça qu'on déclare les fonctions en JavaScript, donc retour aux cahiers ou aux tutos de base du langage
- la fonction GetPreviewDiv n'a pas d'instruction return donc ne renvoie rien du tout
- la fonction GetHTMLToInsert renvoie un élément image, et non le HTML de cet élément. Pour suivre la logique du code, il faudrait retourner monImg.outerHTML ou alors utiliser appendChild au lieu de innerHTML
- un input submit dans un formulaire va soumettre ce formulaire donc rafraichir la page et perdre le JavaScript en cours d'éxécution. Il faut bloquer la soumission du formulaire dans la fonction insertHTML ou alors utiliser un simple <button> plutôt qu'un formulaire.

Après quelque modification ça donne ca :

******------------------------------------------------------------------------------------------------------------------------------------------------------****

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var url='<?php echo $url>';
 
function GetPreviewDiv(){    // fait un getElementByID de la div de preview.
    var conteneur = document.getElementById('divPreview');
    return conteneur;
}
 
function GetHTMLToInsert(url){  // retourne le code html qui sera inséré dans la div
    var monImg = document.createElement("img");
    monImg.src = url;
    return monImg;
}
 
function InsertHTML(url){   // utilise les deux fonctions précédentes pour insérer l'html dans la div.
GetPreviewDiv().outerHTML = GetHTMLToInsert(url);
}

22/12/2014, 01h24
SylvainPV

Citation:

Envoyé par SylvainPV

Pour suivre la logique du code, il faudrait retourner monImg.outerHTML ou alors utiliser appendChild au lieu de innerHTML

Tu n'as fait ni l'un ni l'autre, tu as fait un mélange des deux qui du coup n'a plus aucun sens. Quand on te présente des propriétés ou méthodes que tu ne connais pas, la première chose à faire est de lire leur documentation pour comprendre leur rôle. Même quand il s'agit d'un devoir en retard...

Je pense être arrivé a quelque chose de plus concret :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
 
var url = document.getElementById("url").value; //ici le text inserer dans le formulaire
 
 
function GetPreviewDiv(){    // fait un getElementByID de la div de preview.
    var conteneur = document.getElementById('divPreview');
    return conteneur;
}
 
function GetHTMLToInsert(url){  // retourne le code html qui sera inséré dans la div
    var monImg = document.createElement("img");
    monImg.src = url;
    var codeHTML = '<img src='monImg'>';  // <---------- Je ne sais pas si ça se fait en javascript.. Éclairez moi ! 
    return codeHTML;
}
 
function InsertHTML(){   // utilise les deux fonctions précédentes pour insérer l'html dans la div.
    var urlFinale = document.GetPreviewDiv.appendChild(GetHTMLToInsert()); //Pour moi ici c'est correct mais je sais pas si la synthaxe est la bonne...
    return urlFinale;
}

Voilà dites moi ce que vous en pensez... Merci :)

- Il faut récupérer la valeur de l'URL au moment du clic, car elle peut avoir changé entre temps. Donc la première ligne est à déplacer dans InsertHTML
- GetPreviewDiv est une fonction, il manque les parenthèses dans son appel dans la fonction InsertHTML
- appendChild ne renvoie pas d' "URL finale", je ne comprends pas pourquoi tu as nommé cette variable comme ça et pourquoi tu la retournes par insertHTML

Et tu as à nouveau fait un mélange des deux solutions que je t'avais présenté, mais cette fois-ci dans l'autre sens.... je devrais me contenter d'exposer une seule solution vu que visiblement ça ne fait qu'embrouiller les gens :aie:

Solution 1:
Code:

1 2 3 4 5 6 7 8 9 10 function GetHTMLToInsert(url){ // retourne l'élément Image qui sera inséré dans la div var monImg = document.createElement("img"); monImg.src = url; return monImg; } function InsertHTML(){ // utilise les deux fonctions précédentes pour insérer l'html dans la div. var url = document.getElementById("url").value; //ici le text inserer dans le formulaire document.GetPreviewDiv().appendChild(GetHTMLToInsert(url)); //Pour moi ici c'est correct mais je sais pas si la synthaxe est la bonne... }
Solution 2:
Code:

1 2 3 4 5 6 7 8 9 function GetHTMLToInsert(url){ // retourne le code html qui sera inséré dans la div var codeHTML = '<img src="'+url+'">'; return codeHTML; } function InsertHTML(){ // utilise les deux fonctions précédentes pour insérer l'html dans la div. var url = document.getElementById("url").value; //ici le text inserer dans le formulaire document.GetPreviewDiv().innerHTML = GetHTMLToInsert(url); }

Bon ça ne marche toujours pas et je suis a deux doigts d'arrêter :furieux: !

Niveau code Javascript j'ai fait ce que tu m'as dit ça donne cela :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 function GetPreviewDiv(){ // fait un getElementByID de la div de preview. var conteneur = document.getElementById('divPreview'); return conteneur; } function GetHTMLToInsert(url){ // retourne le code html qui sera inséré dans la div var codeHTML = '<img src="'+url+'">'; return codeHTML; } function InsertHTML(){ // utilise les deux fonctions précédentes pour insérer l'html dans la div. var url = document.getElementById("url").value; document.GetPreviewDiv().innerHTML = GetHTMLToInsert(url); }
mon HTML :
Code:

1 2 3 4 5 6 <div id='divPreview' style='border-style:solid; height:315px; width:560px; max-width:100%;'> </div><br> <input type="text" id="url" name="url" /> <button onclick="InsertHTML();">essayez !</button>
Voilà voilà, je me demandais aussi est-ce que quand on déclare la variable 'url' dans la fonction insertHTML(), elle peut etre placé en paramètre dans la fonction GetHTMLToInsert(url) ?
Il me semble quand quand on la déclare dans une fonction, elle ne sera valable qu'au sein de la fonction non ?

Merci d'avance

Bonjour :)

Il y a une erreur ici :

~~document~~.GetPreviewDiv()

Et pourquoi tant de fonction ? :calim2:

Code:

1
2
3
4
<div id='divPreview' style='border-style:solid; height:315px; width:560px; max-width:100%;'></div><br>
<input type="text" id="url" name="url" />
 
<button id="bt_change_div">essayez !</button>

Code:

1
2
3
4
5
6
document.getElementById("bt_change_div").addEventListener("click", function(){    
    var adiv  = document.getElementById("divPreview");
    var img = document.getElementById("url").value;
    adiv.innerHTML = "<img src='"+img+"'>";
 
});

Sans jQuery.... document.getElementById ! :piou:

22/12/2014, 15h06
Kurzic

Yeeees ! Ca marche !! merci beaucoup !
"Pourquoi tant de fonctions?"

C'est l'énoncé, étant débutant en JS je suis les consignes mais effectivement j'en aurais pas mis autant..

Merci beaucoup a vous deux de votre aide.
:mrgreen:

En mode objet, maintenant ça donne cela :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
Media = function(url)
{
    this.findDiv = function(){
     return document.getElementById("divPreview");
    }
 
    this.getHTMLContent() = function(url){
      return "<img src=' "+url+"' />";
     }
 
     this.insertInDiv = function(){
     var div = this.findDiv();
     div.innerHTML = this.getHTMLContent();
    }
 
    this.insertInDiv(url);
}
//***********************************ICI CA BUG *************************************************//
document.getElementById("bt_change_div").addEventListener("click", function(){    
    var media = new Media(url);
//************************************************************************************//
});

Je n'arrive pas a faire fonctionner mon objet, dites moi si vous voyez des erreur parce que là c'est chaud :/
Dans la partie indiqué, je ne suis vraiment pas sur du code..
Merci d'avance.

22/12/2014, 18h45
NoSmoking
Bonjour,
sans préjuger de l'utilité de ton code, surtout en mettant en dur l'ID d'un élément cible, dans cette ligne this.getHTMLContent() = function(url){, les accolades sont en trop, tu définies la fonction tu ne l’exécutes pas.

Dans tes autres fonctions si tu veux que ton paramètre les atteigne il te faut le faire suivre, ou le déclarer comme propriété de ton objet, donc
Code:

1 2 3 4 this.insertInDiv = function(url){ var div = this.findDiv(); div.innerHTML = this.getHTMLContent(url); }
23/12/2014, 10h25
Bovino

Tu appelles ton constructeur avec une variable nommée url, mais elle est définie où cette variable ? :?