Dear All, I am aware that there are setTimeOut and SetInterval within javascript but I am trying to achieve a countdown timer to then run a function with the countdown timer visible within my website and also dataset. I have reviewed the Wix Code examples of utilising postMessage and onMessage to communicate between page code and html however I am no further along if someone could help me with the code or provide other examples it would be great. I look forward to hearing from you. @yisrael-wix
$w.onReady(() =>{
$w(“#html4”).postMessage(timer);
$w(“#html4”).onMessage((event)=>{
if (event.data.type === ‘ready’){
$w(“#html4”).postMessage(timer);
}
function countdown(element, minutes, seconds) {
// set time for the particular countdown
var time = minutes*60 + seconds;
var interval = setInterval( function () {
var ctx = document.getElementById(‘#html4’);
// if the time is 0 then end the counter
if (time <= 0) {
var text = “hello”;
ctx.innerHTML = text;
setTimeout( function () {
countdown(‘clock’, 0, 60);
}, 2000);
clearInterval(interval);
return ;
}
var minutes = Math.floor( time / 60 );
if (minutes < 10) minutes = “0” + minutes;
var seconds = time % 60;
if (seconds < 10) seconds = “0” + seconds;
var text = minutes + ‘:’ + seconds;
ctx.innerHTML = text;
time–;
}, 1000);
}
countdown(‘clock’, 0, 60);
});
})
You can’t embed HTML in a Wix Code page. WixCode understands all of Javascript, except for anything that accesses the DOM. This keeps the user from inadvertently “breaking” something. Accessing document elements such as div, span, button, etc is off-limits. The way to access elements on the page is only through $w. Therefore, innerHTML is invalid in Wix Code.
For more information, see the article Working with the HTML Component in Wix Code . You can also refer to the examples that use the HtmlComponent to see how it’s done.
Thank you @Yisrael, for your very speedy response it is greatly appreciated, I am new to trying to developing this and it would be great if you could show an example of what you are saying in the code. I have looked at the two links you’ve provided but again I am no further along.
@simonadams Here are three examples that use HtmlComponents, and demonstrate how to implement the messaging between the page and the code in the HtmlComponent:
Embed Google Map on your site with multiple location markers, marker clustering, and custom controls using the HTML component.
This example demonstrates the requestFullScreen method of the HTML fullscreen API as
Use JavaScript post messages to communicate with the HTML component. In this example, learn how to embed a chart on a page.
@yisrael-wix thank you greatly appreciated.
@yisrael-wix one last question in relation to this, it asks for a “document.getElementById()” how do I work around this? as I thought it would be as simple function countdown (element, minutes, seconds) and using a var element = $w(‘#html4’).value? or something similar but it doesn’t work?
@simonadams The way to access elements on the page is only through $w. So for example, to get the value of a text input field, you would do something like this:
let textValue = $w(“#input1”).value;
To set the value of a text input field in code, you would do something like this:
$w(“#input1”).value = “new text”;
The line of code var element = $w(’ #html4 ').value is invalid in Wix Code and has no meaning. An HtmlComponent does not have a “value”. An HtmlComponent can contain HTML/Javascript code as explained in the docs and all interfacing with an HtmlComponent is done through its properties as detailed in the docs, and by messaging.
Hey Ysrael,
First off, long time fan of yours, you’ve helped me immensely.
Second, I’ve seen you use innerHTML in one of your fetch examples.