Salut

Je vais essayer de faire court.

Via un petit script dans un code html, je récupère dans une variable une chaîne de caractères. Et j'aimerais que cette chaîne de caractères soit ensuite insérée dans l'html d'un bloc. Sauf qu'au lieu de ça, c'est tout bêtement le nom de la variable qui est prise comme chaîne de caractères.

Concrètement, l'utilisateur clique, par exemple, sur le titre "stratosfear". Je crée une variable "titre" qui récupère la chaîne de caractères "stratosfear" et rajoute ".mp3".
Donc titre = stratosfear.mp3

J'ai un petit lecteur audio html5, qui est dans un bloc div (que je récupère dans une variable "audio").
L'innerHTML du bloc div vaut ici <audio src="" controls></audio>

Je veux récupérer la valeur de la variable titre, et l'insérer de cette façon :
audio.innerHTML = '<audio src = titre controls></audio>';

Au lieu de prendre la valeur de la variable titre, il prend la propre chaîne de caractères "titre"

Pour finir voici donc le code pour mieux comprendre :

<div class="bloc">
<div class="audio"><audio src="" controls></audio></div>
<p class="morceau">stratosfear</p>
</div>
<script>
var audio = document.querySelector (".audio");
var morceau = document.querySelector (".morceau");

morceau.onclick = function () {
var titre = morceau.innerHTML + ".mp3";
audio.innerHTML = '<audio src=titre controls></audio>';
alert (audio.innerHTML);
};
</script>

Merci de m'éclairer

Ah tiens je viens de me rendre compte d'une seconde erreur. Le querySelector ne récupère que le premier élément. Moi j'aimerais qu'il récupère tous les éléments de classe "morceau" et qu'ensuite lorsqu'on clique sur un morceau qu'une variable récupère le morceau cliqué.

Arf

Pour le problème 1, c'est simplement un problème de concaténation : audio.innerHTML = '<audio src="'+titre+'" controls></audio>';
Pour ton querySelector, la doc dit que ça ne retourne que le premier élément trouvé https://developer.mozilla.org/En/DOM/Document.querySelector donc tu devras utiliser autre chose.

Merci !

Aucune idée sur quel procédé suivre ? Là ça dépasse mes connaissances je crois
Je vais tout de même chercher, ça ne doit pas être si compliqué que ça.

Utilise une bibliothèque type jQuery et tu pourrais utiliser des choses type $('.maClasse')

Yeeaaah !
Au début j'avais la flemme de m'y mettre. Finalement j'ai réussi en une heure et demie, je sais pas si je dois être fier de moi, mais je suis content

Merci beaucoup deepblue

Ah et si ça peut aider des gens, voici le script

<script>
$(function(){
$(".morceau").click(function () {
var morceau = $(this).text() + ".mp3";
$(".audio").html('<audio src="'+morceau+'" controls></audio>');
});
});
</script>

Minuscule et diaboliquement efficace

enjoy

Oui ça vaut le coup. Pour avoir écrit des kilomètre de javascript pur et dur, s'affranchir des problèmes de compatibilité et de réinvention de la roue fait gagner un temps considérable.
Ensuite, tu le mets ou tu veux dans ton code. Les grands théoriciens de l'optimisation toussa toussa te parleront de l'insertion des js avant la balise fermante de body.