javascript - 如何使用函数动态设置 img src

Question

我想使用 javascript 中的函数设置 img src=""，该函数可以更改变量上的图片并检查值:

javascript文件代码:

 function myFunctionstatus(){
 var ledactual=document.getElementById("ledonof").value     
 var image = document.getElementById('ledPic'); 
 if (ledactual==ledon) {
     image.src = "https://cdncontribute.geeksforgeeks.org/wp-c 
  content/uploads/OFFbulb.jpg"; 
    }
 if (ledactual==ledoff){
     image.src = "https://cdncontribute.geeksforgeeks.org/wp- 
   content/uploads/ONbulb.jpg";
 }                    
   } };

html 文件中的 img src:

 <img id="ledPic" [src]="myFunctionstatus()" > 

但它对我不起作用，图片没有出现!脚本正在运行，我用按钮进行了测试:

 <input type="button" id="ledonof"  onclick="myFunction();myFunctionstatus();" class="ledonoff" value="<?phpinclude ('ledstatus.php'); ?>">

如何使用函数设置 img src？

Answer 1

我无法评论您用来获取状态的 php，但下面是一个有效的 javascript 示例:

function myFunctionstatus(){
   var input = document.getElementById("ledonof");
   var image = document.getElementById('ledPic'); 
   if (input.value == "on") {
     image.src = "https://cdncontribute.geeksforgeeks.org/wp-content/uploads/ONbulb.jpg";
     input.value = "off"
   } else if (input.value == "off"){
     image.src = "https://cdncontribute.geeksforgeeks.org/wp-content/uploads/OFFbulb.jpg"; 
     input.value = "on"
   }                    
 }
 
 myFunctionstatus()

<img id="ledPic" /> 
 <input type="button" id="ledonof"  onclick="myFunctionstatus();" class="ledonoff" value="on">

正如其他人所指出的，src不支持函数调用(并且您甚至不会从函数调用中返回任何内容)，因此您需要在开始时运行该函数一次以将图像设置为初始状态。