Как установить img src динамически с помощью функции

Question

Я хочу установить img src=" " с помощью функции в javascript, которая меняет изображение на переменную и проверяет значения:

код файла 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";
 }                    
   } };

img src в html-файле:

 <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 не поддерживает вызовы функций (и вы даже ничего не возвращаете из вызова функций), поэтому вам нужно запустить функцию один раз в начале, чтобы установить изображение в исходное состояние.

Answer 2

Вам необходимо установить начальное состояние вручную

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

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

Answer 3

Вы не можете сделать это. Атрибут src элемента изображения не может быть интерпретирован как javascript при интерпретации HTML.

изначально вам нужно установить src, и при нажатии кнопки вы можете переключать изображение, изменяя src изображения.

Answer 4

img src attr не поддерживает вызов функции.Все, что вы передадите в src, будет считаться URL (относительным или другим).Пожалуйста, обратитесь https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Attributes

Так что вам нужно сделать, это вызвать функцию до / загрузки вашего элемента и затем изменить src.Простейшая форма будет выглядеть следующим образом:

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