We Keep Coding

Can anyone show me why my modals aren't opening

To see the modal button, fill out the input fields and select a day to output to
I grabbed the modal and the "todo" functionality from w3schools.com and changed some of the ids and classes. I've been looking through everything for a while and I can't seem to find the issue. I just need another pair of eyes on it.
var submitBtn = document.querySelector("#submitBtn");
submitBtn.addEventListener("click", function(){
event.preventDefault();
var boxSelect = document.querySelector("#boxSelect");
document.querySelector(`#b${boxSelect.value}NameOutput`).innerHTML = "<p>"+document.querySelector("#name").value+"</p>";
document.querySelector(`#b${boxSelect.value}UserOutput`).innerHTML = "<p>"+document.querySelector("#user").value+"</p>";
document.querySelector(`#b${boxSelect.value}LinkOutput`).innerHTML = "<p><a target='_blank' href='"+document.querySelector('#link').value+"'>Click Here for Recipe</a></p>";
document.querySelector(`#myBtn${boxSelect.value}`).style.display = "block";
});
// Get the modal
var modal = document.getElementById("myModal");
// Get the button that opens the modal
var btn = document.querySelector(`#myBtn${boxSelect.value}`);
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
// Create a "close" button and append it to each list item
var myNodelist = document.getElementsByTagName("LI");
var i;
for (i = 0; i < myNodelist.length; i++) {
var span = document.createElement("SPAN");
var txt = document.createTextNode("\u00D7");
span.className = "close";
span.appendChild(txt);
myNodelist[i].appendChild(span);
}
// Click on a close button to hide the current list item
var close = document.getElementsByClassName("close");
var i;
for (i = 0; i < close.length; i++) {
close[i].onclick = function() {
var div = this.parentElement;
div.style.display = "none";
}
}
// Add a "checked" symbol when clicking on a list item
var list = document.querySelector('ul');
list.addEventListener('click', function(ev) {
if (ev.target.tagName === 'LI') {
ev.target.classList.toggle('checked');
}
}, false);
// Create a new list item when clicking on the "Add" button
function newElement() {
var li = document.createElement("li");
var inputValue = document.getElementById("myInput").value;
var t = document.createTextNode(inputValue);
li.appendChild(t);
if (inputValue === '') {
alert("You must write something!");
} else {
document.getElementById("myUL").appendChild(li);
}
document.getElementById("myInput").value = "";
var span = document.createElement("SPAN");
var txt = document.createTextNode("\u00D7");
span.className = "close";
span.appendChild(txt);
li.appendChild(span);
for (i = 0; i < close.length; i++) {
close[i].onclick = function() {
var div = this.parentElement;
div.style.display = "none";
}
}
}
.square{
border: 1px solid black;
width: 15rem;
height: 15rem;
float: left;
margin:10px;
}
#formContainer {
position: relative;
float: left;
}
.boxTitle {
text-align: center;
margin-top: 1em;
}
.boxOutputContainer {
text-align: center;
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 15% auto; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
}
/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
.myBtn {
display: none;
}
/* Remove margins and padding from the list */
ul {
margin: 0;
padding: 0;
text-align: center;
}
/* Style the list items */
ul li {
cursor: pointer;
position: relative;
padding: 12px 8px 12px 40px;
background: #eee;
font-size: 18px;
transition: 0.2s;
/* make the list items unselectable */
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Set all odd list items to a different color (zebra-stripes) */
ul li:nth-child(odd) {
background: #f9f9f9;
}
/* Darker background-color on hover */
ul li:hover {
background: #ddd;
}
/* When clicked on, add a background color and strike out text */
ul li.checked {
background: #888;
color: #fff;
text-decoration: line-through;
}
/* Add a "checked" mark when clicked on */
ul li.checked::before {
content: '';
position: absolute;
border-color: #fff;
border-style: solid;
border-width: 0 2px 2px 0;
top: 10px;
left: 16px;
transform: rotate(45deg);
height: 15px;
width: 7px;
}
/* Style the close button */
.close {
position: absolute;
right: 0;
top: 0;
padding: 12px 16px 12px 16px;
}
.close:hover {
background-color: #f44336;
color: white;
}
/* Style the header */
.header {
background-color: black;
padding: 30px 40px;
color: white;
text-align: center;
}
/* Clear floats after the header */
.header:after {
content: "";
display: table;
clear: both;
}
/* Style the input */
#myInput {
margin: 0;
border: none;
border-radius: 0;
width: 75%;
padding: 10px;
float: left;
font-size: 16px;
}
/* Style the "Add" button */
.addBtn {
padding: 10px;
width: 25%;
background: #d9d9d9;
color: #555;
float: left;
text-align: center;
font-size: 16px;
cursor: pointer;
transition: 0.3s;
border-radius: 0;
}
.addBtn:hover {
background-color: #bbb;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="row col-sm-12">
<div class="square">
<h1 class="boxTitle">Sunday</h1>
<div class="boxOutputContainer">
<div class="outputItem" id="b1NameOutput"></div>
<div class="outputItem" id="b1UserOutput"></div>
<div class="outputItem" id="b1LinkOutput"></div>
<button class="myBtn" id="myBtn1">Open Modal</button>
</div>
</div>
<div class="square">
<h1 class="boxTitle">Monday</h1>
<div class="boxOutputContainer">
<div class="outputItem" id="b2NameOutput"></div>
<div class="outputItem" id="b2UserOutput"></div>
<div class="outputItem" id="b2LinkOutput"></div>
<button class="myBtn" id="myBtn2">Open Modal</button>
</div>
</div>
<div class="square">
<h1 class="boxTitle">Tuesday</h1>
<div class="boxOutputContainer">
<div class="outputItem" id="b3NameOutput"></div>
<div class="outputItem" id="b3UserOutput"></div>
<div class="outputItem" id="b3LinkOutput"></div>
<button class="myBtn" id="myBtn3">Open Modal</button>
</div>
</div>
<div class="square">
<h1 class="boxTitle">Wednesday</h1>
<div class="boxOutputContainer">
<div class="outputItem" id="b4NameOutput"></div>
<div class="outputItem" id="b4UserOutput"></div>
<div class="outputItem" id="b4LinkOutput"></div>
<button class="myBtn" id="myBtn4">Open Modal</button>
</div>
</div>
</div>
<div class="row col-lg-12">
<div class="square">
<h1 class="boxTitle">Thursday</h1>
<div class="boxOutputContainer">
<div class="outputItem" id="b5NameOutput"></div>
<div class="outputItem" id="b5UserOutput"></div>
<div class="outputItem" id="b5LinkOutput"></div>
<button class="myBtn" id="myBtn5">Open Modal</button>
</div>
</div>
<div class="square">
<h1 class="boxTitle">Friday</h1>
<div class="boxOutputContainer">
<div class="outputItem" id="b6NameOutput"></div>
<div class="outputItem" id="b6UserOutput"></div>
<div class="outputItem" id="b6LinkOutput"></div>
<button class="myBtn" id="myBtn6">Open Modal</button>
</div>
</div>
<div class="square">
<h1 class="boxTitle">Saturday</h1>
<div class="boxOutputContainer">
<div class="outputItem" id="b7NameOutput"></div>
<div class="outputItem" id="b7UserOutput"></div>
<div class="outputItem" id="b7LinkOutput"></div>
<button class="myBtn" id="myBtn7">Open Modal</button>
</div>
</div>
</div>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<div id="myDIV" class="header">
<h2>My To Do List</h2>
<input type="text" id="myInput" placeholder="Title...">
<span onclick="newElement()" class="addBtn">Add</span>
</div>
<ul id="myUL"></ul>
</div>
</div>
<div class="row">
<div id="formContainer">
<form>
<label for="name">Recipe name:</label>
<input required type="text" id="name">
<label for="user">Who's making it?</label>
<input required type="text" id="user">
<label for="link">Recipe Link</label>
<input type="text" id="link">
<label for="boxSelect">Which day?</label>
<select id="boxSelect">
<option value="1">Sunday</option>
<option value="2">Monday</option>
<option value="3">Tuesday</option>
<option value="4">Wednesday</option>
<option value="5">Thursday</option>
<option value="6">Friday</option>
<option value="7">Saturday</option>
</select>
<input type="submit" id="submitBtn">
</form>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="script.js">
</script>
</body>
</html>

It is because you said btn.onclick to show the modal but you never defined btn. It should be submitBtn.onclick.
I have a jsfiddle link because it doesn't work on a snippet properly:
https://jsfiddle.net/nukeboy212/7yj0rhsL/8/

The solution is that these code must be in event listener of submit button.
You want to select the Open Modal button only after you clicked the submit button and add the onClick function immediately after:
var boxSelect = document.querySelector("#boxSelect");
var btn = document.querySelector(`#myBtn${boxSelect.value}`);
btn.onclick = function () {
modal.style.display = "block";
};

Make dropdown menu closing when clicking outside of it

https://ataqfuel.com/pages/home-page-v2
I am trying to get button 2 and 3 to close like button 1 does when clicking outside of the dropdown menu. I tried adding myFunction1 code to myFunction2 and myFunction3 code but I'm not sure if I messed up the naming or what because all the dropdowns stopped functioning then.
function myFunction1() {
document.getElementById("myDropdown1").classList.toggle("show");
document.getElementById("myDropdown1").addEventListener('click', function(event) {
event.stopPropagation();
});
}
window.onclick = function(event) {
if (!event.target.matches('.dropbtn1')) {
var dropdowns = document.getElementsByClassName("dropdown-content1");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
document.getElementById("dropbtn1").addEventListener('click', function(event) {
event.stopPropagation();
});
function myFunction2() {
document.getElementById("myDropdown2").classList.toggle("show");
}
window.onclick = function(event) {
if (!event.target.matches('.dropbtn2')) {
var dropdowns = document.getElementsByClassName("dropdown-content2");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
function myFunction3() {
document.getElementById("myDropdown3").classList.toggle("show");
}
window.onclick = function(event) {
if (!event.target.matches('.dropbtn3')) {
var dropdowns = document.getElementsByClassName("dropdown-content3");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
CSS : .dropbtn {
margin: 5%;
background-color: #d3d3d3;
color: gray;
padding: 16px;
font-size: 16px;
font-weight: 500;
border: none;
cursor: pointer;
}
.dropbtn:hover,
.dropbtn:focus {
background-color: #edeb3f;
}
.dropdown {
position: relative;
display: inline;
min-width: 160px;
}
.dropdown-content {
display: none;
background-color: #f1f1f1;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {
background-color: #ddd;
}
.show {
display: block;
}

$('.moderate .button').on('click', (event) => {
$(event.target).siblings('.dropdown')
.toggleClass('is-open');
});
$(document).click(function(e) {
$('.moderate')
.not($('.moderate').has($(e.target)))
.children('.dropdown')
.removeClass('is-open');
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.0/css/bulma.css" rel="stylesheet" />
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<style>
.dropdown {
box-shadow: 0 0 2px #777;
display: none;
left: 0;
position: absolute;
padding: 2px;
z-index: 10;
}
.dropdown a {
font-size: 12px;
padding: 4px;
}
.dropdown.is-open {
display: block;
}
</style>
<div class="control moderate">
<button class="button is-small" type="button">
moderate
</button>
<div class="box dropdown">
<ul>
<li><a class="nav-item">edit</a></li>
<li><a class="nav-item">delete</a></li>
<li><a class="nav-item">block user</a> </li>
</ul>
</div>
</div>
<div class="control moderate">
<button class="button is-small" type="button">
moderate
</button>
<div class="box dropdown">
<ul>
<li><a class="nav-item">edit</a></li>
<li><a class="nav-item">delete</a></li>
<li><a class="nav-item">block user</a></li>
</ul>
</div>
</div>

You can use full screen width and height fixed backdrop for that. And after backdrop click close menu. It should be something like this:
jQuery(".backdrop").click(function(){
jQuery("#menu").toggleClass("open");
});

Close the dropdown menu if the user clicks on the second dropdown link

I have a navigation bar with multiple drop downs. So when I click on the first link it opens the drop down, but when I click on the second link, the first drop down doesn't close. (so I want to close the drop down menu if the user clicks on second link)
// main.js (javascript file)
function myFunction() {
var x = document.getElementById("myTopnav1");
if (x.className === "topnav1") {
x.className += " responsive1";
} else {
x.className = "topnav1";
}
}
function toggleDropDown(myid) {
var element = document.getElementById(myid);
element.classList.toggle("mystyle");
}
// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn1')) {
var dropdowns = document.getElementsByClassName("dropdown-content1");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('mystyle')) {
openDropdown.classList.remove('mystyle');
}
}
}
}
/* style.css (css file - css is all correct if anything you think is not added i only need help with javascript) */
.topnav1 {
background-color: blue !important;
}
/* Style the links inside the navigation bar */
.topnav1 a {
float: left;
display: block;
color: black;
text-align: center;
padding: 4px 8px;
text-decoration: none;
font-size: 10px;
border-bottom: 1px solid #FDFDFD;
}
.topnav-right1 {
float: right;
}
#media only screen and (max-width:768px) {
.topnav-right1 {
float: left;
}
}
.para-active {
background-color: #4F7ADA !important;
color: black !important;
}
.para-active button {
color: white !important;
}
/* Add an active class to highlight the current page */
.active1 {
color: black !important;
}
/* Hide the link that should open and close the topnav on small screens */
.topnav1 .icon {
display: none;
}
/* Dropdown container - needed to position the dropdown content */
.dropdown1 {
float: left;
overflow: hidden;
background-color: #f1f1f1;
border-bottom: 1px solid #E3E3E3;
}
/* Style the dropdown button to fit inside the topnav */
.dropdown1 .dropbtn1 {
font-size: 10px;
border: none;
outline: none;
color: black;
padding: 4px 8px;
background-color: inherit;
font-family: inherit;
margin: 0;
border-bottom: 1px solid #FDFDFD;
}
/* Style the dropdown content (hidden by default) */
.dropdown-content1 {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 96px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.mystyle {
display: block;
}
<div class="topnav1" id="myTopnav1">
<div class="dropdown1">
<button style="display: none;" id="btn_em" onclick="toggleDropDown('div_em')" class="dropbtn1">Meters
</button>
<div class="dropdown-content1" id="div_em">
<label class="dropnav-container">one</label>
<label class="dropnav-container">one</label>
<label class="dropnav-container">one</label>
</div>
</div>
<div class="dropdown1">
<button id="btn_inv" onclick="toggleDropDown('div_inv')" class="dropbtn1">Inverters
</button>
<div class="dropdown-content1" id="div_inv">
<label class="dropnav-container">two</label>
<label class="dropnav-container">two</label>
<label class="dropnav-container">two</label>
</div>
</div>
<div class="dropdown1">
<button id="btn_inm" onclick="toggleDropDown('div_inm')" class="dropbtn1">Inverter Manager
</button>
<div class="dropdown-content1" id="div_inm">
<label class="dropnav-container">three</label>
<label class="dropnav-container">three</label>
<label class="dropnav-container">three</label>
</div>
</div>
<div class="dropdown1">
<button id="btn_ws" onclick="toggleDropDown('div_ws')" class="dropbtn1">Sensors
</button>
<div class="dropdown-content1" id="div_ws">
<label class="dropnav-container">four</label>
<label class="dropnav-container">four</label>
<label class="dropnav-container">four</label>
</div>
</div>
<div class="dropdown1">
<button id="btn_smu" onclick="toggleDropDown('div_smu')" class="dropbtn1">SMUs
</button>
<div class="dropdown-content1" id="div_smu">
<label class="dropnav-container">five</label>
<label class="dropnav-container">five</label>
<label class="dropnav-container">five</label> </div>
</div>
☰
</div>

If you want to do the functionality with JavaScript, you have to use ids in order to close the other dropdowns, once a new one is open.
So, the solution I've worked on is creating a new method closeMenus, which will close the other dropdowns once you execute toggleDropDown.
function myFunction() {
var x = document.getElementById("myTopnav1");
if (x.className === "topnav1") {
x.className += " responsive1";
} else {
x.className = "topnav1";
}
}
function toggleDropDown(myid) {
closeMenus(myid);
var element = document.getElementById(myid);
element.classList.toggle("mystyle");
}
function closeMenus(currentId) {
var dropdowns = document.getElementsByClassName("dropdown-content1");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('mystyle') && openDropdown.id !== currentId) {
openDropdown.classList.remove('mystyle');
}
}
}
// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn1')) {
closeMenus();
}
}
.topnav1 {
background-color: blue !important;
}
/* Style the links inside the navigation bar */
.topnav1 a {
float: left;
display: block;
color: black;
text-align: center;
padding: 4px 8px;
text-decoration: none;
font-size: 10px;
border-bottom: 1px solid #FDFDFD;
}
.topnav-right1 {
float: right;
}
#media only screen and (max-width:768px) {
.topnav-right1 {
float: left;
}
}
.para-active {
background-color: #4F7ADA !important;
color: black !important;
}
.para-active button {
color: white !important;
}
/* Add an active class to highlight the current page */
.active1 {
color: black !important;
}
/* Hide the link that should open and close the topnav on small screens */
.topnav1 .icon {
display: none;
}
/* Dropdown container - needed to position the dropdown content */
.dropdown1 {
float: left;
overflow: hidden;
background-color: #f1f1f1;
border-bottom: 1px solid #E3E3E3;
}
/* Style the dropdown button to fit inside the topnav */
.dropdown1 .dropbtn1 {
font-size: 10px;
border: none;
outline: none;
color: black;
padding: 4px 8px;
background-color: inherit;
font-family: inherit;
margin: 0;
border-bottom: 1px solid #FDFDFD;
}
/* Style the dropdown content (hidden by default) */
.dropdown-content1 {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 96px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.mystyle {
display: block;
}
<div class="topnav1" id="myTopnav1">
<div class="dropdown1">
<button style="display: none;" id="btn_em" onclick="toggleDropDown('div_em')" class="dropbtn1">Meters
</button>
<div class="dropdown-content1" id="div_em">
<label class="dropnav-container">one</label>
<label class="dropnav-container">one</label>
<label class="dropnav-container">one</label>
</div>
</div>
<div class="dropdown1">
<button id="btn_inv" onclick="toggleDropDown('div_inv')" class="dropbtn1">Inverters
</button>
<div class="dropdown-content1" id="div_inv">
<label class="dropnav-container">two</label>
<label class="dropnav-container">two</label>
<label class="dropnav-container">two</label>
</div>
</div>
<div class="dropdown1">
<button id="btn_inm" onclick="toggleDropDown('div_inm')" class="dropbtn1">Inverter Manager
</button>
<div class="dropdown-content1" id="div_inm">
<label class="dropnav-container">three</label>
<label class="dropnav-container">three</label>
<label class="dropnav-container">three</label>
</div>
</div>
<div class="dropdown1">
<button id="btn_ws" onclick="toggleDropDown('div_ws')" class="dropbtn1">Sensors
</button>
<div class="dropdown-content1" id="div_ws">
<label class="dropnav-container">four</label>
<label class="dropnav-container">four</label>
<label class="dropnav-container">four</label>
</div>
</div>
<div class="dropdown1">
<button id="btn_smu" onclick="toggleDropDown('div_smu')" class="dropbtn1">SMUs
</button>
<div class="dropdown-content1" id="div_smu">
<label class="dropnav-container">five</label>
<label class="dropnav-container">five</label>
<label class="dropnav-container">five</label> </div>
</div>
☰
</div>

I assume that your mystyle class makes the dropdown active.
Then you can do something like this
// Get all the dropdowns
var dropdowns = document.getElementByClassName(".dropdown1")
// When clicked on dropdown this function will fire
var callThisFunction = function (e) {
// Check the event
e = e || window.event;
// Get the target element
let target = e.target || e.srcElement;
// Close all dropdowns
let activeDropdowns = document.getElementsByClassName("mystyle");
activeDropdowns.forEach(function (openDropdown) {
openDropdown.classList.remove('mystyle');
})
// Make the current dropdown active
target.className += 'mystyle'
}
// This adds click event listener to all dropdowns and tells it to fire callThisFunction when clicked
dropdowns.forEach(function (dropdown) {
dropdown[i].addEventListener('click', callThisFunction, false);
})

I suggest you use JQUERY (CDN BELOW)
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js
Jquery is super fast and helpful
because your problem will be solved like this in jquery.
$('.yourdropdownsclass').on('click', function(){
var target = $(this).attr('id');
$("#"+target).show().siblings("div").hide();
});
.yourdropdownclass
is class of your dropdowns
$(this).attr('id')
this is getting the ids of another dropdowns.
$("#"+target).show().siblings("div").hide();
"target" is the name of ids of other dropdowns and storing it to variable and showing it and hiding another sibling's dropdowns.
I hope it will help you!

how to highlight a tab between multiple tabs of a browser

If I use alert command (jQuery) in tab and if am in other tab then when the alert pops that tab starts blinking.
However I wanted a custom dialog box, so I created one. The problem is when I used the custom dialog box the tab is not getting highlighted.
$(document).ready(function() {
var dialog = $('#window');
$('#exit').click(function() {
dialog.hide();
});
$('#snooze').click(function() {
var selected = $('#dropdown :selected').val();
dialog.hide();
setTimeout(function() {
dialog.show();
}, selected * 1000);
});
$('#show').click(function() {
dialog.show();
});
});
#exit {
padding: 4px 8px;
}
#window {
width: 400px;
height: 150px;
position: absolute;
margin: auto;
top: 0%;
right: 0%;
bottom: 0%;
left: 0%;
/*background: linear-gradient(top, #ffffff 0%, #93d2ed 73%);*/
border: 1px solid gray;
font-family: sans-serif;
/* padding: 5px 10px 20px 20px;*/
}
#snoozetimer {
border: 1px solid grey;
padding: 2px 2px 4px 4px
}
#head {
background: #76DBEA;
display: block;
padding: 5px 10px 5px 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="window">
<span id="head">Time out alert</span>
<h3 style="padding:0px 5px">
<p>Please Submit Time In !</p>
</h3>
<span><img src="alarm.gif" alt="image" style="position:absolute;right:10%;top:25%;display:inline-block; width=50px;height:50px;"></img></span>
<button id="exit">Close </button>
<span id="snoozetimer">
<select id="dropdown">
<option value="5">5-Minutes</option>
<option value="10">10-Minutes</option>
<option value="15">15-Minutes</option>
<option value="20">20-Minutes</option>
<option value="25">25-Minutes</option>
<option value="30">30-Minutes</option>
</select>
<button id="snooze">Snooze </button>
</span>
</div>
**I have a ASP.net project i need pass some value to master page so that the alert dialog pops up after a certain time by click certain event on the page ,if the user is in other tab of same project,can i pop up alert dialog on the currently active tab , otherwise on contrary if the tab gets hightlighted on which it is clikced after certain time its fine, if i use predefined alert from jquery its working as i wanted but if i use custum created dialog pop up its doenot have the power of the real alert box IF anyone knows any solution pls tell me
**

