18008 sujets

Questions générales et questions de débutants

[Résolu] Problème d'accent lors de récupération de valeur avec JS

Bonjour,

j'ai créé un menu déroulant avec les noms de plusieurs villes. 


<select...>
<option value="Angers">Angers</option>
<option value="Châteauroux">Châteauroux</option>
etc...
</select>


Sur ma page html, quand j'ai sélectionné la ville, une image s'affiche dans une div.
Je passe par une fonction Javascript



Var ville {
Angers : "./img/angers.png",
"Châteauroux" : "./img/chateauroux.png",

etc....


Les villes sans accent spcécial s'affichent correctement. En revanche la ville de Châteauroux s'affiche avec un B au lieu du â.

Comment résoudre ce problème ? Ma page HTML est bien en UTF-8 sans BOM.
Merci beaucoup
Modifié par daggoon (17 Nov 2020 - 18:08)
Merci Smiley smile Malheureusement, ça ne fonctionne pas. Peut-être parce que mon select et l'affichage sont sur la même page.
Modérateur
Salut,

Je pense que ca vient des guillemets autour de ta key. Comment vas-tu chercher / afficher l'image de Châteauroux ? ville.Châteauroux ? ville['Châteauroux'] ? ville.chateauroux ?

Sinon, pourquoi prendre des values si complexe et avec une casse ? Pourquoi ne pas simplifier :

<select...>
<option value="angers">Angers</option>
<option value="chateauroux">Châteauroux</option>
etc...
</select>

Var ville {
angers : "./img/angers.png",
chateauroux : "./img/chateauroux.png",
etc....

transparent pour l'utilisateur et franchement plus simple et moins dangereux pour toi...
Modifié par _laurent (17 Nov 2020 - 22:42)
Le soucis c'est que j'affiche non seulement la photo mais aussi le nom de la ville. Donc je suis obligé de garder majuscule et accents Smiley cligne

Et je vais chercher la photo de cette façon :



function imageville (select){

    var valeur = select.options[select.selectedIndex].value;
    document.getElementById("photo").src = ville[valeur];
    document.getElementById("nomdelaville").innerHTML = document.getElementById("listeville").value;

Modifié par daggoon (17 Nov 2020 - 23:31)
Modérateur
Et hop !
var ville {
    angers : {
        nom : "Angers",
        imgurl : "./img/angers.png"
    },
    chateauroux : {
        nom : "Châteauroux",
        imgurl : "./img/chateauroux.png"
    }
}

Il faut éviter au max les trucs chelou dans les noms de variable selon moi...
Modifié par _laurent (17 Nov 2020 - 23:35)
Ah oui effectivement. C'est étrange. Mais c'est sans doute la suite de mon code qui n'allait pas. Le nom de la ville était affiché dans une div. La photo dans un img src.
J'avais mis le chemin pour appeler la photo dans le message de 23:31.
Non il n'est pas encore en ligne. j'ai essayé d'aboutir à partir de ton code 


var ville {
    angers : {
        nom : "Angers",
        imgurl : "./img/angers.png"
    },
    chateauroux : {
        nom : "Châteauroux",
        imgurl : "./img/chateauroux.png"
    }
}


Mais je n'y arrive pas. Quand je sélectionne une ville j'obtiens 

[object object]
Modérateur
C'est parce que dans ce que j'ai proposé tu as un objet dans un objet. EN gros ton select va t'aider a trouver le bon objet et apres tu choisi ce que tu veux afficher (nom, url, etc... tu pourras rajouter des options).
On y accède comme ça du coup :
ville[valeur].imgurl

https://jsfiddle.net/undless/ke79o5zr/13/
Meilleure solution
J'ai regardé ton https://jsfiddle.net/undless/ke79o5zr/7/. J'ai ajotuté une ligne et j'obtiens exactement ce que je veux. Cette fois, pas de souci avec l'affichage de Châteauroux. le â n'est pas remplacé par un B. 


<select id="select">
<option value="Angers">Angers</option>
<option value="Châteauroux">Châteauroux</option>
</select>
<div id="maville"></div>
<div id="result"></div>
<img id="photo" src="" alt="">




var ville = {
Angers : "./img/angers.png",
"Châteauroux" : "./img/chateauroux.png"
}


var select = document.getElementById('select');
var result = document.getElementById('result');

select.addEventListener("change", function() {
    var valeur = this.value;
    maville.innerHTML = document.getElementById("select").value;
    result.innerHTML = ville[valeur];
    document.getElementById("photo").src = ville[valeur];
});


Si je choisis "Châteauroux", j'affiche le nom de la ville correctement et l'image qui est liée.
Merci beaucoup pour ton aide. J'ai résolu mon problème. J'avais tenté 


ville.imgurl[valeur];

J'ai encore des progrès à faire en javascript. Mais je comprends mieux la logique.

Je vais opter pour ton code avec des noms de variables sans accents et masjucules. Encore une fois merci et bonne journée !!
Modifié par daggoon (18 Nov 2020 - 10:25)
Modérateur
daggoon a écrit :
J'ai encore des progrès à faire en javascript. Mais je comprends mieux la logique.

On en a tous à faire tu es là pour ça ! lvl up !

daggoon a écrit :
Je vais opter pour ton code avec des noms de variables sans accents et masjucules. Encore une fois merci et bonne journée !!

Super alors je pense que ca sera plus robuste et que ca pourra t'éviter des soucis par la suite. Hésites pas a revenir si tu bloques Smiley smile

Bonne journée
Sujet clos
Aller à