Develop Reference

HTML onclick event doesn't work with parameter

When I click my button, which should make things visible and invisible, the whole website disappears.
What I was trying to do is to make a div with some text and probably some images and let it disappear and appear, when the button gets hit. So it would look like the Information box lists more information’s, when the user wants to read them.
But I would like to get a solution, witch I can use for more boxes like this one, so I can only copy the html and switch the onclick parameter and id from the div to 2, 3 ...
function open(x) {
var more_info = document.getElementById("project_info_" + x);
if (more_info.style.display == "none") {
more_info.style.display = "unset";
} else {
more_info.style.display = "none";
}
}
.project-box {
padding: 2vh;
margin-bottom: 3vh;
box-shadow: 0px 5px 7px rgb(136, 136, 136);
}
.project-button {
width: 20vw;
height: 3vh;
background-color: #d6d6d6;
border: none;
}
.project-button:hover {
background-color: #B50000;
color: white;
}
.project-button:focus,
.project-button:active,
.project-button:visited {
border: none;
border-radius: 0;
}
.project-closed {
display: none;
}
* {
font-family: Arial, Helvetica, sans-serif;
font-size: 2vh;
}
<div class="project-box" id="project_1">
<h3>Project 1</h3>
<p>description</p>
<div class="project-closed" id="project_info_1">
<p>Informations</p>
</div>
<button class="project-button" onclick="open(1)">More details</button>
</div>

The problem is that you have called the function open which is getting you caught up in this problem.
Because of the (horrible, horrible) way intrinsic event attributes work you are calling document.open instead of your self-defined global open function.
document.open wipes out the entire document ready for document.write to write a new one.
The quick fix is to call your function something else.
The better solution is to switch to addEventListener.

Your problem is using open - although not a reserved word - in the onclick which performs a document.open (I would have guessed window.open) and that will wipe the page in any case
Rename the function but I strongly recommend you remove the inline event handler and use an eventListener
I added the IDs of the divs to show as data attribute to the buttons you click
document.addEventListener("click", function(e) {
const tgt = e.target;
if (tgt.classList.contains("project-button")) {
const more_info = document.getElementById(tgt.dataset.id);
more_info.classList.toggle("project-closed");
}
})
.project-box {
padding: 2vh;
margin-bottom: 3vh;
box-shadow: 0px 5px 7px rgb(136, 136, 136);
}
.project-button {
width: 20vw;
height: 3vh;
background-color: #d6d6d6;
border: none;
}
.project-button:hover {
background-color: #B50000;
color: white;
}
.project-button:focus,
.project-button:active,
.project-button:visited {
border: none;
border-radius: 0;
}
.project-closed {
display: none;
}
* {
font-family: Arial, Helvetica, sans-serif;
font-size: 2vh;
}
<div class="project-box" id="project_1">
<h3>Project 1</h3>
<p>description</p>
<div class="project-closed" id="project_info_1">
<p>Informations</p>
</div>
<button type="button" class="project-button" data-id="project_info_1">More details</button>
</div>
<div class="project-box" id="project_2">
<h3>Project 2</h3>
<p>description</p>
<div class="project-closed" id="project_info_2">
<p>Informations</p>
</div>
<button type="button" class="project-button" data-id="project_info_2">More details</button>
</div>

Dark Mode with button in Vanilla Javascript

So basically, I am having troubles with a button that is supposed to change a website to dark mode. I also have a night mode, which makes the website go dark according to being after sunset or before sunrise in the current place of the user, and this night mode works. So I know it must be a problem regarding my js...
I have already tried first adding lightMode and then removing darkMode, but it did not work either...
<button
type="button"
class="btn btn-outline-secondary"
id="buttonChangeMode"
>
<i class="far fa-moon"></i>
</button>
.lightMode .app {
border: 1px solid #0b0b35;
padding: 20px 15px;
max-width: 1000px;
max-height: 2500px;
margin: 30px auto;
border-radius: 10px;
background-color: white;
}
.darkMode .app {
border: 1px solid #0b0b35;
padding: 20px 15px;
max-width: 1000px;
max-height: 2500px;
margin: 30px auto;
border-radius: 10px;
background-color: rgb(7, 8, 14);
}
function changeMode() {
let mode = document.getElementById("body");
if (mode.classList.contains("lightMode")) {
mode.classList.add("darkMode").remove("lightMode");
} else if (mode.classList.contains("lightMode")) {
mode.classList.remove("darkMode").add("lightMode");
}
}
let buttonChangeMode = document.querySelector("#buttonChangeMode");
buttonChangeMode.addEventListener("click", changeMode);
In the console, the error presented is: "Uncaught TypeError: Cannot read property 'remove' of undefined
at HTMLButtonElement.changeMode"