I created Tabs using w3school code and try to answer your scenario.
i believe you can use this simple approach easily.Here I attached whole code of it.
After you snooze the clock after its expire tab 1 will be highlighted even if you were at any tab at that moment.
function openCity(evt, tab) {
// Declare all variables
var i, tabcontent, tablinks;
// Get all elements with class="tabcontent" and hide them
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
// Get all elements with class="tablinks" and remove the class "active"
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
// Show the current tab, and add an "active" class to the button that opened the tab
document.getElementById(tab).style.display = "block";
evt.currentTarget.className += " active";
}
var dialog = $('#window');
$('#exit').click(function() {
dialog.hide();
});
$('#snooze').click(function() {
var selected = $('#dropdown :selected').val();
dialog.hide();
setTimeout(function() {
var tablinks1 = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks1.length; i++) {
if (tablinks1[i].className === 'tablinks tab1') {
tablinks1[i].className = "tablinks tab1 active";
} else {
tablinks1[i].className = tablinks1[i].className.replace(" active", "");
}
}
dialog.show();
}, selected * 1000);
});
$('#show').click(function() {
var tablinks1 = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks1.length; i++) {
if (tablinks1[i].className === 'tablinks tab1') {
tablinks1[i].className = "tablinks tab1 active";
} else {
tablinks1[i].className = tablinks1[i].className.replace(" active", "");
}
}
dialog.show();
});
#exit {
padding: 4px 8px;
}
#window {
width: 400px;
height: 150px;
position: absolute;
margin: auto;
top: 0%;
right: 0%;
bottom: 0%;
left: 0%;
/*background: linear-gradient(top, #ffffff 0%, #93d2ed 73%);*/
border: 1px solid gray;
font-family: sans-serif;
/* padding: 5px 10px 20px 20px;*/
}
#snoozetimer {
border: 1px solid grey;
padding: 2px 2px 4px 4px
}
#head {
background: #76DBEA;
display: block;
padding: 5px 10px 5px 10px;
}
/* Style the tab */
div.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
/* Style the buttons inside the tab */
div.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
}
/* Change background color of buttons on hover */
div.tab button:hover {
background-color: #ddd;
}
/* Create an active/current tablink class */
div.tab button.active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
<button id="show">show </button>
<div class="tab">
<button class="tablinks tab1" onclick="openCity(event, 'Tab1')">Tab1</button>
<button class="tablinks tab2" onclick="openCity(event, 'Tab2')">Tab2</button>
<button class="tablinks tab3" onclick="openCity(event, 'Tab3')">Tab3</button>
</div>
<div id="Tab1" class="tabcontent">
<h3>Tab1</h3>
<div id="window">
<span id="head">Time out alert</span>
<h3 style="padding:0px 5px">
<p>Please Submit Time In !</p>
</h3>
<span><img src="alarm.gif" alt="image" style="position:absolute;right:10%;top:25%;display:inline-block; width=50px;height:50px;"></img></span>
<button id="exit">Close </button>
<span id="snoozetimer">
<select id="dropdown">
<option value="5">5-Minutes</option>
<option value="10">10-Minutes</option>
<option value="15">15-Minutes</option>
<option value="20">20-Minutes</option>
<option value="25">25-Minutes</option>
<option value="30">30-Minutes</option>
</select>
<button id="snooze">Snooze </button>
</span>
</div>
</div>
<div id="Tab2" class="tabcontent">
<h3>Tab2</h3>
</div>
<div id="Tab3" class="tabcontent">
<h3>Tab3</h3>
</div>
</body>
</html>
There may be several ways to do your problem.but this is quite easy :)
Cheers.

