Javascript 为什么这段代码不起作用（URL当然很好），但什么也没发生

单击时，url必须更改，图像也必须更改。为了找到解决办法，我浪费了大约6小时的时间，但现在我在这里。有人能帮忙吗

/*
-----------------------------------------
右上音箱
-----------------------------------------
*/
函数init（）{
设rtsb=document.querySelector（“#backshand”）；
函数changeSound（）{
//更改声音图像：
设url1=“url（'https://cdn.glitch.com/00f52d97-70e5-4e02-98af-d0b48468a631%2FsoundOn1.jpg?v=1595501327338')";
设url2=“url（'https://cdn.glitch.com/00f52d97-70e5-4e02-98af-d0b48468a631%2FsoundOff2.jpg?v=1595501337285')";
设imSrc=rtsb.style.backgroundImage；
imSrc=url1；
如果（imSrc==url1）{
imSrc=url2；
}else if（imSrc==url2）{
imSrc=url1；
}
}
rtsb.addEventListener（'click'，changeSound）；
}
document.addEventListener（'readystatechange'，function（）{
如果（document.readyState==“完成”）{
init（）；
}
});
如果使用css并使用一个类在两个图像之间切换，这可能会简单得多

我将使用class
sound off
指示正在使用第二个图像，如果未设置该类，则默认情况下将使用回退（sound on image）：

CSS:
#backshand.sound off
比
#backshand
更有效，因此在设置类时，将使用第二个图像，否则将使用第一个图像

#backSound {
  background-image: url('https://cdn.glitch.com/00f52d97-70e5-4e02-98af-d0b48468a631%2FsoundOn1.jpg?v=1595501327338');
}

#backSound.sound-off {
  background-image: url('https://cdn.glitch.com/00f52d97-70e5-4e02-98af-d0b48468a631%2FsoundOff2.jpg?v=1595501337285');
}

JS:单击时，只需将类
声音关闭
打开和关闭即可

function changeSound() {
  rtsb.classList.toggle("sound-off");
}

演示：


函数init（）{
设rtsb=document.querySelector（“#backshand”）；
rtsb.addEventListener（'click'，e=>
rtsb.classList.toggle（“声音关闭”）
);
}
document.addEventListener（'readystatechange'，function（）{
如果（document.readyState==“完成”）{
init（）；
}
});
#后退{
背景图像：url（'https://cdn.glitch.com/00f52d97-70e5-4e02-98af-d0b48468a631%2FsoundOn1.jpg?v=1595501327338');
宽度：100px；
高度：100px；
背景尺寸：封面；
}
#回音{
背景图像：url（'https://cdn.glitch.com/00f52d97-70e5-4e02-98af-d0b48468a631%2FsoundOff2.jpg?v=1595501337285');
}

您正在将url1分配回imSrc，因此
imSrc=“url（'https://cdn.glitch.com/00f52d97-70e5-4e02-98af-d0b48468a631%2FsoundOn1.jpg?v=1595501327338“）”


您是否希望
rtsb.style.backgroundImage
也会更改？情况并非如此，因为您只是更改分配给变量imSrc的值

简单地说：

function changeSound() {
    // changing sound image:
    let url1 = "url('https://cdn.glitch.com/00f52d97-70e5-4e02-98af-d0b48468a631%2FsoundOn1.jpg?v=1595501327338')";
    let url2 = "url('https://cdn.glitch.com/00f52d97-70e5-4e02-98af-d0b48468a631%2FsoundOff2.jpg?v=1595501337285')";
    let imSrc = rtsb.style.backgroundImage;

    if (imSrc === url1) {
      rtsb.style.backgroundImage = url2;
    } else if (imSrc === url2) {
      rtsb.style.backgroundImage = url1;
    }
  }

欢迎来到Stackoverflow。我将是提出嬉皮士解决方案的人

您可以在HTML中有一个复选框，删除JavaScript并仅像这样使用CSS：


input[type=“checkbox”]{
显示：无；
}
输入[type=“checkbox”]+span{
显示：内联块；
宽度：500px；
高度：500px；
填充顶部：5px；/*将标签与图像对齐*/
垂直对齐：中间对齐；
背景：url(https://cdn.glitch.com/00f52d97-70e5-4e02-98af-d0b48468a631%2FsoundOn1.jpg?v=1595501327338)左上无重复；
光标：指针；
}
输入[type=“checkbox”]：选中+span{
背景：url(https://cdn.glitch.com/00f52d97-70e5-4e02-98af-d0b48468a631%2FsoundOff2.jpg?v=1595501337285)左上无重复；
}
您假设css将与您设置的内容完全匹配。问题是它会改变值。在您的情况下，它将“a”改为“a”，因此不匹配


函数init（）{
设rtsb=document.querySelector（“#backshand”）；
函数changeSound（）{
//更改声音图像：
设url1='url（“https://cdn.glitch.com/00f52d97-70e5-4e02-98af-d0b48468a631%2FsoundOn1.jpg?v=1595501327338")';
设url2='url（“https://cdn.glitch.com/00f52d97-70e5-4e02-98af-d0b48468a631%2FsoundOff2.jpg?v=1595501337285")';
设imSrc=rtsb.style.backgroundImage；
如果（imSrc==url1）{
rtsb.style.backgroundImage=url2；
}否则{
rtsb.style.backgroundImage=url1；
}
}
rtsb.addEventListener（'click'，changeSound）；
}
document.addEventListener（'readystatechange'，function（）{
如果（document.readyState==“完成”）{
init（）；
}
})；
xxx
这是您期望的吗？
console.log（imSrc，url1）
看看这一行
imSrc=url1；
你认为发生了什么？你认为在那之后if中发生了什么？你没有将
imSrc
分配回
rtsb.style.backgroundImage
。在
changeSound
的末尾放：
rtsb.style.backgroundImage=imSrc；
哦，我添加了rtsb.style.ba在changeSound的末尾，ckgroundImage=imSrc，但它只更改图像一次-当我再次单击时，它不会更改回default@hjemlandet删除
imSrc=url1；
if
前面的行，并使用
else
而不是
else if（…）
@hjemlandet您能使用css吗？@hjemlandet查看演示它工作得很好，谢谢！不过，我正在考虑如何使它在js中工作……也许我应该使用承诺和异步code@hjemlandet我强烈建议你坚持使用css来处理这类事情，否则你将不得不想出另一种计算whic的方法之所以使用h image，是因为一旦将
backgroundImage
属性指定给值，该值可能会发生更改（例如，单引号
“
将变为双引号
”
，这将使您在
中使用的
===
测试无效，如果
作为
url（“…”）==url（“…”）
）@hjemlandet如果必须在js中完成，可以使用类来跟踪要使用的图像。不要忘记在每次单击时打开和关闭它。它仍然不起作用，因为当分配给
backgro时，单引号
“
被转换为双引号
”
function changeSound() {
    // changing sound image:
    let url1 = "url('https://cdn.glitch.com/00f52d97-70e5-4e02-98af-d0b48468a631%2FsoundOn1.jpg?v=1595501327338')";
    let url2 = "url('https://cdn.glitch.com/00f52d97-70e5-4e02-98af-d0b48468a631%2FsoundOff2.jpg?v=1595501337285')";
    let imSrc = rtsb.style.backgroundImage;

    if (imSrc === url1) {
      rtsb.style.backgroundImage = url2;
    } else if (imSrc === url2) {
      rtsb.style.backgroundImage = url1;
    }
  }