Im trying to dynamically change a picture in html page according to a true/false condition using javascript. If the variable is 0 an image and if it was 1 another picture should be shown in html page.
There are many pictures in a project that need to be changed i need a function that can do this application. But i dont know if it can be done with a single function or i should use a function for each variable.
Is siemens webserver the variable change is applied automatically by typing :="X": when x is 0 instead of :="X": the number 0 is replaced and for the 1 instead of :="X": the number 1 is replaced. Im familiar with html coding and how to change the picture using the image name and adding 0 or 1 after image name. For example i name a picture stop0.png and another picture stop1.png . now in the html code i type stop:="X":.png in this way picture changes according to variable x But this method needs the page to be refreshed to show the change. I want to do this in the easiest way possible without page refresh.
hmi should be designed in one page (for example named test.htm) and another html page with following code would update every thing in "test.htm" every second.
<!DOCTYPE html>
<html>
<body>
<div id="demo">
<h2>auto update page</h2>
</div>
<script>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xhttp.open("GET", "test.htm", true);
xhttp.send();
}
setInterval("loadDoc()", 1000);
</script>
</body>
</html>