Open modal on specific id - javascript

I've a script that gives a button a specific id <button id='myBtn$i'>Open Modal</button>, $i goes with the for loop. With that specific id I should be able to open specific modals with the same $i <div id='myModal$i' class='modal'></div> . With this javascript
<script>
var modal = document.getElementById('myModal$i');
var btn = document.getElementById('myBtn$i');
var span = document.getElementsByClassName('close')[$i];
btn.onclick = function() {
modal.style.display = 'block';
}
span.onclick = function() {
modal.style.display = 'none';
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = 'none';
}
}
</script>
But it doesn't succeed, can anyone help me? Thanks!

Try this:
Declare the variable as a global. And Do with addEventListener()
var modal;
var btn;
var span;
for(var $i=0; $i<23; $i++){
modal = document.getElementById('myModal'+$i);
btn = document.getElementById('myBtn'+$i);
span = document.getElementsByClassName('close')[$i];
btn.addEventListener("click", function() {
modal.style.display = 'block';
})
span.addEventListener("click", function() {
modal.style.display = 'none';
})
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = 'none';
}
}

Related

How can I make an element disappear when clicking away from it using javascript

I can get the navigation menu to appear when I click on the button, but I can't make it disappear.
Here's the code:
const navButton = document.getElementById("nav-btn");
const menu = document.getElementById("nav-menu");
const all = document.getElementsByTagName("body");
const menuActive = () => {
if (menu.style.display = "none") {
menu.style.display = "block";
}
}
const menuDeactive = () => {
if (menu.style.display = "block") {
menu.style.display = "none";
}
}
navButton.addEventListener("click", menuActive);
all.addEventListener("click", menuDeactive);
Use == to compare.
Also, document.getElementsByTagName("body") is redundant. There can only be one body tag.
const navButton = document.getElementById("nav-btn");
const menu = document.getElementById("nav-menu");
const all = document.getElementsByTagName("body");
const menuActive = () => {
if (menu.style.display == "none") {
menu.style.display = "block";
}
}
const menuDeactive = () => {
if (menu.style.display == "block") {
menu.style.display = "none";
}
}
navButton.addEventListener("click", menuActive);
document.body.addEventListener("click", menuDeactive);

Vanilla JS modal issue

This seems like a simple idea to me clearly I'm missing something here and any advice on what is wrong would be appreciated. I have created a simple modal that will pop up when the button is clicked. I assumed by using an If/else statement in the JS function i could just chose to set the button ti show or to disappear. I know of work arounds for this but I'm curious why this solution will not work
function openNav() {
let open = document.querySelector('#open');
open.addEventListener('click', () => {
let nav = document.querySelector('nav');
nav.style.display = 'block';
if (nav.style.display === 'block') {
open.style.display = 'none';
} else {
open.style.display == 'block';
}
})
}
openNav();
function closeNav() {
let close = document.querySelector('#close');
close.addEventListener('click', () => {
let nav = document.querySelector('nav');
nav.style.display = 'none';
if (nav.style.display === 'block') {
close.style.display = 'block';
} else {
close.style.display = 'none';
}
})
}
closeNav();
the button does work to open the modal after it is closed tho the "open" button does not re appear.
you can change it to toggle too since you should only use this function once for adding the event listener
function toggleNav() {
const open = document.querySelector('#open');
const close = document.querySelector('#close');
const nav = document.querySelector('nav');
open.addEventListener('click', () => {
nav.style.display = 'block';
close.style.display = 'block';
open.style.display = 'none';
})
close.addEventListener('click', () => {
nav.style.display = 'none';
close.style.display = 'none';
open.style.display = 'block';
})
}
toggleNav();
#close, nav {
display:none;
}
<button id="open">Open nav</button>
<button id="close">Close nav</button>
<nav>Nav</nav>
a few more errors:
if (nav.style.display === 'block') {
open.style.display = 'none';
} else {
open.style.display == 'block'; // This is a comparison
}
You are not setting the open button back to block when the nav is closed. Try this code instead:
function openNav() {
let open = document.querySelector('#open');
open.addEventListener('click', () => {
let nav = document.querySelector('nav');
nav.style.display = 'block';
open.style.display = 'none';
close.style.display = 'block';
/*
if (nav.style.display === 'block') {
open.style.display = 'none';
} else {
open.style.display == 'block';
}
*/
})
}
openNav();
function closeNav() {
let close = document.querySelector('#close');
close.addEventListener('click', () => {
let nav = document.querySelector('nav');
nav.style.display = 'none';
open.style.display = 'block';
close.style.display = 'none';
/*
if (nav.style.display === 'block') {
close.style.display = 'block';
} else {
close.style.display = 'none';
}
*/
})
}
closeNav();
I think you are assuming that the if block is monitoring the display. However, it does not, it only checks it once in the function call.

