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.
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>