.toggle() method of .classList is the easiest way. If you use id you only limit your code use class whenever possible. Details are commented in demo.
// Pass Event Object
function changeMode(event) {
// Event.target always points to what user clicked, hovered over, changed etc,
const clicked = event.target;
// Reference body.all
const all = document.querySelector('.all');
// If the clicked tag has .mode class...
if (clicked.matches('.mode')) {
// Toggle .fa-sun, .btn-outline-dark, ,btn-outline-light, and .fa-moon on button.mode
clicked.classList.toggle('fa-moon');
clicked.classList.toggle('btn-outline-dark');
clicked.classList.toggle('fa-sun');
clicked.classList.toggle('btn-outline-light');
// Toggle .darkMode and .lightMode on body.all
all.classList.toggle('darkMode');
all.classList.toggle('lightMode');
}
return false;
}
// Reference button.mode
const mode = document.querySelector(".mode");
// Register button.mode to the click event
mode.addEventListener("click", changeMode);
.lightMode .app {
border: 1px solid #0b0b35;
padding: 20px 15px;
max-width: 1000px;
max-height: 2500px;
margin: 30px auto;
border-radius: 10px;
background-color: white;
}
.darkMode .app {
border: 1px solid #0b0b35;
padding: 20px 15px;
max-width: 1000px;
max-height: 2500px;
margin: 30px auto;
border-radius: 10px;
background-color: rgb(7, 8, 14);
}
<!DOCTYPE html>
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.9.0/css/all.css" rel="stylesheet" crossorigin="anonymous">
</head>
<body class='all lightMode'>
<main class='app container'>
<section class='row'>
<article class='col-6'>
<button class="mode btn btn-outline-dark far fa-sun" type="button"></button>
</article>
<figure class='col-6'>
<img src='https://branditprintit.com/wp-content/uploads/2017/04/logo-degin-logo-design-design-art-free.png' style='width:80%'>
</figure>
</section>
</main>
</body>
</html>

You did not give a HTML snippet - If your HTML <body> tag does not have an ID as follows:
<html>
...
<body id="body">
...
you will get that error because the result of the let mode = document.getElementById("body"); statement will be undefined, because the getElementById() function is expecting an argument of a DOM element ID value.
See https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById

You should add / remove classes like that:
<script>
function changeMode() {
let mode = document.getElementsByTagName("body")[0]; // set a variable for body tag
if (mode.classList.contains("lightMode")) {
mode.classList.add("darkMode")
mode.classList.remove("lightMode");
}
else {
mode.classList.add("lightMode")
mode.classList.remove("darkMode");
}
}
let buttonChangeMode = document.querySelector("#buttonChangeMode");
buttonChangeMode.addEventListener("click", changeMode);
</script>
You can read more here

jQuery - Click registered twice

