HTML Easy Brick Refreshes Unexpectedly on Interaction

sam-n-cinci
sam-n-cinci Member
edited February 2024 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.

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>

Tagged:

Best Answer

  • ArborRose
    ArborRose Coach
    Answer ✓

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

    image.png

    image.png

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

Answers

Categories