HTML Easy Brick Refreshes Unexpectedly on Interaction

sam-n-cinci · February 19

HTML Easy Brick Refreshes Unexpectedly when Function to Reveal/Hide Text is Executed from Area Link

We're working on developing a custom landing page where team members can click a section of our logo to reveal additional links related to that category of dashboard.

In the HTML Easy Brick I was able to create area links so that each 'petal' can perform its own function.

In this iteration, I have a button that says "Click Me" and reveals or hides text via a function. I also have one of the 'petals' of the logo calling that same function with an onclick action. The button works as intended, hiding and reveal the text, but whenever I click the 'petal', it performs the function but then refreshes the card, resetting what just occurred. See gif for reference.

chrome_q0xthpZpRL.gif

The code I have so far:

JS:

function displayText() {
var e = document.getElementById("textField");
var cond = (e.style.display == 'block');
e.style.display = cond ? 'none' : 'block';
}

HTML:

<!DOCTYPE html><html lang="en">
<body>
<button onclick="displayText()">Click Me!</button>

<div id="textField" style="display: none;">
This is the text that appears when you click the button.
</div>

<div id="image_map">
<map name="nap_logo_map">
<area href shape=poly coords="85,110, 145,55, 235,25, 250,105, 235,200, 150,165" onclick="displayText()">
</map>
<img src="https://i.imgur.com/NmRHCpU.png" width=560 height=555 usemap="#nap_logo_map">
</div>
</body>
</html>