I am making a web app that utilizes several pop ups. Inside the pop up, I have customized buttons (wrapped in <label>) that upload files. When I click on the button, it fires twice. I can solve the firing twice issue with e.preventDefault(); but obviously, it doesn't open the window for the user to upload a file.
if (document.getElementById("addItemModal").style.display !== 'none'){
$("#uploadImg").on('click', function(e) {
e.preventDefault();
console.log("I clicked upload image button.");
});
$("#uploadData").on('click',function() {
console.log("I clicked upload data button.");
});
}
So it seems that the first click is what opens the window to upload files and the second click is still a mystery. Where could this second click be coming from? I've tried .unbind as well and nothing seems to work.
EDIT: Added Code - Sorry for the wait, had to take out a lot but keep it functional and true to my problem.
var modal = document.getElementById('myModal');
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
// Click Add Icon to make pop up appear
$("#myBtn").click(function() {
$("#myModal").fadeIn("fast");
$("#addModal").fadeIn("fast");
});
// Click 'x'
$("#close1").click(function() {
$("#myModal").fadeOut("fast");
});
if (document.getElementById("myModal").style.display != 'none') {
console.log("Pls don't be running twice.");
$("#upImgBtn").on('click', function(evt) {
evt.preventDefault();
console.log("I clicked upload image button.");
});
document.getElementById("upDataBtn").addEventListener('click', function() {
console.log("I clicked upload data button.");
});
}
html,
body {
height: 100%;
padding: 0;
margin: 0;
overflow: hidden;
}
/* -- Edited Headers ----------------------- */
h4 {
color: #333;
display: inline-block;
font-size: 1.6em;
letter-spacing: 3px;
font-weight: 500;
}
/* ---------------------------------------- */
.sideBar {
position: relative;
width: 18%;
height: 90%;
float: left;
z-index: 100;
border-right-style: solid;
border-right-width: thin;
border-right-color: #333;
background-color: white;
}
/* -- Header & Location ------------- */
.headbar {
height: 7%;
background-color: ghostwhite;
margin-bottom: 20px;
box-shadow: 0 3px 10px 1px #888888;
}
#myBtn {
float: right;
position: relative;
padding: 9px 3px 0 0;
cursor: pointer;
display: inline-block;
}
.uploadBtns {
padding: 10px 15px 10px 15px;
background-color: blue;
color: white;
border-radius: 5px;
cursor: pointer;
box-shadow: 0 1px 5px 0 #888;
}
#myModal {
display: none;
position: fixed;
z-index: 1000000;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.5);
}
/* Modal Content */
#addModal {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 800px;
border-radius: 15px;
color: #404040;
}
/* -- Add Location Pop Up CSS ------ */
#addTable {
width: 100%;
height: 200px;
background-color: transparent;
border-collapse: collapse;
}
td {
background-color: transparent;
border-bottom: 1px solid #333;
}
tr {
height: 100px;
}
.gridTitle {
padding-left: 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sideBar" class="sideBar">
<div id="headbar" class="headbar">
<h5> Home</h5>
<div id="myBtn"><span id="addIcon">+</span>
</div>
</div>
</div>
<div id="myModal">
<div id="addModal">
<h4 id="header">ADD ITEM</h4>
<span class="myClose" id="close1">×</span>
<hr>
<table id="addTable">
<tr id="step1">
<td class="gridTitle">UPLOAD</td>
<td></td>
<td colspan="2">
<label class="btn btn-file uploadBtns" id="upImgBtn">
Upload Image
<input type="file" accept="image/*" style="display: none;" id="upImg">
</label>
<label class="btn btn-file uploadBtns" style="margin-left:120px;" id="upDataBtn">
Upload Data File
<input type="file" style="display: none;" id="upData">
</label>
</td>
</tr>
</table>
</div>
</div>
EDIT2: I haven't included the script twice in my HTML either.

All this is happening because you are adding event to the label.
Here is your code in jsfiddle.
document.getElementById("upData").addEventListener('click', function() {
alert("I clicked upload data button.");
});
You can also make a control which element fired the event. You can put your event on label and alert only if the event was from label but this doesn't stop the click event to happen on the input button.
document.getElementById("upDataBtn").addEventListener('click', function(event) {
if( event.target.tagName === "LABEL" ) {
alert("I clicked upload data button.");
}
});
It is called once or twice cause of the bubbling because the input element is part of the label and is one union and therefor also received the event if the label is click (is is not bubbling, you can't do event.stopPropagation()).
If you make
document.getElementById("upDataBtn").addEventListener('click', function(event) {
console.log(event.target.tagName);
});
This will give you two tag names
LABEL
INPUT

Try this
$(document).on('click',"#upImgBtn", function(e) {
if (e.target !== this)
return;
console.log("I clicked upload image button.");
});
$(document).on('click','#upDataBtn', function(e) {
if (e.target !== this)
return;
console.log("I clicked upload data button.");
});

Disappearing drop down menu

I am trying to create a disappearing drop down menu that disappears into the top of the page, and you can only see the word 'open'. This opens the the menu, the word open changes to the word close which when clicked makes the menu disappear again. Help would be much appricated.
<html>
<head>
<title>dropdown</title>
<link rel="stylesheet" type="text/css" href="dropdown_css.css">
<script type = "text/javascript">
function navagate(menu) {
var panel = document.getElementById(menu),maxh = "-362px", navg = document.getElementById('navag');
if (panel.style.marginTop == maxh){
panel.style.marginTop = "0px";
navag.innerHTML = "Close";
}
else {
panel.style.marginTop = maxh;
navag.innerHTML = "Open";
}
}
window.onload = function(){panel.style.marginTop = "-362px";}
</script>
<body>
<div id = "panel">
<ul>
<li>CIT</li>
<li>Blackboard</li>
<li>Mcomms</li>
<li>Tables</li>
<li>Exams</li>
</ul>
<div id ="sections_button">
<a onclick = "navigate ('panel')" id = "navag">Open</a>
</div>
</div>
</body>
</body>
</html>
#panel {
width : 160px;
height: 130px;
background-color: gray;
margin-left: 30px;
margin-top:20px;
}
#panel li {
list-style-type: none;
}

