Discussion :

[Kurzic]

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 js :

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
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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[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.

[Kurzic]

Après quelque modification ça donne ca :

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

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
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);
}

[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...

[Kurzic]

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

Code js :

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
 
 
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

[SylvainPV]

- 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

Solution 1:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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);
}

[Kurzic]

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

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

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[Golgotha]

Bonjour

Il y a une erreur ici :

document.GetPreviewDiv()

Et pourquoi tant de fonction ?

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 js :

Sélectionner tout - Visualiser dans une fenêtre à part

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 !

[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.

[Kurzic]

En mode objet, maintenant ça donne cela :

Code js :

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
 
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.

[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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
this.insertInDiv = function(url){
    var div = this.findDiv();
    div.innerHTML = this.getHTMLContent(url);
}

[Bovino]

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