HTML Easy Brick Refreshes Unexpectedly on Interaction

sam-n-cinci Member
edited February 19 in Cards, Dashboards, Stories

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:


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


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

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

<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()">   
    <img src="" width=560 height=555 usemap="#nap_logo_map">

Best Answer

  • ArborRose
    ArborRose Coach
    Answer ✓

    This appears to work when I test it. It uses event.preventDefault to bypass the default action.

    ** Was this post helpful? Click Agree or Like below. **
    ** Did this solve your problem? Accept it as a solution! **