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.4K Product Ideas
- 1.4K Ideas Exchange
- 1.4K Connect
- 1.1K Connectors
- 278 Workbench
- 4 Cloud Amplifier
- 4 Federated
- 2.7K Transform
- 89 SQL DataFlows
- 557 Datasets
- 2K Magic ETL
- 3.3K Visualize
- 2.3K Charting
- 571 Beast Mode
- 11 App Studio
- 28 Variables
- 579 Automate
- 141 Apps
- 414 APIs & Domo Developer
- 23 Workflows
- 1 DomoAI
- 28 Predict
- 12 Jupyter Workspaces
- 16 R & Python Tiles
- 352 Distribute
- 92 Domo Everywhere
- 258 Scheduled Reports
- 2 Software Integrations
- 92 Manage
- 89 Governance & Security
- 9 Product Release Questions
- Community Forums
- 42 Getting Started
- 28 Community Member Introductions
- 88 Community Announcements
- 4.8K Archive