Here, I've made a JS fiddle that may help you out: http://jsfiddle.net/942z0nhh/ I did not play around with the styling at all.
A few things I noticed:
You're making some mistakes that I think you wouldn't make if you indented properly. Take a look here, where you closed your body twice:
<a onclick = "navigate ('panel')" id = "navag">Open</a>
</div>
</div>
</body>
</body>
Second, you have some spelling mistakes:
<a onclick = "navigate ('panel')" id = "navag">Open</a>
vs
function navagate(menu) {
You can see there that your function would never be called because of it.
Lastly, your 'open' and 'close' a here:
<a onclick = "navigate ('panel')" id = "navag">Open</a>
Was within the div your function was overwriting. The function would change it to 'close'- but then it wouldn't be visible to the user anyway! I moved it above, which I hope makes sense.
Please let me know if you have any other questions, or if I misunderstood.

You could also do it only with CSS. It's the "css checkbox hack". I'm having it not like you want it but it is pretty close. Changing the text from open to close should be also possible.
At the moment, I don't know how to move the open/close label below the ul list.
*, html {
padding: 0px;
font-family: sans-serif;
}
/* Checkbox Hack */
input[type=checkbox] {
position: absolute;
display: none;
}
label {
display: block;
cursor: pointer;
content: "close";
}
/* Default State */
#wrapper {
display: block;
background: gray;
color: white;
text-align: center;
}
/* Toggled State */
input[type=checkbox]:checked ~ #menu {
display: block;
background: lightgray;
color: black;
top:0px;
}
.menuToggle ul{
display: none;
width: 100%;
}
#menu {
padding-top: 5px;
margin: 0px;
list-style: none;
}
<div id="wrapper">
<div class="menuToggle">
<label for="toggle-1">open</label>
<input type="checkbox" id="toggle-1"/>
<ul id="menu">
<li>CIT</li>
<li>Blackboard</li>
<li>Mcomms</li>
<li>Tables</li>
<li>Exams</li>
</ul>
</div>
</div>

With jQuery you could do it like the example below.
I think it is now almost like you wanted it. Maybe some styling improvements are required.
With the css hack I couldn't manage the text change. With js you have more possibilities. You could also improve/modify the animations.
$(function() {
var $menuButton = $('#openButton');
var $menu = $('#menu');
var btnToggleAnim = function() {
$menuButton.animate({opacity: 'toggle'}, "fast");
};
var menuToggleAnim = function() {
$('#menu').animate({
height:'toggle',
//opacity: 'toggle'
}, { duration: "slow" });
};
$('#closeButton,#openButton').on('click', function() {
menuToggleAnim();
btnToggleAnim();
});
});
*, html {
padding: 0px;
font-family: sans-serif;
}
a {
text-decoration:none;
}
#openButton {
display:block;
background: gray;
color: #fff;
text-decoration: none;
border: 2px solid lightgray;
border-radius: 15px;
}
#closeButton{
display: block;
background: gray;
color: #fff;
text-align: center;
border: 2px solid lightgray;
border-bottom-left-radius: 13px;
border-bottom-right-radius: 13px;
}
#wrapper {
display: block;
text-align: center;
}
#menu {
display: none;
background: lightgray;
color: black;
padding-top: 5px;
margin: 0px;
list-style: none;
}
#menu {
color: #000;
text-decoration: none;
border: 2px solid lightgray;
border-radius: 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
open
<ul id="menu">
<li>CIT</li>
<li>Blackboard</li>
<li>Mcomms</li>
<li>Tables</li>
<li>Exams</li>
<li>close</li>
</ul>
</div>

