Editing a simple attribute of an html element

Ask the community
,
1

I want to use javascript to edit an attribute of an html element.

I have an element like this:
Listen to “MYSH | Freshmen Party” on Spreaker.

I want to change the value of the “data-resource” attribute to something else, say, “episode_id=1111111”.

Now my understanding is that this is impossible in Wix since all DOM modifications must be done through the Wix API and the Wix API simply does not allow this feature. If this is the case, are they any workarounds?

2

You could you the html-component. Many articles about this. You just send new data to it using .postMessage.

3

I don’t understand where I put the HTML code. From my understanding, I would place the postMessage sending the new id in my page code. In order to receive it, I have to put an entire HTML document for my single HTML element. Something like this: (please tell me if this understanding is correct. it seems very strange to me)

<!doctype html>
<html>
<head>

<script type="text/javascript">
function init () {
  // when a message is received from the page code
  window.onmessage = (event) => {
    if (event.data) {
      //get the episode id and set it to the html element
       document.getElementById('episode').setAttribute...
    }
  }
}
</script>

</head>
 <a id="episode" class="spreaker-player" href="https://www.spreaker.com/user/genericname/stuff" data-resource="episode_id=0000000" data-theme="light" data-autoplay="false" data-playlist="false" data-width="100%" data-height="200px">Listen to "THIS EPISODE" on Spreaker.</a> 
</body>
</html>
4

Refer to the HtmlComponent API documentation for more information. Look at the article Wix Code: Working with the HTML Element for an explanation on how to use.

Here are a couple of examples that demonstrate how to use an HtmlComponent:
Example: Fullscreen with HtmlComponent
Example: Multiple Markers Google Maps