Liferay Page Fragments - How to use JavaScript correctly

2021-01-11T15:10:04Z

The question might sound a little irretating and I don't want advice with JS syntax, I need to know how I USE JS in a page fragment. No matter what I tried, JS won't work. I tried the bottom left JavaScript part, but calling functions inside it doesn't work. Then I decided to use the <script></script> Tag in the HTML part, still doesn't do anything. I develop on a local isntance on a linux machine, but a colleague of mine has the same problem after I sent him the code.

Here is the code:

<div class="hvrbox">
		<lfr-editable id="image-square" type="image">
		<img alt="Responsive Image" class="${configuration.imageSize} hvrbox-layer_bottom" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAJCAYAAAA7KqwyAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAkSURBVHgB7cxBEQAACAIwtH8Pzw52kxD8OBZgNXsPQUOUwCIgAz0DHTyygaAAAAAASUVORK5CYII=" />
	</lfr-editable>
	<div class="hvrbox-layer_top">
		<div class="hvrbox-text">
		  <button type="button" onclick="change()">Click Me!</button>
		  <lfr-editable id="element-text" type="rich-text">
		   Hier könnte Ihre Werbung stehen
	    </lfr-editable>
		</div>
	</div>
</div>

function change() {
    document.getElementById("element-text").innerHTML = "Hello Javascript"
}

Unless I'm doing somthing terribly wrong, I don't see why this isn't working. Is there a special way to use the "JavaScript" section? After all, it says: "function(fragmentElement, configuration) {" in the frame of it