HTML Easy Brick Refreshes Unexpectedly on Interaction
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>
Best 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! **1
Answers
-
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! **1 -
That worked perfectly! I had tried a form of that but did not place it in the correct place within the function. Thank you so much!
0
Categories
- All Categories
- 1.8K Product Ideas
- 1.8K Ideas Exchange
- 1.5K Connect
- 1.2K Connectors
- 299 Workbench
- 6 Cloud Amplifier
- 8 Federated
- 2.9K Transform
- 100 SQL DataFlows
- 616 Datasets
- 2.2K Magic ETL
- 3.8K Visualize
- 2.5K Charting
- 729 Beast Mode
- 55 App Studio
- 40 Variables
- 682 Automate
- 175 Apps
- 451 APIs & Domo Developer
- 46 Workflows
- 10 DomoAI
- 34 Predict
- 14 Jupyter Workspaces
- 20 R & Python Tiles
- 394 Distribute
- 113 Domo Everywhere
- 275 Scheduled Reports
- 6 Software Integrations
- 121 Manage
- 118 Governance & Security
- Domo Community Gallery
- 38 Product Releases
- 10 Domo University
- 5.4K Community Forums
- 40 Getting Started
- 30 Community Member Introductions
- 108 Community Announcements
- 4.8K Archive