if statement getElementById.src

if statement getElementById.src

本文关键字：src getElementById statement if      更新时间：2023-09-26

已解决

 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";
}

我一直在寻找对此的愤怒，但我无法让它发挥作用。

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

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

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

有人能帮我把它用起来吗？

这是whloe-js代码。我知道这可能不是optmal写的，但我对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();

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");
}

所以您想在单击时切换图像？

如果你把某个东西设置为src，然后得到它，它看起来可能会有点不同。一个更好的解决方案是，可以手动保存isPlaying变量，而不是检查某个东西是否有特定的url。通过这种方式，您可以将writeonly转换为DOM，这比一直手动读取src值更快。

var isPlaying = false;
var stopImg = "../images/stop.png";
var playImg = "../images/start.png";
var el = document.getElementById("sp");
$("button").click(function() {
    // toggle 
    el.src = isPlaying ? stopImg : playImg;
    // also toggle the var
    isPlaying = !isPlaying;
});

甚至更好的方法是使用CSS，例如背景图像。。。

button {
    /*default state*/
    background-image : url('/images/play.png');
}
button.isPlaying {
    /*state when playing*/
    background-image : url('/images/stop.png');
}

然后在JS 中

$("button").click(function() {
    $(this).toggleClass("isPlaying");
});
相关文章：