I want to set img src=" " with a function in javascript that changes the picture upon a variable and checks values:

javascript file code:

 function myFunctionstatus(){
 var ledactual=document.getElementById("ledonof").value     
 var image = document.getElementById('ledPic'); 
 if (ledactual==ledon) {
     image.src = " 
  content/uploads/OFFbulb.jpg"; 
    }
 if (ledactual==ledoff){
     image.src = " 
   content/uploads/ONbulb.jpg";
 }                    
   } };

img src in html file:

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

but it didn't work with me and the picture didn't appear! the script is working, I tested with a button:

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

how can I set img src with a function?

I want to set img src=" " with a function in javascript that changes the picture upon a variable and checks values:

javascript file code:

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

img src in html file:

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

but it didn't work with me and the picture didn't appear! the script is working, I tested with a button:

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

how can I set img src with a function?

• javascript
• html
• image
• button

• Do you get any errors in the console? What is myFunction? I can't see it in your code. – Mosh Feu Commented May 21, 2019 at 12:19
• from where are u getting the value upon which u want to trigger the change? – Deepak Verma Commented May 21, 2019 at 12:23

4 Answers 4

I can't ment on the php that you're using to get the status, but the below is a working javascript example:

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

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

As noted by others, src doesn't support function calls (and you don't even return anything from your function call), so you need to run the function once at the start to set the image to the initial status.

You need to set an initial state manually

function switchStatus() {
  let switchButton = document.getElementById('ledonof');
  let img = document.getElementById('ledPic');
  if(switchButton.value == "ledon") {
    img.src = "https://cdncontribute.geeksforgeeks/wp-content/uploads/OFFbulb.jpg";
    switchButton.value = "ledoff";
  } else {
    img.src = "https://cdncontribute.geeksforgeeks/wp-content/uploads/ONbulb.jpg";
    switchButton.value = "ledon";
  }
}

<img id="ledPic" src="https://cdncontribute.geeksforgeeks/wp-content/uploads/OFFbulb.jpg" > <input type="button" id="ledonof"  onclick="switchStatus();" value="ledoff">

img src attr does not support function call. Whatever you pass in the src will be considered as url(relative or otherwise). Please refer https://developer.mozilla/en-US/docs/Web/HTML/Element/img#Attributes

So what you need to do is call the function before/loading your element and change the src then. The simplest form would be following

`<script>
(function() {
   // your page initialization code here
   // the DOM will be available here
   // call the function here
})();
</script>`

You can't do this. The src attribute of an image element can't be interpreted as javascript when the HTML is interpreted.

initially, you need to set src, and on button click, you can toggle image by changing image src.