javascript - if 语句 getElementById.src

Question

已解决

 var player = 0;
 if(player == 0)
{
    document.getElementById("sp").src = "../image/start.png";
    player = 1;
}
else if(player == 1)
{
    document.getElementById("sp").src = "../image/stop.png";
    player = 0;
}

我正在尝试用 JavaScript 制作播放/暂停按钮。
第一个纯文本版本使用 innerHtml 效果很好，但我需要为最终版本使用图像文件。

我的根目录中有 3 个文件夹:

• image(图像文件所在的位置)
• slide(php 文件所在的位置)
• javascript(放置js文件的地方)

在我的 php 文件中:

<img src="../image/stop.png" id="sp">
<script type="text/javascript" src="../javascript/page1.js"></script> 

在我的 js 文件中:

if(document.getElementById("sp").src == "../image/stop.png") {
    document.getElementById("sp").src = "../image/start.png";
} else if(document.getElementById("sp").src == "../image/start.png") {
    document.getElementById("sp").src = "../image/stop.png";
}

我已经在寻找解决方案，但我无法让它发挥作用。

文本版本的旧代码如下所示。

if(document.getElementById("sp").innerHTML == "Stop") {
    document.getElementById("sp").innerHTML = "Start";
} else if(document.getElementById("sp").innerHTML == "Start") {
    document.getElementById("sp").innerHTML = "Stop";
}

代码在点击事件触发的函数中

有人可以帮我让它工作吗？

这是完整的js代码。我知道这可能不是最理想的写法，但我对 js 很陌生

var CB = 
{
addEvent : function(element, event, action)
{
    if (element.addEventListener){
        element.addEventListener(event, action, false);
    }
    else
    {
        element.attachEvent("on" + event, action);
    }
}
 }

 Timer = function(callback, delay) 
 {
     var timerId, start, remaining = delay;
   this.pause = function() 
 {
  window.clearTimeout(timerId);
  remaining -= new Date() - start;
  };
  this.resume = function()
  {
  start = new Date();
  timerId = window.setTimeout(callback, remaining);
   };
   this.resume();
   };

  var synlig = 0.0;

  function visa(pic)
  {
synlig += 0.1;
if(synlig < 1.0)
{
    var x = String(synlig)
       pic.style.opacity = x;
}
else
{
     pic.style.opacity="1.0";
     return;
}
setTimeout(function(){visa(pic)}, 120);
   }

var     ejSynlig = 1.0
 function visaEJ(pic)
  {
ejSynlig -= 0.1;
if(ejSynlig > 0.0)
{
    var x = String(ejSynlig)
       pic.style.opacity = x;
}
else
{
     pic.style.opacity="0.0";
     return;
}
setTimeout(function(){visaEJ(pic)}, 120);
    }

  var   synlig2 = 0.0;
  function visa2(pic2)
  {
synlig2 += 0.1;
if(synlig2 < 1.0)
{
    var x = String(synlig2)
    pic2.style.opacity = x;
}
else
{
     pic2.style.opacity="1.0";
     return;
}
setTimeout(function(){visa2(pic2)}, 120);
    }

     var    ejSynlig2 = 1.0
     function visaEJ2(pic2)
    {
ejSynlig2 -= 0.1;
if(ejSynlig2 > 0.0)
{
    var x = String(ejSynlig2)
    pic2.style.opacity = x;
}
else
{
     pic2.style.opacity="0.0";
     return;
}
setTimeout(function(){visaEJ2(pic2)}, 120);
    }

  var pic = document.getElementById("bild");
   var t1s = new Timer(function(){visa(pic)}, 5000);
  var t1h = new Timer(function(){visaEJ(pic)}, 11000);
  var pic2 = document.getElementById("bild2");
 var t2s = new Timer(function(){visa2(pic2)}, 11500);
 var t2h = new Timer(function(){visaEJ2(pic2)}, 15000);

 function imgs()
 {
var p = document.getElementById("sp");
var x1, y1, x2, y2;

if(document.getElementById("sp").src == "../image/stop.png")
{
    x1 = t1s.pause();
    y1 = t1h.pause();
    x2 = t2s.pause();
    y2 = t2h.pause();
}   
else if(document.getElementById("sp").src == "../image/start.png")
{
    x1 = t1s.resume();
    y1 = t1h.resume();
    x2 = t2s.resume();
    y2 = t2h.resume();
}
CB.addEvent(p, "click", x1);
CB.addEvent(p, "click", y1);
CB.addEvent(p, "click", x2);
CB.addEvent(p, "click", y2);
 }

 function snd()
 {
var sndP = document.getElementById("sndP");
function playS()
{
    sndP.volume = 0.5;
    sndP.play();
} 
function pauseS()
{
    sndP.pause();
} 
var p = document.getElementById("sp");
var y;
if(document.getElementById("sp").src == "../image/stop.png")
{
    y = pauseS();
}
else if(document.getElementById("sp").src == "../image/start.png")
{
    y = playS();
}
CB.addEvent(p, "click", y);
 }

 function theshit()
 {
imgs();
snd();
if(document.getElementById("sp").src == "../image/stop.png")
{
    document.getElementById("sp").src = "../image/start.png";
}
else if(document.getElementById("sp").src == "../image/start.png")
{
    document.getElementById("sp").src = "../image/stop.png";
}
 }

 var sp = document.getElementById("sp");
 CB.addEvent(sp, "click", theshit);  
 sndP.volume = 0.5;
 sndP.play();

Answer 1

if(document.getElementById("sp").src == "../image/stop.png")
{
    document.getElementById("sp").setAttribute("src","../image/start.png");
}
else if(document.getElementById("sp").src == "../image/start.png")
{
    document.getElementById("sp").setAttribute("src","../image/stop.png");
}