jQuery/javascript show first tab by default

I have the following code for a tab I am trying to create.
<style>
nav.tab {
margin: 0;
padding: 0;
display: block;
width: 150px;
overflow: hidden;
border: 1px solid #ccc;
background-color: black;
float: left;
}
#static {
margin-left: 200px;
}
/* Float the list items side by side*/
section.tab {float: left;}
/* Style the links inside the list items*/
nav.tab a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.3s;
font-size: 17px;
font-family: Segoe UI;
}
/*Change background color of links on hover */
nav.tab a:hover {
background-color: purple;
color: white;
}
/* Create an active/current tablink class */
nav.tab a:focus, .active {
background-color: white;
color: purple;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border-top: none;
height: 700px;
width: 600px;
}
</style>
<nav class="tab">
Profile
Password
Tokyo
</nav>
<div id="static" class="container">
<div id="Profile" class="tabcontent">
<h3>London</h3>
<p>London is the capital city of England.</p>
</div>
<div id="Password" class="tabcontent">
<h4 style="font-family: Segoe UI; color: purple; padding: 15px 0 15px 0;">Change Password</h4>
<p id="label">Enter OLD Password</p><input type="password" id="field" size="25" name="oldpassword" required="required"><br/><br/>
<p id="label">Enter NEW Password</p><input type="password" id="field" size="25" name="newpassword" required="required"><br/><br/>
<p id="label">Enter NEW Password AGAIN</p><input type="password" id="field" size="25" name="newpassword2" required="required"><br/><br/>
</div>
<div id="Tokyo" class="tabcontent">
<h3>Tokyo</h3>
<p>Tokyo is the capital of Japan.</p>
</div>
</div>
<script>
function openSetting(evt, settingName) {
var i, tabcontent, tablinks;
$('.tabcontent a:first').tab('show');
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(settingName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>
I am trying to make the first tab show by default.
As of now, when the page loads none of the content for the tabs can be seen because of a 'display: none;' css value. But i need the first page to show on load.
Help me out please.

As I understand you need only to set class ".active" to the first tab.
Profile
And in js, when you handle click on tab do something like this:
$(nav.tab>a).removeClass('active');

Maybe you want to use jqueryui? Tabs are included there.
also bootstrap provides nice tabs:
http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_tab&stacked=h

Try this solution --> https://css-tricks.com/css3-tabs/
Also try make a new class, for example class selected, and manage the selected tab (also the default selected tab) with that class and then, with JS add or remove that class.
See also this --> http://www.menucool.com/tabbed-content
See u!

Just fire that function with the desired params on document.ready:
openSetting(event, 'Profile');
openSetting(event, 'Profile');
function openSetting(evt, settingName) {
var i, tabcontent, tablinks;
//$('.tabcontent a:first').show();
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(settingName).style.display = "block";
evt.currentTarget.className += " active";
}
nav.tab {
margin: 0;
padding: 0;
display: block;
width: 150px;
overflow: hidden;
border: 1px solid #ccc;
background-color: black;
float: left;
}
#static {
margin-left: 200px;
}
/* Float the list items side by side*/
section.tab {
float: left;
}
/* Style the links inside the list items*/
nav.tab a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.3s;
font-size: 17px;
font-family: Segoe UI;
}
/*Change background color of links on hover */
nav.tab a:hover {
background-color: purple;
color: white;
}
/* Create an active/current tablink class */
nav.tab a:focus,
.active {
background-color: white;
color: purple;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border-top: none;
height: 700px;
width: 600px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav class="tab">
Profile
Password
Tokyo
</nav>
<div id="static" class="container">
<div id="Profile" class="tabcontent">
<h3>London</h3>
<p>London is the capital city of England.</p>
</div>
<div id="Password" class="tabcontent">
<h4 style="font-family: Segoe UI; color: purple; padding: 15px 0 15px 0;">Change Password</h4>
<p id="label">Enter OLD Password</p>
<input type="password" id="field" size="25" name="oldpassword" required="required">
<br/>
<br/>
<p id="label">Enter NEW Password</p>
<input type="password" id="field" size="25" name="newpassword" required="required">
<br/>
<br/>
<p id="label">Enter NEW Password AGAIN</p>
<input type="password" id="field" size="25" name="newpassword2" required="required">
<br/>
<br/>
</div>
<div id="Tokyo" class="tabcontent">
<h3>Tokyo</h3>
<p>Tokyo is the capital of Japan.</p>
</div>
</div>

Assuming first tab to be shown as the default tab.
These are the changes
Profile
add this line after closing bracket of function openSetting.
document.getElementById("defaultOpen").click();