How to make img src to be chose with variable from function

[mohammadsaid1980]

I want to connect the img src=" " with my function in javascript which is chnge the picture upon a variable and checking values:

javascript file code:

var ledon="ON"
var ledoff="OFF"
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";
 }                    
   } };

img src in html file:

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

but didn’t work with me and the picture didn’t appear! the script working and I tested with button:

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

how can I make the img src to be choose-able with function?
Thanks for all

[Paul_Wilkins]

If I wasn’t going to bed I’d give much more (excrutiating) details.
But, a few tweaks gets it working. https://jsfiddle.net/pmw57/p4d6La9m/

Change the value from OFF to ON and rerun the page to see the lightbulb change.

[mohammadsaid1980]

So have a nice sleep

Actually I got it how the bulb changed but when I refresh the page I want to check what is the last image was when the button is off or on and show the correct image…thats why I want to execute my function from img src!

[mohammadsaid1980]

I get back here to tell I solved it through load my function in the first of html page inside body then when the page loaded the picture appeared upon the last stated of button. Thanks for Ideas and support