如何在JavaScript中每次单击时更改元素属性?

huangapple go评论68阅读模式
英文:

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.

&lt;div class=&quot;mode-change&quot;&gt;
   &lt;img id=&quot;modeImg&quot; class=&quot;&quot; src=&quot;media/light.png&quot; alt=&quot;Mode&quot;&gt;
&lt;/div&gt;

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(&quot;modeImg&quot;);

modeImg.addEventListener(&quot;click&quot;, changePic);

function changePic() {
 if (modeImg.src === &quot;media/light.png&quot;) {
   modeImg.src = &quot;media/dark.png&quot;;
   console.log(modeImg.src);
 } else {
   modeImg.src = &quot;media/light.png&quot;;
   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 === &quot;media/light.png&quot;) {
   modeImg.src = &quot;media/dark.png&quot;;
   console.log(modeImg.src);
 } else {
   modeImg.src = &quot;media/light.png&quot;;
   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(&quot;media/light.png&quot;)) {
   modeImg.src = &quot;media/dark.png&quot;;
   console.log(modeImg.src);
 } else {
   modeImg.src = &quot;media/light.png&quot;;
   console.log(modeImg.src)
 }
}

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年1月9日 05:10:31
  • 转载请务必保留本文链接:https://go.coder-hub.com/75051321.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定