英文:
How do I change an element attribute everytime it is clicked in javascript?
问题
<div class="mode-change">
<img id="modeImg" class="" src="media/light.png" alt="Mode">
</div>
let modeImg = document.getElementById("modeImg");
modeImg.addEventListener("click", changePic);
function changePic() {
console.log(modeImg.src);
if (modeImg.src.endsWith("media/light.png")) {
modeImg.src = "media/dark.png";
console.log(modeImg.src);
} else {
modeImg.src = "media/light.png";
console.log(modeImg.src);
}
}
function changePic() {
console.log(modeImg.getAttribute("src"));
if (modeImg.getAttribute("src") === "media/light.png") {
modeImg.setAttribute("src", "media/dark.png");
console.log(modeImg.getAttribute("src"));
} else {
modeImg.setAttribute("src", "media/light.png");
console.log(modeImg.getAttribute("src"));
}
}
function changePic() {
console.log(modeImg.getAttribute("src"));
if (modeImg.getAttribute("src").endsWith("media/light.png")) {
modeImg.setAttribute("src", "media/dark.png");
console.log(modeImg.getAttribute("src"));
} else {
modeImg.setAttribute("src", "media/light.png");
console.log(modeImg.getAttribute("src"));
}
}
Please note that these code snippets provide different ways to achieve the desired functionality. You can choose the one that suits your preference and requirements.
英文:
I have two images, and I'm trying to change the image displayed every time the img element is clicked using the if and else statements. But the image only changes the first time, and clicking it the second time won't change the image back.
<div class="mode-change">
<img id="modeImg" class="" src="media/light.png" alt="Mode">
</div>
Please note that I don't know jQuery.
I tried using the if and else statement to change the picture every time the element is clicked, but the code won't run past the if statement.
let modeImg = document.getElementById("modeImg");
modeImg.addEventListener("click", changePic);
function changePic() {
if (modeImg.src === "media/light.png") {
modeImg.src = "media/dark.png";
console.log(modeImg.src);
} else {
modeImg.src = "media/light.png";
console.log(modeImg.src)
}
}
After trying out the answer provided by @Emmanuel Villalobos, and added the right operator, but I noticed that the console only returned the value of the else statement, even when the src is "media/light.png".
So I tried to return the output of the image src before the if statement like so,
function changePic() {
console.log(modeImg.src);
if (modeImg.src === "media/light.png") {
modeImg.src = "media/dark.png";
console.log(modeImg.src);
} else {
modeImg.src = "media/light.png";
console.log(modeImg.src)
}
}
The console returned the absolute link as in http://localhost/study/media/light.png
instead of the media/light.png
I put in my HTML code.
答案1
得分: 1
你的条件语句中的问题在于你使用了单个等号而不是两个或三个来进行比较。
这个函数应该按照你的期望工作:
function changePic() {
if (modeImg.src.includes("media/light.png")) {
modeImg.src = "media/dark.png";
console.log(modeImg.src);
} else {
modeImg.src = "media/light.png";
console.log(modeImg.src)
}
}
英文:
The problem in your conditional is that you used a single equal sign instead of two or three to compare.
This function should work as you expect:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
function changePic() {
if (modeImg.src.contains("media/light.png")) {
modeImg.src = "media/dark.png";
console.log(modeImg.src);
} else {
modeImg.src = "media/light.png";
console.log(modeImg.src)
}
}
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论