Issue with set focus on conformation box in jquery/javascript?

On click of button i need to see a custom conformation dialogue box. I am able to see it but once the dialogue box has opened then I don't want to perform any action in HTML page until user select any option in dialogue box. I mean just similar to alert box functionality, until we say "Ok" in alert box the control does not go to HTML page. I need the same , My code is as follows,
Css
<style>
#confirmBox {
z-index:9999;
display: none;
background-color: #eee;
border-radius: 5px;
border: 1px solid #aaa;
position: relative;
width: 300px;
left: 50%;
margin-left: -150px;
padding: 6px 8px 8px;
box-sizing: border-box;
text-align: center;
}
#confirmBox .button {
background-color: #ccc;
display: inline-block;
border-radius: 3px;
border: 1px solid #aaa;
padding: 2px;
text-align: center;
width: 80px;
cursor: pointer;
}
#confirmBox .button:hover {
background-color: #ddd;
}
#confirmBox .message {
text-align: left;
margin-bottom: 8px;
}
</style>
Script:
$( "#locationList" ).on( "click", "li", function( event ) {
var form = $(this).closest('form');
doConfirm("The Coordinates for Selected location are "+ coodinatesDetails, function yes() {
alert("mail");
}, function no() {
//alert("Ok"); -- Do Nothing
} , function sms()
{
alert("sms");
});
});
function doConfirm(msg, yesFn, noFn, smsFn) {
var confirmBox = $("#confirmBox");
confirmBox.find(".message").text(msg);
confirmBox.find(".yes,.no,.sms").unbind().click(function () {
confirmBox.hide();
});
confirmBox.find(".yes").click(yesFn);
confirmBox.find(".no").click(noFn);
confirmBox.find(".sms").click(smsFn);
confirmBox.show();
}
HTML:
<div id="confirmBox">
<div class="message"></div>
<span class="button yes">Mail</span>
<span class="button sms">SMS</span>
<span class="button no">Cancle</span>
</div>

You will only need an overlay to accomplish this. Try something like this: http://jsfiddle.net/7MJBR/1/
Html Changes:
<div id="confirmOverlay"></div>
<div id="confirmBox">
<div class="message"></div> <span class="button yes">Mail</span>
<span class="button sms">SMS</span>
<span class="button no">Cancle</span>
</div>
CSS Changes:
#confirmOverlay {
position:fixed;
background: rgba(0,0,0,.5);
z-index: 9998;
width:100%;
top:0px;
left:0px;
}
Javscript Change:
function doConfirm(msg, yesFn, noFn, smsFn) {
var confirmBox = $("#confirmBox");
$("#confirmOverlay").height( $(window).height() );
confirmBox.find(".message").text(msg);
confirmBox.find(".yes,.no,.sms").unbind().click(function () {
confirmBox.hide();
$("#confirmOverlay").hide();
});
confirmBox.find(".yes").click(yesFn);
confirmBox.find(".no").click(noFn);
confirmBox.find(".sms").click(smsFn);
confirmBox.show();
}
The Overlay having a Z-index of 1 below your popup, and the fact that it covers the screen will prevent people from accessing the content below. I provided filler content in my JSFIDDLE to show this.
Once the dialog and overlay are no longer needed; $('#confirmOverlay').hide() or $('#confirmOverlay').fadeOut(200) will make it go bye bye. :)
I hope this helps! Let me know if you have questions.