We Keep Coding

Modal disappearing instantly

I am a beginner, trying to implement 'click' event listener to pop up a modal. But as soon as I click the link the modal appears and disappear instantly.
const btn = document.getElementById(btn");
const modal= document.getElementById("modal");
const showModal = function (el, modalId) {
el.addEventListener("click", function () {
modalId.classList.remove("hidden");
});
};
showModal(btn, modal);
.hidden{
display: none
}
<a class='btn'> Click </a>
<div id='modal' class='hidden'> Modal Content </div>

you should define id="btn" on your a tag to be able to do
document.getElementById("btn")
const btn = document.getElementById("btn");
const modal = document.getElementById("modal");
const showModal = function(el, modalId) {
el.addEventListener("click", function() {
modalId.classList.remove("hidden");
});
};
showModal(btn, modal);
.hidden {
display: none
}
<a id="btn"> Click </a>
<div id='modal' class='hidden'> Modal Content </div>

Thanks You so much guys for responding. I found my mistake, I was using 'link' tag with empty 'href' attribute, due to which the page was reloading ever time I clicked it. I simply replaced the links with button tag and now it is working just fine.
Although I still want to know if it is possible to stop the page from reloading when link element is clicked.
Also, thank you for highlighting the 'class/id' typo.

Toggle re-hides all divs; need parent div to remain visible

Apologies in advance, I'm not terribly familiar with Javascript, but I do understand what this code is doing and why it is causing me this problem. I'm just not sure how to go about solving it AT all.
On my webpage I have an open/close dialogue toggle which is the parent div, the dialogue box is hidden upon the page loading. Within this dialogue box are more hidden divs for the dialogue options. Problem is, when one of the dialogue options is clicked, the script hides the entire dialogue box, preventing any of the dialogue options from being seen, because it can only show one div at a time, regardless of its parent or child status. When a div is clicked, all other divs are re-hidden.
I need the parent div to remain visible until the dialogue box toggle is clicked again. The individual choices DO need to hide/unhide when another choice is clicked.
Not sure if I should include any CSS here, it's just styling the dialogue box and its buttons within.
<div id="dialogue" style="display:none;">
<div class="room">
Room description here. What do you do?
<div class="buttons">
Pet the cat.
<br>
<div id="cat" style="display:none;">aw yeah kitty time</div>
Turn on the radio.
<br>
<div id="radio" style="display:none;">
<br>
audio file and tracklist here
</div>
</div>
</div>
</div>
<span class="toggle">
[Open/close dialogue.]
</span>
<script type="text/javascript">
var divs = ["cat", "radio", "dialogue"];
var visibleDivId = null;
function divVisibility(divId) {
if(visibleDivId === divId) {
visibleDivId = null;
} else {
visibleDivId = divId;
}
hideNonVisibleDivs();
}
function hideNonVisibleDivs() {
var i, divId, div;
for(i = 0; i < divs.length; i++) {
divId = divs[i];
div = document.getElementById(divId);
if(visibleDivId === divId) {
div.style.display = "block";
} else {
div.style.display = "none";
}
}
}
</script>
I probably need a third function here because currently all the toggles are grouped together, hence why they're interacting like this, but I don't have the first clue how to accomplish this. I have been looking and haven't found anything that seems to match my needs.

Made a few corrections to your HTML so the href does not refresh the page on click. Also added in a few attributes (aria-controls) to track which div the button controls. I added comments to the JavaScript. There are plenty of Aria attributes they typically help with accessibility but they are super useful for keeping track of things in HTML and passing information to JavaScript.
//create a function to handle the click that takes in the event as a argument
function handleClick(event) {
//find out which div the button controls
const ariaControls = event.currentTarget.getAttribute("aria-controls"),
//select the controlled div
controlledAria = document.getElementById(ariaControls);
// if the controlled div is cat
if (ariaControls === "cat") {
// hide the radio div
document.getElementById("radio").classList.add("hide");
// if the controlled div is radio
} else if (ariaControls === "radio") {
// hide the car div
document.getElementById("cat").classList.add("hide");
}
//toggle the hide div on the controlled div
controlledAria.classList.toggle("hide");
}
//select all the buttons
const buttons = document.querySelectorAll("button");
//for each button add an event listener when the button is clicked run the handle click function
buttons.forEach(button => button.addEventListener("click", handleClick))
.hide {
display: none;
}
<div id="dialogue" class="hide">
<div class="room">
Room description here. What do you do?
<div class="buttons">
<button aria-controls="cat">Pet the cat.</button><br>
<div id="cat" class="hide">aw yeah kitty time</div>
<button aria-controls="radio">Turn on the radio.</button><br>
<div id="radio" class="hide">audio file and tracklist here
</div>
</div>
</div>
</div>
<span class="toggle"><button aria-controls="dialogue">[Open/close dialogue.]</button></span>

Close jquery modal

I'm importing Jquery Modal from these two links (js and css)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
I've added the following html code inside the body
<button onclick="load();" class="btn btn-primary">
<span class="fa fa-icon fa-filter"></span>
Filtrar
</button>
<div id="loadingModal" class="" style="display:none">
Cargando
</div>
and the following is in a js file
function load() {
openLoadingModal();
doSomething();
closeModal();
}
function openLoadingModal(e) {
$("#loadingModal").modal("show");
var count = 0;
var points = "";
var intervalId = window.setInterval(function(){
count++;
$("#loadingModal").text("Cargando" + ".".repeat(count % 3 + 1));
}, 1000);
return intervalId;
}
With this, the modal opens as I expect. The thing is that I want to close the modal when this ends. But the solutions I've found didn't work. I tried the following:
$("#loadingModal").modal("close");
$("#loadingModal").modal().close();
$("#loadingModal").modal().close;
$("#loadingModal").modal("toggle");
$("#loadingModal").modal().toggle();
None of this closes the modal as it should (maybe hides the modal, but not all of it, since there is a black screen)
I think this shouldn't be this hard, but every link I get in tells me to do one of this
Thanks

If there is only one modal on the page, use this:
$.modal.close();

Google's MDL - Dialog not closing in Safari

I am using Google's Material Design.
I have put a dialog in but it doesn't seem to close in Safari. (It does close in Chrome).
Dialog:
<dialog class="mdl-dialog">
<h4 class="mdl-dialog__title">Question Help</h4>
<div class="mdl-dialog__content">
<p>
Help text will go here dynamically.
</p>
</div>
<div class="mdl-dialog__actions">
<button type="button" id="closeModal" class="mdl-button close">Close</button>
</div>
</dialog>
Javascript rendering the Dialog:
let dialog = document.querySelector('dialog');
let showDialogButton = document.querySelectorAll('.show-dialog');
let i;
if (! dialog.showModal) {
dialogPolyfill.registerDialog(dialog);
}
for (i = 0; i < showDialogButton.length; ++i) {
showDialogButton[i].addEventListener('click', () => {
dialog.showModal();
});
}
dialog.querySelector('.close').addEventListener('click', function() {
dialog.close();
});
I have console.log(); inside the event listener and it isn't getting inside the function. But it is picking up the .close element. So I don't think the event listener is firing?
Any ideas why the dialog doesn't close?

Move the dialog under the <body>
From the dialog polyfill docs:
Modal dialogs have limitations-
They should be a child of <body> or have parents without layout (aka,
no position absolute or relative elements)

innerHTML not adding html content

I believe I almost have this working. I have a footer already, but when the button is clicked it slides down along with it's contents. After it slides down, I have used javascript to remove that footer and it's contents and I have created another footer element. I have appended it to include a div. When I check the inspector element it shows the new footer and the empty div exists. However, when I add the innerHTML to the id of the div, it does not populate it with the code. Here is the code for the javascript:
var slide = document.getElementById('slide');
var info = document.getElementsByClassName('info');
var input = document.getElementById('input');
var footer = document.getElementById('footer');
var addFooter = document.createElement('footer');
var newFooterContent = '<div class="col-md-8 col-md-offset-2"><input type="text" class="form-control move-right" size="105" placeholder="Say “Hello” or whatever else is on your mind"> </div> <div class="col-md-2"> <button type="submit" class="btn btn-default">Submit</button> </div>'
$( document ).ready(function() {
$( "#hidePic" ).click(function(e) {
e.preventDefault();
$( "#slide" ).slideToggle( "fast", function() {
footer.parentNode.removeChild(footer);
document.body.appendChild(addFooter);
addFooter.appendChild(input);
input.addInnerHTML = newFooterContent;
});
});
});

Replace
input.addInnerHTML = newFooterContent;
with
input.innerHTML = newFooterContent;
and it should work