document.getElementById(").src == ??? (est égal à l'ÉCHEC)
Mon javascript est
function changeImage(imgID) {
var baseurl = "media/images/";
if (document.getElementById(imgID).src == baseurl+"selection-off.png") {
alert('Success');
document.getElementById(imgID).src = baseurl+"selection-no.png"; }
else {
alert('Fail'); } }
et mon code HTML est
<div id="mustard" class="checkbox"><img id="mustard-img" class="no-off" src="media/images/selection-off.png" alt="checkbox" onClick="changeImage('mustard-img')" /></div>
Je reçois toujours Échouer lorsque vous cliquez sur l'image. Je dois être en manque de quelque chose de vraiment élémentaire.
Vous devez vous connecter pour publier un commentaire.
Certains navigateurs convertir le
img
src à l'url complète (y comprishttp://www....
)essayer d'alerte pour s'assurer..
Vous pouvez utiliser le
qui vérifie si une chaîne est contenue dans l'autre..
Chaîne d'alerte document.getElementById(imgID).src. Il prend peut-être le chemin complet c'est à dire y compris le nom de l'hôte, tandis que la chaîne que vous êtes en comparant avec a chemin d'accès relatif.
J'ai essayé votre code sur mon propre serveur.
Résultat:
document.getElementById(mustard-img).src
est'
http://localhost/webfiles/media/images/selection-off.png'
baseurl+"selection-off.png"
est"media/images/selection-off.png
'baseurl semble montrer l'url relative seulement.
C'est la raison pour laquelle le "Fail" obtient alerté.
Essayer avec le code suivant:
Les différences avec votre code:
this
au lieu de l'id dans le onclick functionindexOf
au lieu de ==, pour les chemins relatifsÊtes-vous sûr que le DOM est construit lorsque le script est chargé ?
C'est parce que l'attribut src est modifié par le navigateur. Ne pas le faire de cette façon, la bonne façon de vérifier et de modifier le css de la classe ou de l'attribut style à la place.
Image basée sur les cases sont assez commun, mais ici, c'est la solution complète.
1) Rendre effective des cases à cocher en premier. Ces travaux pour 100% des navigateurs.
2) Lorsque le chargement de la page, placez votre image de "case" à côté de la case pour masquer la case à cocher
3) Lorsque l'image est cliquée, d'activer /désactiver la case à cocher et utilisez la case caché afin de vérifier l'état de l'image.
Lorsque le formulaire est en POST-ed, les cases vont agir comme des cases à cocher. Si JavaScript est désactivé ou non disponible pour la forme est encore utilisable.