Javascript: How can this code be reduced or improved?

This is some JS that I've written, how can this be reduced?
it swaps the text as in hides one div and displays the other.
var directorOne = document.getElementById('directorOne').addEventListener("click", changeText);
var directorOneText = document.getElementById('directorOneText');
function changeText() {
if (directorOneText.style.display === "block") {
directorOneText.style.display = "none";
directorTwoText.style.display = "none";
console.log("luke open");
} else {
directorOneText.style.display = "block";
directorTwoText.style.display = "none";
}
}
var directorTwo = document.getElementById('directorTwo').addEventListener("click", changeText2);
var directorTwoText = document.getElementById('directorTwoText');
function changeText2() {
if (directorTwoText.style.display === "block") {
directorTwoText.style.display = "none";
directorOneText.style.display = "none";
console.log("bruce open");
} else {
directorTwoText.style.display = "block";
directorOneText.style.display = "none";
}
}
Using a single function that is called with the elements as parameters
var directorOneText = document.getElementById('directorOneText');
var directorTwoText = document.getElementById('directorTwoText');
function changeText(t1, t2) {
t1.style.display = (t1.style.display === "block") ? "none" : "block";
t2.style.display = "none";
}
var directorOneClickEvent = document.getElementById('directorOne').addEventListener("click", function(){ changeText(directorOneText, directorTwoText)});
var directorTwoClickEvent = document.getElementById('directorTwo').addEventListener("click", function(){ changeText(directorTwoText, directorOneText)});
#directorOne {background:#333; padding: 20px;}
#directorTwo {background:#ddd; padding: 20px;}
<div id="directorOne">d1<textarea id="directorOneText"></textarea></div>
<div id="directorTwo">d2<textarea id="directorTwoText"></textarea></div>

innerHTML showes blank in chrome

I want to take the user input text of an textarea [textBox] and put it on the p [cParagraph]
its working on IE but not on Chrome
function toggleOverlay(){
var overLay = document.querySelector("#overlay"),
modal = document.querySelector("#modal");
if(overLay.style.display !== "block" || modal.style.display !== "block"){
overLay.style.display = "block";
modal.style.display = "block";
}else {
overLay.style.display = "none";
modal.style.display = "none";
}
}
function submitMsg() {
var cHeader = document.querySelector(".cHeader"),
cParagraph = document.querySelector(".cParagraph"),
userName = document.querySelector("#userName"),
textBox = document.querySelector("#textBox");
cParagraph.innerHTML = textBox.innerHTML;
cHeader.innerHTML = userName.value;
toggleOverlay();
}
document.querySelector("#post").addEventListener("click", toggleOverlay,false);
document.querySelector("#submit").addEventListener("click", submitMsg, false);

Hide DIV after click and show when h press

I have this div:
<div id="control">BLABLABLA</div>
And i want want when my page load, show it, when we click, i hide it, and if the visitor click on h, the div re-appear?
function myFunction(){
var control = document.getElementById('control');
var i = document.getElementById('i'); // id of i
var h = document.getElementById('h'); // id of h
control.style.display = "block";
i.onclick = function(){
control.style.display = "none";
};
h.onclick = function(){
control.style.display = "block";
};
}
<body onload="myFunction()">
May be this should work. I assume that you are meaning h as h1
var div = document.getElementById('control');
div.onclick = function(){
div.style.display = "none";
};
document.getElementsByTagName('h1')[0].onclick = function(){
div.style.display = "block";
}
If you are looking for Jquery code, then you may do this:--
$("#control" ).on('click', function() {
$(this).hide();
});
$(document).keypress(function(e) {
var key = e.which;
var div = $("#control" );
if(key == 72 || key == 104) {
div.show();
}
else if(key == 73 || key == 105) {
div.hide();
}
});

Categories

Resources