Search code examples
javascriptandroiddhtmlmobile-safari

Javascript SRC is not working in IPhone Safari and Android

As per the requirement i need to change the image src dynamically, hence i using JavaScript to accomplish this.

I am accessing the image with id and adding new src depending on the user click, below is the code where i am getting the problem. Through out the process i am getting the updated SRC Data of image, but its looks strange that i could see updated image in desktop browser but not in Mobile safari and Andriod.

Please help

//This is id for fetching the user data
var text_food=document.getElementById("plateText_food");

//User Data
var currentFoodName=text_food.innerHTML; 

//as per the requirement removing space and adding "-"
var regExp = /\s+/g;
var foodName=currentFoodName.replace(regExp,'-');

//Detail URL
var detailURL_food01 = 'img/beer_images_png/' + foodName + '.png';

//id FOR ACCESSING IMAGE 
var updateFoodImage=document.getElementById("detailURL_food");

//adding updated src
updateFoodImage.src = detailURL_food01;
Solution

  • This should work, provided it's run at the right time. Both the browsers you're having issues when render and load content much slower...nature of working on mobile, that means you need to be sure that your code runs after the DOM is loaded, on window.onload for example, otherwise when you execute document.getElementById("plateText_food")...that id="plateText_food" element may not be in the DOM ready to find yet.

    Try a simple alert() to test this, at the end (you won't get the alert if it errors before, another indicator):

    alert(detailURL_food01);
updateFoodImage.src = detailURL_food01;