Can't get html element messaging example to work

Ask the community
,
1

I have entered the exact code in the messaging example https://support.wix.com/en/article/corvid-working-with-the-html-element#messaging-1 (substituting “*” for “http://mysite.com”). The process of entering text in the input box on the page and sending it to the html element text box works ok. But entering text in the input box in the html element and sending it to the page does not seem to be working at all. I’ve entered my actual website URL, I’ve hardcoded the message to be sent, I’ve added diagnostic statements (do console.log statements in the html code work?) - nothing.

Here is my page code(from the example) :
$w.onReady( function () {
//when a message is received from the HTML element
$w( " #myHtmlComponent " ).onMessage( (event) => {
$w( " #text1 " ).text = event.data;
});
});

export function messageSendButton_click(event) { $w( " #myHtmlComponent " ).postMessage($w( " #textInput1 " ).value);

}

And here is my html code (also from the example).

.button { background-color: [#155DE9](https://www.wix.com/corvid/forum/search/~num~155DE9) ; color: white; border: none; padding: 10px 20px; text-align: center; font-family: 'Arial'; } .label { font-family: 'Arial'; } .input { font-size: 14px; } 
<script type="text/javascript"> 
  // when a message is received from the page code 
  window.onmessage = (event) => { 
    if (event.data) { 
      document.getElementById("theLabel").innerHTML = event.data; 
    } 
  }; 

  // send message to the page code 
  function button_click() { 
    window.parent.postMessage(document.getElementById("theMessage").value, "*"); 
  } 
</script>
HTML Label

< Send Message

Here is my page when it loads:

693×177 5.53 KB

And here is it after trying to send messages both ways.

695×198 6.47 KB

I want to learn how to use the HTML element, but not being able to get off the ground is frustrating. Any ideas?

Thanks,
Richard