• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

BIld statt Textanzeige

binderj1

New member
Hallo Leute
Ich brauche eure Hilfe.

document.getElementById("LED4").innerHTML = "LED 4 is OFF (D9)";

Wie kann ich im obigen Code anstatt des Textes "LED 4 is OFF (D9)" ein Bild anzeigen?

lG
Johannes
 
Zuletzt bearbeitet von einem Moderator:
Ich würde mittels document.createElement() eine Image Node erzeugen und mittels document.getElementById("LED4").appendChild() ins DOM einhängen
 
Hallo mikdoe
vielen Dank für deine schnelle Antwort. Leider habe ich erst jetzt wieder Zeit um an meinem Proj. (WEBVISU meine Heizung) weiter zumachen.
Ich habe jedoch noch eine Frage, und zwar.
Wenn ich den Button drücke um den Heizkreis frei zu geben, (HKDG=on) werden mir beide Bilder im Button angezeigt, und wenn (HKDG=off) ist, werden mir beide Bilder in umgekehrter Reihenfolge angezeigt.
Wie kann ich das ändern?

HTML:
if (this.responseXML.getElementsByTagName('HKDG').childNodes[0].nodeValue === "on") {
								document.getElementById("DG_ON").appendChild(bild2);
								DG_state = 1;
							}
							else {
								document.getElementById("DG_OFF").appendChild(bild3);
								DG_state = 0;
							}

button_HK ist ON.jpgbutton_HK ist OFF.jpg

lG
 
Zuletzt bearbeitet von einem Moderator:
Durch .appendChild() hängst du an den bestehenden Inhalt zusätzlichen an. Du willst aber - so habe ich es verstanden - nicht anhängen sondern ersetzen. Deshalb die Zielnode vorher leer machen z. B. mit .removeChild().
Ein vorheriges .innerHTML = '' wäre hier wahrscheinlich auch vertretbar.
 
Hallo mikdoe

ich hätte eine Frage, und zwar warum sind da if (this.responseXML.getElementsByTagName('HKDG').childNodes[0].nodeValue === "on")
drei === Gleichheitszeichen?

P.S. vielen Dank für deine Antworten!

lG
bindrj1
 
Ganz grob: bei 3 wird auch verglichen ob der Datentyp gleich ist. Meistens ist das wichtig bei der Unterscheidung zwischen Zahlen und Nichtzahlen. Nur ganz grob formuliert. Das Thema ist komplexer aber hier wahrscheinlich in dieser Vereinfachung ausreichend. Oder?
 
Wenn im folgendem Code mi Bereich "Freigabe WZ" bild1 gestzt wird, so wird es angezeigt, kommt aber im Bereich "Freigabe EZ" auch bild1 zur Anzeige, so wird bild1 im "WZ-Bereich" gelöcht.
Was muss ich ändern damit die bilder immer angezeigt werden?


HTML:
	// ***********************Freigabe WZ *************************************

							if (this.responseXML.getElementsByTagName('WZ')[0].childNodes[0].nodeValue === "bild0") {
								document.getElementById("WZ").innerHTML="";
								document.getElementById("WZ").appendChild(bild0);
							}
							if (this.responseXML.getElementsByTagName('WZ')[0].childNodes[0].nodeValue === "bild1") {
								document.getElementById("WZ").innerHTML="";
								document.getElementById("WZ").appendChild(bild1);
							}
							if (this.responseXML.getElementsByTagName('WZ')[0].childNodes[0].nodeValue === "bild2") {
								document.getElementById("WZ").innerHTML="";
								document.getElementById("WZ").appendChild(bild2);
							}
							if (this.responseXML.getElementsByTagName('WZ')[0].childNodes[0].nodeValue === "bild3") {
								document.getElementById("WZ").innerHTML="";
								document.getElementById("WZ").appendChild(bild3);
							}
	// ***********************Freigabe WZ *************************************

	// ***********************Freigabe EZ *************************************

							if (this.responseXML.getElementsByTagName('EZ')[0].childNodes[0].nodeValue === "bild0") {
								document.getElementById("EZ").innerHTML="";
								document.getElementById("EZ").appendChild(bild0);
							}
							if (this.responseXML.getElementsByTagName('EZ')[0].childNodes[0].nodeValue === "bild1") {
								document.getElementById("EZ").innerHTML="";
								document.getElementById("EZ").appendChild(bild1);
							}
							if (this.responseXML.getElementsByTagName('EZ')[0].childNodes[0].nodeValue === "bild2") {
								document.getElementById("EZ").innerHTML="";
								document.getElementById("EZ").appendChild(bild2);
							}
							if (this.responseXML.getElementsByTagName('EZ')[0].childNodes[0].nodeValue === "bild3") {
								document.getElementById("EZ").innerHTML="";
								document.getElementById("EZ").appendChild(bild3);
							}
	// ***********************Freigabe EZ *************************************
 
