<?xml version="1.0" encoding="UTF-8"?><rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" version="2.0"><channel><title><![CDATA[Help with updateDom()]]></title><description><![CDATA[<p dir="auto">This module is supposed to show a slideshow of the two images that are given in the variablle loc. But, I am not able to update the Dom. It does not change the image. The setInterval function does not seem to be working.</p>
<pre><code>Module.register("MMM-Test",{
                default: {loc: ["modules/MMM-Test/test1.jpg","modules/MMM-Test/test.jpg"], count:0},
		start : function(){
				setInterval(function() {this.updateDom()}, 1000);
		},
		getDom : function (){
                        var wrapper = document.createElement('div')
			wrapper.id = 'FULL'
			var img = document.createElement('div')
			var i = this.config.count
                        img.style.backgroundImage = 'url(' + this.config.loc[i] + ')'
			img.id = 'photo'
        		var blr = document.createElement('div')
			blr.id = 'backgrnd'
			blr.style.backgroundImage = 'url(' + this.config.loc[i] + ')'
			wrapper.appendChild(blr)
			wrapper.appendChild(img)
			this.config.count = (this.config.count + 1) % 2
                        return wrapper
                },
		getStyles : function (){
			return ['MMM-Test.css']
		}
})
</code></pre>
]]></description><link>https://forum.magicmirror.builders/topic/13183/help-with-updatedom</link><generator>RSS for Node</generator><lastBuildDate>Thu, 18 Jun 2026 16:48:48 GMT</lastBuildDate><atom:link href="https://forum.magicmirror.builders/topic/13183.rss" rel="self" type="application/rss+xml"/><pubDate>Wed, 01 Jul 2020 18:44:08 GMT</pubDate><ttl>60</ttl><item><title><![CDATA[Reply to Help with updateDom() on Thu, 02 Jul 2020 18:15:06 GMT]]></title><description><![CDATA[<p dir="auto">better use this …</p>
<pre><code class="language-js">start : function(){
  setInterval( () =&gt; {this.updateDom()}, 1000);
},
</code></pre>
]]></description><link>https://forum.magicmirror.builders/post/77941</link><guid isPermaLink="true">https://forum.magicmirror.builders/post/77941</guid><dc:creator><![CDATA[[[global:former-user]]]]></dc:creator><pubDate>Thu, 02 Jul 2020 18:15:06 GMT</pubDate></item><item><title><![CDATA[Reply to Help with updateDom() on Thu, 02 Jul 2020 17:58:14 GMT]]></title><description><![CDATA[<p dir="auto"><a class="plugin-mentions-user plugin-mentions-a" href="/user/sdetweil" aria-label="Profile: sdetweil">@<bdi>sdetweil</bdi></a> said in <a href="/post/77911">Help with updateDom()</a>:</p>
<blockquote>
<p dir="auto"><a class="plugin-mentions-user plugin-mentions-a" href="/user/ujwalreddy267" aria-label="Profile: UjwalReddy267">@<bdi>UjwalReddy267</bdi></a> your pointer ‘this’ is wrong inside the timer handle</p>
<pre><code>setInterval(function() {this.updateDom()
</code></pre>
<p dir="auto">you need to do</p>
<pre><code>var self=this
</code></pre>
<p dir="auto">and in the handler use self instead</p>
<pre><code>setInterval(function() {self.updateDom()
</code></pre>
</blockquote>
<p dir="auto">Yes, that was the error, thank you it works now.</p>
]]></description><link>https://forum.magicmirror.builders/post/77940</link><guid isPermaLink="true">https://forum.magicmirror.builders/post/77940</guid><dc:creator><![CDATA[UjwalReddy267]]></dc:creator><pubDate>Thu, 02 Jul 2020 17:58:14 GMT</pubDate></item><item><title><![CDATA[Reply to Help with updateDom() on Thu, 02 Jul 2020 10:45:01 GMT]]></title><description><![CDATA[<p dir="auto"><a class="plugin-mentions-user plugin-mentions-a" href="/user/sdetweil" aria-label="Profile: sdetweil">@<bdi>sdetweil</bdi></a> You were faster sam!</p>
]]></description><link>https://forum.magicmirror.builders/post/77913</link><guid isPermaLink="true">https://forum.magicmirror.builders/post/77913</guid><dc:creator><![CDATA[lavolp3]]></dc:creator><pubDate>Thu, 02 Jul 2020 10:45:01 GMT</pubDate></item><item><title><![CDATA[Reply to Help with updateDom() on Thu, 02 Jul 2020 10:44:27 GMT]]></title><description><![CDATA[<p dir="auto"><a class="plugin-mentions-user plugin-mentions-a" href="/user/lavolp3" aria-label="Profile: lavolp3">@<bdi>lavolp3</bdi></a> NOw I have the error, I think!</p>
<p dir="auto">the <code>this</code>in the interval might refer to another this and not to the original module-<code>this</code><br />
So you need to do the following in start:</p>
<pre><code>start : function(){
                                var self = this;
				setInterval(function() {self.updateDom()}, 1000);
		},</code></pre>
]]></description><link>https://forum.magicmirror.builders/post/77912</link><guid isPermaLink="true">https://forum.magicmirror.builders/post/77912</guid><dc:creator><![CDATA[lavolp3]]></dc:creator><pubDate>Thu, 02 Jul 2020 10:44:27 GMT</pubDate></item><item><title><![CDATA[Reply to Help with updateDom() on Thu, 02 Jul 2020 10:44:38 GMT]]></title><description><![CDATA[<p dir="auto"><a class="plugin-mentions-user plugin-mentions-a" href="/user/ujwalreddy267" aria-label="Profile: UjwalReddy267">@<bdi>UjwalReddy267</bdi></a> your pointer ‘this’ is wrong inside the timer handle</p>
<pre><code>setInterval(function() {this.updateDom()
</code></pre>
<p dir="auto">you need to do</p>
<pre><code>var self=this
</code></pre>
<p dir="auto">and in the handler use self instead</p>
<pre><code>setInterval(function() {self.updateDom()
</code></pre>
]]></description><link>https://forum.magicmirror.builders/post/77911</link><guid isPermaLink="true">https://forum.magicmirror.builders/post/77911</guid><dc:creator><![CDATA[sdetweil]]></dc:creator><pubDate>Thu, 02 Jul 2020 10:44:38 GMT</pubDate></item><item><title><![CDATA[Reply to Help with updateDom() on Thu, 02 Jul 2020 10:41:43 GMT]]></title><description><![CDATA[<p dir="auto"><a class="plugin-mentions-user plugin-mentions-a" href="/user/lavolp3" aria-label="Profile: lavolp3">@<bdi>lavolp3</bdi></a> are you sure the image url is correct?<br />
I would always for debugging purposes print that out once.</p>
<pre><code>console.log('url(' + this.config.loc[i] + ')');
console.log(this.count)
</code></pre>
<p dir="auto">Or check the dev console for errors not finding the pictures.</p>
]]></description><link>https://forum.magicmirror.builders/post/77910</link><guid isPermaLink="true">https://forum.magicmirror.builders/post/77910</guid><dc:creator><![CDATA[lavolp3]]></dc:creator><pubDate>Thu, 02 Jul 2020 10:41:43 GMT</pubDate></item><item><title><![CDATA[Reply to Help with updateDom() on Thu, 02 Jul 2020 10:39:58 GMT]]></title><description><![CDATA[<p dir="auto"><a class="plugin-mentions-user plugin-mentions-a" href="/user/ujwalreddy267" aria-label="Profile: UjwalReddy267">@<bdi>UjwalReddy267</bdi></a><br />
I would do this:<br />
the count variable out of defaults and into <code>this</code>. Then count it up in getdom.</p>
<pre><code>Module.register("MMM-Test",{
                default: {loc: ["modules/MMM-Test/test1.jpg","modules/MMM-Test/test.jpg"]},
                count: 0,
		start : function(){
				setInterval(function() {this.updateDom()}, 1000);
		},
		getDom : function (){
                        var wrapper = document.createElement('div')
			wrapper.id = 'FULL'
			var img = document.createElement('div')
			var i = this.count
                        img.style.backgroundImage = 'url(' + this.config.loc[i] + ')'
			img.id = 'photo'
        		var blr = document.createElement('div')
			blr.id = 'backgrnd'
			blr.style.backgroundImage = 'url(' + this.config.loc[i] + ')'
			wrapper.appendChild(blr)
			wrapper.appendChild(img)
			this.count = (this.count + 1) % 2
                        return wrapper
                },
		getStyles : function (){
			return ['MMM-Test.css']
		}
})
``</code></pre>
]]></description><link>https://forum.magicmirror.builders/post/77909</link><guid isPermaLink="true">https://forum.magicmirror.builders/post/77909</guid><dc:creator><![CDATA[lavolp3]]></dc:creator><pubDate>Thu, 02 Jul 2020 10:39:58 GMT</pubDate></item><item><title><![CDATA[Reply to Help with updateDom() on Thu, 02 Jul 2020 10:31:46 GMT]]></title><description><![CDATA[<p dir="auto"><a class="plugin-mentions-user plugin-mentions-a" href="/user/creepinjesus" aria-label="Profile: CreepinJesus">@<bdi>CreepinJesus</bdi></a> said in <a href="/post/77889">Help with updateDom()</a>:</p>
<blockquote>
<p dir="auto">I think (may be wrong) the config is read only inside the module,</p>
</blockquote>
<p dir="auto">that’s not true. The config values can be manipulated.</p>
]]></description><link>https://forum.magicmirror.builders/post/77908</link><guid isPermaLink="true">https://forum.magicmirror.builders/post/77908</guid><dc:creator><![CDATA[lavolp3]]></dc:creator><pubDate>Thu, 02 Jul 2020 10:31:46 GMT</pubDate></item></channel></rss>