Hello there,
I hope my inquiry is clear enough. I apologize for reaching out as I am unsure where to begin and what exactly I should be focusing on.
Currently, I have an image displayed in an HTML page like this:
<div id="tag_sunrise_sunset"><p><img src="assets/icons/sun_icon.png" alt="" width="14" height="14">↑ 06:25 ↓ 20:33</p></div>
Additionally, I am invoking the following function every half second:
/******************************************
* Obtains the most recent data from the database
******************************************/
// Global variables
var AutoScript = false;
var ValueCheck = -1;
var ControlUpdate = "";
var ThermostatManualUpdate = false;
var DebugMode = false;
function getDataFromDatabase(j)
{
var complete = false;
var json=$.parseJSON(j);
var techname = "";
var techname1 = "";
var valuetf;
var typecomp;
var value01;
var c;
var w;
$(json).each(function(i,val){
$.each(val,function(k,v){
if (DebugMode)
{
console.log ("k = " + k);
console.log ("v = " + v);
console.log ("----------------");
}
switch (k)
{
case "tech_name":
techname = v;
techname1 = "#" + v;
break;
case "value_t_f":
valuetf = v;
break;
case "compo_type":
typecomp = parseInt(v);
complete = true;
break;
default:
break;
}
if (complete)
{
if (DebugMode)
{
console.log ("My name is " + techname + " (" + techname1 + ")" + " I am of type " + typecomp + " and my value is " + valuetf);
}
complete = false;
// Component types
// Note: simplified structure of the if statements [check ? value_if_true : value_if_false;]
c=document.getElementById(techname);
if (c===null)
{
if (DebugMode)
{
console.log("Component " + techname + " does not exist");
}
}
else
{
switch (typecomp)
{
case 1:
case 2:
(valuetf > 0) ? value01 = 1 : value01 = 0;
(c.checked) ? w = 1 : w = 0;
if (value01 != w)
{
(value01 == 0) ? uncheckBox(techname1) : checkBox(techname1);
}
break;
case 3:
break;
case 4:
break;
case 5:
break;
case 6:
var ctrl = techname;
document.getElementById(ctrl).value = valuetf;
c=document.getElementById("prg01");
c.value = valuetf;
break;
case 7:
break;
default:
console.log("other");
break;
}
}
}
});
});
}
My intention is to display a different image based on the value of the variable 'w'. Is there a straightforward way to accomplish this using Ajax, or is it not suitable for this purpose?
Apologies if this question seems trivial, but I find myself at a standstill. Also, I acknowledge that there are likely areas for improvement in my code, but please bear with me as this is my first venture into the CSS/HTML/Javascript realm.
Thank you very much for your time and assistance.