Zuletzt bearbeitet von einem Moderator:
Ich tippe mal darauf, dass dein responseXML nicht so ist wie es sein müsste, damit das von dir erwartete Verhalten eintritt. Denn im gezeigten JS ist ja jede Bedingung eindeutig.
 
HTML:
<!DOCTYPE html>
<html>
    <head>
        <title>Arduino Ajax I/O</title>
        <script>
		strWZ = "";
		strEZ = "";
		strSZ = "";
		strAZ = "";
		
		var bild0 = document.createElement('img');
		bild0.src = 'http://ff-windigsteig.bplaced.net/heiz050.jpg';
		var bild1 = document.createElement('img');
		bild1.src = 'http://ff-windigsteig.bplaced.net/heiz150.jpg';
		var bild2 = document.createElement('img');
		bild2.src = 'http://ff-windigsteig.bplaced.net/heiz250.jpg';
		var bild3 = document.createElement('img');
		bild3.src = 'http://ff-windigsteig.bplaced.net/heiz350.jpg';	
		function GetArduinoIO()
		{
			
			var request = new XMLHttpRequest();

        request.onreadystatechange = function()
			{
            if (this.readyState == 4) {
                if (this.status == 200) {
                       	if (this.responseXML != null) {
	//*********************** Analogeingang*****************************************
						
								document.getElementsByClassName("analog")[0].innerHTML =
									this.responseXML.getElementsByTagName('analog')[0].childNodes[0].nodeValue;
							
	//********************* Schalteingang Sicherheitsthermostat*********************************
							
								document.getElementsByClassName("switches")[0].innerHTML =
									this.responseXML.getElementsByTagName('switch')[0].childNodes[0].nodeValue;
						
	// ***********************Freigabe WZ *************************************

							if (this.responseXML.getElementsByTagName('WZ')[0].childNodes[0].nodeValue === "bild0") {
								document.getElementById("WZ").innerHTML="";
								document.getElementById("WZ").appendChild(bild0);
							}
							if (this.responseXML.getElementsByTagName('WZ')[0].childNodes[0].nodeValue === "bild1") {
								document.getElementById("WZ").innerHTML="";
								document.getElementById("WZ").appendChild(bild1);
							}
							if (this.responseXML.getElementsByTagName('WZ')[0].childNodes[0].nodeValue === "bild2") {
								document.getElementById("WZ").innerHTML="";
								document.getElementById("WZ").appendChild(bild2);
							}
							if (this.responseXML.getElementsByTagName('WZ')[0].childNodes[0].nodeValue === "bild3") {
								document.getElementById("WZ").innerHTML="";
								document.getElementById("WZ").appendChild(bild3);
							}
	// ***********************Freigabe WZ *************************************

	// ***********************Freigabe EZ *************************************

							if (this.responseXML.getElementsByTagName('EZ')[0].childNodes[0].nodeValue === "bild0") {
								document.getElementById("EZ").innerHTML="";
								document.getElementById("EZ").appendChild(bild0);
							}
							if (this.responseXML.getElementsByTagName('EZ')[0].childNodes[0].nodeValue === "bild1") {
								document.getElementById("EZ").innerHTML="";
								document.getElementById("EZ").appendChild(bild1);
							}
							if (this.responseXML.getElementsByTagName('EZ')[0].childNodes[0].nodeValue === "bild2") {
								document.getElementById("EZ").innerHTML="";
								document.getElementById("EZ").appendChild(bild2);
							}
							if (this.responseXML.getElementsByTagName('EZ')[0].childNodes[0].nodeValue === "bild3") {
								document.getElementById("EZ").innerHTML="";
								document.getElementById("EZ").appendChild(bild3);
							}
	// ***********************Freigabe EZ *************************************

	// ***********************Freigabe SZ *************************************

							if (this.responseXML.getElementsByTagName('SZ')[0].childNodes[0].nodeValue === "bild0") {
								document.getElementById("SZ").innerHTML="";
								document.getElementById("SZ").appendChild(bild0);
							}
							if (this.responseXML.getElementsByTagName('SZ')[0].childNodes[0].nodeValue === "bild1") {
								document.getElementById("SZ").innerHTML="";
								document.getElementById("SZ").appendChild(bild1);
							}
							if (this.responseXML.getElementsByTagName('SZ')[0].childNodes[0].nodeValue === "bild2") {
								document.getElementById("SZ").innerHTML="";
								document.getElementById("SZ").appendChild(bild2);
							}
							if (this.responseXML.getElementsByTagName('SZ')[0].childNodes[0].nodeValue === "bild3") {
								document.getElementById("SZ").innerHTML="";
								document.getElementById("SZ").appendChild(bild3);
							}
	// ***********************Freigabe SZ *************************************

						}
					}
				}
			}
			// send HTTP GET request with LEDs to switch on/off if any
			request.open("GET", "ajax_inputs" + strWZ + strEZ + strSZ, true);
			request.send(null);
			setTimeout('GetArduinoIO()', 1000);
			strWZ = "";
			strEZ = "";
			strSZ = "";
			strAZ = "";
		}
		
		
		
		function GetButtonWZ()
		{
			var x = document.getElementById("ButtonWZ");
					if (x.innerHTML === "enableWZ")
					{
						x.innerHTML = "notenableWZ";
						strWZ = "&enableWZ=0";
					}
					else
					{
						x.innerHTML = "enableWZ";
						strWZ = "&enableWZ=1";

					}
		}

		function GetButtonEZ()
		{
			var y = document.getElementById("ButtonEZ");
					if (y.innerHTML === "enableEZ")
					{
						y.innerHTML = "notenableEZ";
						strEZ = "&enableEZ=0";
					}
					else
					{
						y.innerHTML = "enableEZ";
						strEZ = "&enableEZ=1";
					}
		}
		function GetButtonSZ()
		{
			var z = document.getElementById("ButtonSZ");
					if (z.innerHTML === "enableSZ")
					{
						z.innerHTML = "notenableSZ";
						strSZ = "&enableSZ=0";
					}
					else
					{
						z.innerHTML = "enableSZ";
						strSZ = "&enableSZ=1";
					}
		}

	</script>
	<style>
		.IO_box {
			float: left;
			margin: 0 20px 20px 0;
			border: 1px solid blue;
			padding: 0 5px 0 5px;
			width: 120px;
		}
		h1 {
			font-size: 120%;
			color: blue;
			margin: 0 0 10px 0;
		}
		h2 {
			font-size: 85%;
			color: #5734E6;
			margin: 5px 0 5px 0;
		}
		p, form, button {
			font-size: 80%;
			color: #252525;
		}
		.small_text {
			font-size: 70%;
			color: #737373;
		}
	</style>
    </head>
    <body onload="GetArduinoIO()">
        <h1>Arduino Ajax I/O</h1>
        <div class="IO_box">
			<h2>Analog Inputs</h2>
			<p>A2: <span class="analog">...</span></p>
		</div>
		<div class="IO_box">
			<h2>Switch Inputs</h2>
			<p>Wohnzimmer : <span class="switches">...</span></p>
			<p class="small_text">Wohnzimmer</p>
			<button type="button" id="WZ" onclick="GetButtonWZ()"></button><br /><br />

			<p class="small_text">Esszimmerzimmer</p>
			<button type="button" id="EZ" onclick="GetButtonEZ()"></button><br /><br />
			<p class="small_text">Schlafzimmer</p>
			<button type="button" id="SZ" onclick="GetButtonSZ()"></button><br /><br />
		
		</div>
		<div class="IO_box">
        <p class="small_text">Test</p>
        <p id="ButtonWZ"</p>
		<p id="ButtonEZ"</p>
        <p id="ButtonSZ"</p>
		</div>
          

    </body>
</html>

Das ist der gesamte Code.

- - - Aktualisiert - - -

Hallo
... und das sind die XML-Daten vom Arduino

Code:
<?xml version = "1.0" ?>
<inputs>
<analog>15.94</analog>
<switchWZ>OFF</switchWZ>
<switchEZ>OFF</switchEZ>
<switchSZ>OFF</switchSZ>
<WZ>bild0</WZ>
<EZ>bild0</EZ>
<SZ>bild2</SZ>
</inputs>
 
Zuletzt bearbeitet von einem Moderator:
Sieht aus wie vermutet. Es werden wahrscheinlich immer alle drei Bildsteuerfelder ausgeliefert. Dann wäre die Frage, wie der Browser die richtige Steuerung erkennen soll. Wie sehen denn die XML Daten aus, wenn der gefragte Fall eintritt?
 
Zurück
Oben