My audio and search features don't function as intended

My audio and search features don't function as intended - javascript

I'm making a quick website and testing/trying out javascript, html, and css, but I've run into a couple of errors that I can't figure out how to deal with.
In my dropdown menu with my search bar, the list of items that you can search show even when you're not selected onto the search.
I'm trying to get an audio to play when you increment the counter, but the audio randomly plays when you load the website.
2a) The audio doesn't play when you click the increment button even though the PlaySound() function is referenced through onclick with the button.
function search()
{
var input, filter, ul, li, a, i, txtValue;
input = document.getElementById("pgsearchbar").value;
filter = input.toUpperCase();
ul = document.getElementById("searchitems");
li = ul.getElementsByTagName("li");
for (i = 0; i < li.length; i++)
{
finder = li[i].getElementsByTagName("a")[0];
letter = finder.textContent || finder.innerText;
if (letter.toUpperCase().indexOf(filter) > -1)
{
li[i].style.display = "";
}
else
{
li[i].style.display = "none";
}
}
}
let counter = 0;
function increment()
{
counter++;
document.querySelector("#counter").innerHTML = counter;
}
function PlaySound(soundObj)
{
document.getElementById(soundObj).play();
}
function reset()
{
document.querySelector("#counter").innerHTML = 0;
counter = 0;
}
.pageselector
{
position:absolute;
bottom:10%;
left:45%;
}
.banner
{
background-image:url("sky.jpg");
padding:60px;
color:lightblue;
}
.banntxt
{
font-size:50px;
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
font-family:"Faster One";
}
.navbar-brand
{
font-family:"Faster One";
font-size:25px;
}
li
{
margin:3px 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link href="styles.css" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Faster One">
<title>My Webpage</title>
</head>
<body>
<div>
<div class="banner">
<h1 class="banntxt">abcdefghijklmnop</h1>
</div>
<nav class="navbar navbar-light" style="background-color: #e3f2fd;">
<span class="navbar-brand mb-0 h1">ABC</span>
<h2 style="font-size:26px;">Contact us at: abcdefgh#gmail.com | ###-####-####</h2>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul id="navbaritems" class="navbar-nav">
<li class="nav-item active">
<button type="button" class="btn btn-info disabled">Home</a>
</li>
<li class="nav-item">
<button onclick="window.location.href='#';" type="button" class="btn btn-info">About me</a>
</li>
<li class="nav-item">
<button onclick="window.location.href='#';" type="button" class="btn btn-info">Blah</a>
</li>
<li>
<form class="form-inline">
<input id="pgsearchbar" class="form-control mr-sm-2" type="search" onkeyup="search()" placeholder="Search" aria-label="Search">
<ul id="searchitems">
<li>
Homepage
</li>
<li>
About Me
</li>
<li>
Page2
</li>
<li>
Page3
</li>
<li>
Page4
</li>
</ul>
<button class="btn btn-outline-info my-2 my-sm-0" type="submit">Search</button>
</form>
</li>
</ul>
</div>
</nav>
</div>
<div class="card text-center" style="width:11rem; left:60px; bottom:-30px;">
<div class="card-body">
<h5 class="card-title">Counter</h5>
<p class="card-text" id="counter">0</p>
<button onclick="increment(); PlaySound(coin)" class="btn btn-primary">Increment</button>
<button onclick="reset()" class="btn btn-danger" style="margin:5px">Reset</button>
</div>
</div>
<div style="position:absolute; bottom:10%; left:48.04%;">
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
<div class="btn-group" role="group">
<button id="dropdownMenuButton" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Page 1
</button>
<div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
<a class="dropdown-item disabled">1</a>
<a class="dropdown-item" href="page2.html">2</a>
<a class="dropdown-item" href="page3.html">3</a>
<a class="dropdown-item" href="page4.html">4</a>
</div>
</div>
<button onclick="window.location.href='page2.html';" type="btn" class="btn btn-secondary">-></button>
</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.6/umd/popper.min.js"
integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
crossorigin="anonymous"></script>
<script type="text/javascript" src="functions.js"></script>
<embed src="coin.wav" autostart="false" width="0" height="0" id="coin" enablejavascript="true">
</body>
</html>

The audio works differently because you have a <embed> tag instead of an <audio> tag
to play the audio:
on the button add the 's:
<button onclick="increment(); PlaySound('coin')" class="btn btn-primary">Increment</button>
and in the audio file, replace with an audio tag
<audio src="coin.wav" autostart="false" width="0" height="0" id="coin" enablejavascript="true"></audio>

Related

Adding a form in html using javascript

I am trying to configure on how to add a form whenever you click the add button. Can someone help me with this? I attached a jsfiddle so that you can fully understand what I am saying
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div style="display: none;" id = "form1">
<form action="" method="" id = "add-order-form">
<div class="row add-order-info text-center">
<div class="col">
<div class="dropdown">
<button type="button" class="btn dropdown-toggle"
data-bs-toggle="<dropdown">
Select...
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Mouse</a></li>
<li><a class="dropdown-item" href="#">Monitor</a></li>
<li><a class="dropdown-item" href="#">Keyboard</a></li>
</ul>
</div>
</div>
</div>
</form>
</div>
<button type="button" value ="Add Child" onclick="addForm();" id = "add-button">
Add
</button>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
function addForm() {
document.getElementById('form1').style.display = 'block';
$("#add-order-form").clone().appendTo("#form1");
}
https://jsfiddle.net/u0pzeqry/1/

We're going to create a clone of your form and add it to a container div. Here's the HTML:
function addForm() {
var formsContainer = document.getElementById("formsContainer");
var newForm = document.getElementById("form1").cloneNode(true);
newForm.style.display = "block";
formsContainer.appendChild(newForm);
}
<div style="display: none;" id = "form1">
<form action="" method="" id = "add-order-form">
<div class="row add-order-info text-center">
<div class="col">
<div class="dropdown">
<button type="button" class="btn dropdown-toggle"
data-bs-toggle="dropdown">
Select...
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Mouse</a></li>
<li><a class="dropdown-item" href="#">Monitor</a></li>
<li><a class="dropdown-item" href="#">Keyboard</a></li>
</ul>
</div>
</div>
</div>
</form>
</div>
<div id="formsContainer"></div>
<button type="button" value ="Add Child" onclick="addForm();" id = "add-button">
Add
</button>
Here's a fork of your JS fiddle with the code working:
https://jsfiddle.net/TrostCodes/7cdhfqkn/8/

you can use js side instead of using HTML clone. I think that would be the ideal method for that.
var formcounter = 0;
function setForms(){
$("#wrapperFormContainer").append( '<form action="" method="" id="add-order-form'+ formcounter +'"><div>add-order-form'+formcounter+'</div></form>');
formcounter++;
}
#wrapperFormContainer{
display:inline-block;
width:100%;
background-color:green;
}
#wrapperFormContainer form{
display:inline-block;
margin: 5px;
background-color:red;
border:solid 1px #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wrapperFormContainer">
</div>
<button type="button" onclick="setForms()">Add form</button>

how to move the whole main-video-wrap div into video-list-Wrapping div?

Thanks #Kathara Your help is greatly appreciated
I have created the video layout with a picture in picture mode option click the video move to the background works fine, but I need to move the whole video wrap into the main video wrap not only the video, with the card image name, and dropdowns also moved on within the video list and also changing the id attribute of videoWraping element how to modify it?
here is my demo code
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./style.css" />
<link rel="stylesheet" href="./bootstrap/bootstrap.min.css">
<title>Document</title>
</head>
<body>
<div class="container-fluid m-0" id="videos m-0">
<div class="row vh-100 align-items-end align-items-lg-center m-0" >
<div class="col-12 offset-lg-8 col-lg-4 text-center text-lg-end ">
<div id="VisualMedia">
<div class=" main-video mainVideoWrap" id="cardvideo_localstream">
<video id="video-main" class="video1" src="https://www.dropbox.com/s/ve0apo59semvv70/example-video-1.mp4?raw=1 " muted autoplay loop type="video/mp4" ></video>
<div class="card-img-overlay p-0 " id="mainCard">
<div>
<span class="text-capitalize user-name">
<i class="icon-user pe-1"></i>videoBg
</span>
<div id="dropDown" class="dropdown float-end">
<button class="btn btn-sm btn-danger me-3 mt-2 dropdown-toggle" type="button" id="userMenu" data-bs-toggle="dropdown" aria-expanded="false">
<i class="icon-dot"></i>
</button>
<ul id="drop" class="dropdown-menu dropdown-menu-end" aria-labelledby="userMenu" >
<li>
<a id="dropdown_items" class="dropdown-item" href="#" >
<i class="bi bi-mic-mute m-1"></i>Start Audio</a >
</li>
<li>
<a id="dropdown_items" class="dropdown-item" href="#" ><i class="bi bi-camera-video-off m-1"></i>Stop Video</a >
</li>
<li>
<a id="dropdown_items" class="dropdown-item" href="#" ><i class="bi bi-person-x m-1"></i>Remove</a>
</li>
</ul>
</div>
</div>
<div id="mainlogo">
<img src="./client_img.png" alt="logo" class="img-fluid rounded float-end" />
</div>
</div>
</div>
<!-- <div class="row vh-100 align-items-end align-items-lg-center m-0"> -->
<div class=" video-list listofvideos">
<div class="position-relative videoWrap" id="cardvideo_remotestream">
<video src=" https://www.dropbox.com/s/se8r4svvnt2qpfu/example-video-2.mp4?raw=1 " muted autoplay loop type="video/mp4" ></video>
<div class="card-img-overlay p-0 " id="imgCard">
<div>
<span class="text-capitalize user-name">
<i class="icon-user pe-1"></i>videolist1
</span>
<div id="dropDown" class="dropdown float-end">
<button class="btn btn-sm btn-danger me-3 mt-2 dropdown-toggle" type="button" id="userMenu" data-bs-toggle="dropdown" aria-expanded="false">
<i class="icon-dot"></i>
</button>
<ul id="drop" class="dropdown-menu dropdown-menu-end" aria-labelledby="userMenu" >
<li>
<a id="dropdown_items" class="dropdown-item" href="#" ><i class="bi bi-mic-mute m-1"></i>Start Audio</a >
</li>
<li>
<a id="dropdown_items" class="dropdown-item" href="#" ><i class="bi bi-camera-video-off m-1"></i>Stop Video</a >
</li>
<li>
<a id="dropdown_items" class="dropdown-item" href="#" ><i class="bi bi-person-x m-1"></i>Remove</a >
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="position-relative videoWrap" id="cardvideo_remotestream">
<video src=" https://www.dropbox.com/s/se8r4svvnt2qpfu/example-video-2.mp4?raw=1 " muted ></video>
<div class="card-img-overlay p-0 " id="imgCard">
<div>
<span class="text-capitalize user-name">
<i class="icon-user pe-1"></i>videolist2
</span>
<div id="dropDown" class="dropdown float-end">
<button class="btn btn-sm btn-danger me-3 mt-2 dropdown-toggle" type="button" id="userMenu" data-bs-toggle="dropdown" aria-expanded="false" >
<i class="icon-dot"></i>
</button>
<ul id="drop" class="dropdown-menu dropdown-menu-end" aria-labelledby="userMenu" >
<li>
<a id="dropdown_items" class="dropdown-item" href="#" ><i class="bi bi-mic-mute m-1"></i>Start Audio</a >
</li>
<li>
<a id="dropdown_items" class="dropdown-item" href="#" ><i class="bi bi-camera-video-off m-1"></i>Stop Video</a >
</li>
<li>
<a id="dropdown_items" class="dropdown-item" href="#" ><i class="bi bi-person-x m-1"></i>Remove</a >
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="position-relative videoWrap" id="cardvideo_remotestream">
<video src=" https://www.dropbox.com/s/se8r4svvnt2qpfu/example-video-2.mp4?raw=1 " muted autoplay loop type="video/mp4"></video>
<div class="card-img-overlay p-0 " id="imgCard">
<div>
<span class="text-capitalize user-name">
<i class="icon-user pe-1"></i>videolist3
</span>
<div id="dropDown" class="dropdown float-end">
<button class="btn btn-sm btn-danger me-3 mt-2 dropdown-toggle" type="button" id="userMenu" data-bs-toggle="dropdown" aria-expanded="false" >
<i class="icon-dot"></i>
</button>
<ul id="drop" class="dropdown-menu dropdown-menu-end" aria-labelledby="userMenu">
<li>
<a id="dropdown_items" class="dropdown-item" href="#" ><i class="bi bi-mic-mute m-1"></i>Start Audio</a>
</li>
<li>
<a id="dropdown_items" class="dropdown-item" href="#"><i class="bi bi-camera-video-off m-1"></i>Stop Video</a >
</li>
<li>
<a id="dropdown_items" class="dropdown-item" href="#" ><i class="bi bi-person-x m-1"></i>Remove</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="position-relative videoWrap" id="cardvideo_remotestream">
<video src=" https://www.dropbox.com/s/se8r4svvnt2qpfu/example-video-2.mp4?raw=1 " muted autoplay loop type="video/mp4"></video>
<div class="card-img-overlay p-0 " id="imgCard">
<div>
<span class="text-capitalize user-name">
<i class="icon-user pe-1"></i>videolist4
</span>
<div id="dropDown" class="dropdown float-end">
<button class="btn btn-sm btn-danger me-3 mt-2 dropdown-toggle" type="button" id="userMenu" data-bs-toggle="dropdown" aria-expanded="false"
>
<i class="icon-dot"></i>
</button>
<ul id="drop" class="dropdown-menu dropdown-menu-end" aria-labelledby="userMenu" >
<li>
<a id="dropdown_items" class="dropdown-item" href="#" ><i class="bi bi-mic-mute m-1"></i>Start Audio</a >
</li>
<li> <a id="dropdown_items" class="dropdown-item" href="#"
><i class="bi bi-camera-video-off m-1"></i>Stop Video</a >
</li>
<li>
<a id="dropdown_items" class="dropdown-item" href="#"
><i class="bi bi-person-x m-1"></i>Remove</a >
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- </div> -->
</div>
<!-- row column -->
</div>
</div>
</div>
</div>
</body>
<script src="./bootstrap/bootstrap.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</html>
style.css
body{
margin: 0;
transition: all 0.3s ease;
}
/* main video */
.main-video video{
transition: all 0.3s ease-in-out;
position: absolute;
object-fit: cover;
height: 100vh;
width: 100%;
right: 0;
left: 0;
bottom: 0;
z-index: -1;
}
.main-video #mainlogo{
position: fixed;
bottom: 2rem;
right: 1rem;
}
.main-video #mainlogo img{
width: 40px;
}
#main-video{
transition: all 0.3s ease-in-out;
}
.videoWrap{
position: relative;
max-width: 320px;
display: inline-block;
}
.videoWrap #logo{
position: absolute;
bottom: 2rem;
right: 1rem;
}
.videoWrap #logo img{
width: 40px;
}
.video-list video{
transition: all 0.3s ease-in-out;
max-width: 320px;
margin: 0 1rem 1rem 0;
border-radius: 1.25rem;
z-index: 2;
}
.user-name{
color: #fff;
float: left;
padding: 0.125rem 0.25rem;
background: #000;
border-radius: 0.5rem;
margin: 0.5rem 0 0 1rem;
}
#media screen and (max-width:768px){
.videoWrap,
.video-list video{
max-width: 217px;
}
}
#media only screen and (min-device-width: 200px) and (max-device-width: 992px) and (orientation:landscape) {
.videoWrap,
.video-list video{
max-width: 150px;
}
.videoWrap, #dropDown {
margin: -0.8rem 0.2rem -1.8rem -0.3rem;
left: 31px;
bottom: 4px;
}
.videoWrap .user-name{
margin: -0.8rem 0.2rem -1.8rem -0.3rem;
left: 31px;
bottom: 4px;
}
}
#media screen and (max-width:480px){
.videoWrap,
.video-list video{
max-width: 149px;
bottom: 4rem;
}
.videoWrap #logo{
bottom: 1.5rem;
}
.videoWrap #logo img{
width: 30px;
}
}
jsfile
// using jQuery
var initVideoSwapping = function() {
// check if there is an element first
if ($('.video-list #imgCard').length > 0 && $('#video-main').length > 0) {
$('.video-list .videoWrap').on('click', function() {
var $thisVideoWrapId = $(this).find('.videoWrap');
var $mainVideoWrapId= $('.main-video')
$mainVideoWrapId.attr('id', 'cardvideo_remotestream')
$thisVideoWrapId.attr('id', 'cardvideo_localstream')
// video change
var $thisVideo = $(this).find('video');
var $mainVideo = $('#video-main');
// clone the two elements to change them
// without modifying the original element
var $thisVideoClone = $thisVideo.clone();
var $mainVideoClone = $mainVideo.clone();
// exchange the ids
$thisVideoClone.attr('id', 'video-main');
$mainVideoClone.attr('id', '');
// insert the clones before the originals
// and remove the originals
$thisVideoClone.insertBefore($mainVideo);
$mainVideo.remove();
$mainVideoClone.insertBefore($thisVideo);
$thisVideo.remove();
});
}
}
$(function() {
initVideoSwapping();
});
main-videoWrap <--> video-list videoWrap, video-list videoWrap<--> main-videoWrap
How to append to move and add the video element with a single click using JavaScript or jQuery?

I have looked into the code you have provided and found a few bugs.
Replace:
$('#main-video').length with $('.main-video').length
var $mainVideo = $('#video-main'); with $mainVideo = $('#video-main');
In also restructured your code so that the clicked video is used as main and removed from the DOM. Please use it and test let me know if works as you would want. If not, just comment on this answer and I will see if I can make some improvements.
// using jQuery
var initVideoSwapping = function () {
// check if there is an element first
if ($('.video-list .videoWrap').length > 0 && $('.main-video').length > 0) {
$('.video-list .videoWrap').on('click', function () {
var $thisVideoWrapId = $(this).find('.videoWrap');
var $mainVideoWrapId= $('.main-video');
if ($mainVideoWrapId.attr('id') !== 'cardvideo_remotestream') {
$mainVideoWrapId.attr('id', 'cardvideo_remotestream');
} else {
$mainVideoWrapId.attr('id', 'cardvideo_localstream');
}
if ($thisVideoWrapId.attr('id') !== 'cardvideo_localstream') {
$thisVideoWrapId.attr('id', 'cardvideo_localstream');
} else {
$thisVideoWrapId.attr('id', 'cardvideo_remotestream');
}
var $thisVideo = $(this).find('video');
var $thisVideoSrc = $thisVideo.attr('src');
var $mainVideo = $('#video-main');
var $mainVideoSrc = $mainVideo.attr('src');;
// Replace main video source with clicked video source
$mainVideo.attr('src', $thisVideoSrc);
// Replace clicked video with main video source
$thisVideo.attr('src', $mainVideoSrc);
});
}
}
$(function () {
initVideoSwapping();
});

Adding onclick function in anchor tag which is not working [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed last year.
Improve this question
I am have made dropdown using bootstarap. I have added onlcick funtions in my anchor tags in dropdown. I just want make my text box readonly if one of the link is clicked on. I have used js to make text boxes read only. Please Help me to solve my problem. Below is my code:
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous">
<title>Mole Calculator | Chemistry Calculator</title>
</head>
<body>
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-black">
<div class="container-fluid">
<a class="navbar-brand" href="#"><h4>
<b>Chemistry Calculator</b>
</h4></a>
<button class="navbar-toggler" type="button"
data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav text-uppercase">
<li class="nav-item"><a class="nav-link active"
aria-current="page" href="/Chemistry-Calculator/">Home</a></li>
<li class="nav-item"><a class="nav-link active"
aria-current="page" href="/Chemistry-Calculator/about">About</a></li>
</ul>
</div>
</div>
</nav>
<div class="container" style="padding-top: 5%;">
<div class="card px-4 py-5" style="width: 650px;">
<div class="card-block">
<form action="/Chemistry-Calculator/Number-Of-Moles">
<div class="mb-3">
<label for="givenMass" class="form-label">Given Mass of
Substance</label> <input type="text" class="form-control" id="givenMass"
aria-describedby="emailHelp" name="givenMass"
value="${givenMass}" style="width: 600px">
</div>
<div class="mb-3">
<label for="molarMass" class="form-label">Molar Mass</label> <input
type="text" class="form-control" id="molarMass" name="molarMass"
value="${molarMass}" style="width: 600px">
</div>
<div class="mb-3">
<label for="molarMass" class="form-label">Moles</label> <input
type="text" class="form-control"
id="molarMass" name="moles" value="${moles}" style="width: 600px">
</div>
<input class="btn btn-outline-success" type="submit"
value="Calculate">
<div class="btn-group">
<button type="button" class="btn btn-success dropdown-toggle"
data-bs-toggle="dropdown" aria-expanded="false">Choose what to calculate </button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" onclick="readonlyForMoles()" href="/Chemistry-Calculator/Mole-Calculator">Calculate Moles</a></li>
<li><a class="dropdown-item" onclick="readonlyForMolarMass()" href="/Chemistry-Calculator/Mole-Calculator">Calculate Molar Mass</a></li>
<li><a class="dropdown-item" onclick="readonlyForGivenMass()" href="/Chemistry-Calculator/Mole-Calculator">Calculate Given mass</a></li>
</ul>
</div>
</form>
</div>
</div>
</div>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
<script type="text/javascript" src="../javascript/script.js"></script>
</body>
</html>
My Java Script File:
function readonlyForGivenMass() {
var x = document.getElementById("givenMass").readOnly;
}
function readonlyForMolarMass() {
var x = document.getElementById("molarMass").readOnly;
}
function readonlyForMoles() {
var x = document.getElementById("moles").readOnly;
}
Actually this is small part of java project. Hence I have used jsp and jstl.
My file structure:

you are just assigning but declaring it, just need to make it true, so given id would be readonly, please find below snippets
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous">
<title>Mole Calculator | Chemistry Calculator</title>
</head>
<body>
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-black">
<div class="container-fluid">
<a class="navbar-brand" href="#"><h4>
<b>Chemistry Calculator</b>
</h4></a>
<button class="navbar-toggler" type="button"
data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav text-uppercase">
<li class="nav-item"><a class="nav-link active"
aria-current="page" href="/Chemistry-Calculator/">Home</a></li>
<li class="nav-item"><a class="nav-link active"
aria-current="page" href="/Chemistry-Calculator/about">About</a></li>
</ul>
</div>
</div>
</nav>
<div class="container" style="padding-top: 5%;">
<div class="card px-4 py-5" style="width: 650px;">
<div class="card-block">
<form action="/Chemistry-Calculator/Number-Of-Moles">
<div class="mb-3">
<label for="givenMass" class="form-label">Given Mass of
Substance</label> <input type="text" class="form-control" id="givenMass"
aria-describedby="emailHelp" name="givenMass"
value="${givenMass}" style="width: 600px">
</div>
<div class="mb-3">
<label for="molarMass" class="form-label">Molar Mass</label> <input
type="text" class="form-control" id="molarMass" name="molarMass"
value="${molarMass}" style="width: 600px">
</div>
<div class="mb-3">
<label for="moles" class="form-label">Moles</label> <input type="text" class="form-control" id="moles" name="moles" value="${moles}" style="width: 600px">
</div>
<input class="btn btn-outline-success" type="submit"
value="Calculate">
<div class="btn-group">
<button type="button" class="btn btn-success dropdown-toggle"
data-bs-toggle="dropdown" aria-expanded="false">Choose what to calculate </button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" onclick="readonlyForMoles()" href="/Chemistry-Calculator/Mole-Calculator">Calculate Moles</a></li>
<li><a class="dropdown-item" onclick="readonlyForMolarMass()" href="/Chemistry-Calculator/Mole-Calculator">Calculate Molar Mass</a></li>
<li><a class="dropdown-item" onclick="readonlyForGivenMass()" href="/Chemistry-Calculator/Mole-Calculator">Calculate Given mass</a></li>
</ul>
</div>
</form>
</div>
</div>
</div>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
<script type="text/javascript" src="../javascript/script.js"></script>
<script>
function readonlyForGivenMass() {
document.getElementById("givenMass").readOnly = true;
document.getElementById("molarMass").readOnly = false;
document.getElementById("moles").readOnly = false;
}
function readonlyForMolarMass() {
document.getElementById("givenMass").readOnly = false;
document.getElementById("molarMass").readOnly = true;
document.getElementById("moles").readOnly = false;
}
function readonlyForMoles() {
document.getElementById("givenMass").readOnly = false;
document.getElementById("molarMass").readOnly = false;
document.getElementById("moles").readOnly = true;
}
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous">
<title>Mole Calculator | Chemistry Calculator</title>
</head>
<body>
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-black">
<div class="container-fluid">
<a class="navbar-brand" href="#"><h4>
<b>Chemistry Calculator</b>
</h4></a>
<button class="navbar-toggler" type="button"
data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav text-uppercase">
<li class="nav-item"><a class="nav-link active"
aria-current="page" href="/Chemistry-Calculator/">Home</a></li>
<li class="nav-item"><a class="nav-link active"
aria-current="page" href="/Chemistry-Calculator/about">About</a></li>
</ul>
</div>
</div>
</nav>
<div class="container" style="padding-top: 5%;">
<div class="card px-4 py-5" style="width: 650px;">
<div class="card-block">
<form action="/Chemistry-Calculator/Number-Of-Moles">
<div class="mb-3">
<label for="givenMass" class="form-label">Given Mass of
Substance</label> <input type="text" class="form-control" id="givenMass"
aria-describedby="emailHelp" name="givenMass"
value="${givenMass}" style="width: 600px">
</div>
<div class="mb-3">
<label for="molarMass" class="form-label">Molar Mass</label> <input
type="text" class="form-control" id="moles" name="molarMass"
value="${molarMass}" style="width: 600px">
</div>
<div class="mb-3">
<label for="molarMass" class="form-label">Moles</label> <input
type="text" class="form-control"
id="molarMass" name="moles" value="${moles}" style="width: 600px">
</div>
<input class="btn btn-outline-success" type="submit"
value="Calculate">
<div class="btn-group">
<button type="button" class="btn btn-success dropdown-toggle"
data-bs-toggle="dropdown" aria-expanded="false">Choose what to calculate </button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" onclick="readonlyForMoles(event)" href="/Chemistry-Calculator/Mole-Calculator">Calculate Moles</a></li>
<li><a class="dropdown-item" onclick="readonlyForMolarMass(event)" href="/Chemistry-Calculator/Mole-Calculator">Calculate Molar Mass</a></li>
<li><a class="dropdown-item" onclick="readonlyForGivenMass(event)" href="/Chemistry-Calculator/Mole-Calculator">Calculate Given mass</a></li>
</ul>
</div>
</form>
</div>
</div>
</div>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
function readonlyForGivenMass(event) {
event.preventDefault()
var x = document.getElementById("moles").readOnly= false;
var x = document.getElementById("givenMass").readOnly= true;
var x = document.getElementById("molarMass").readOnly= false;
}
function readonlyForMolarMass(event) {
event.preventDefault()
var x = document.getElementById("molarMass").readOnly = true;
var x = document.getElementById("moles").readOnly= false;
var x = document.getElementById("givenMass").readOnly= false;
}
function readonlyForMoles(event) {
event.preventDefault()
var x = document.getElementById("molarMass").readOnly = false;
var x = document.getElementById("moles").readOnly = true;
var x = document.getElementById("givenMass").readOnly= false;
}
</script>
</body>
</html>
if you want means you can remove event.preventDefault in each function and
I hope this code will works for you. Thank you

Why don't my search items hide when you're not tabbed into the search bar?

I have a search bar on my website with a bunch of random pages, but the problem is that the search items aren't hidden when you're not on the search bar. Is that a function of HTML or would it require javascript. I'm really new to html, javascript, and css so details would be appreciated.
The website and code are here:
function search()
{
var input, filter, ul, li, a, i, txtValue;
input = document.getElementById("pgsearchbar").value;
filter = input.toUpperCase();
ul = document.getElementById("searchitems");
li = ul.getElementsByTagName("li");
for (i = 0; i < li.length; i++)
{
finder = li[i].getElementsByTagName("a")[0];
letter = finder.textContent || finder.innerText;
if (letter.toUpperCase().indexOf(filter) > -1)
{
li[i].style.display = "";
}
else
{
li[i].style.display = "none";
}
}
}
let counter = 0;
function increment()
{
counter++;
document.querySelector("#counter").innerHTML = counter;
}
function PlaySound(soundObj)
{
var audio = document.getElementById(soundObj);
if (audio.paused){
audio.play();
}
else{
audio.currentTime = 0;
}
}
function reset()
{
document.querySelector("#counter").innerHTML = 0;
counter = 0;
}
.pageselector
{
position:absolute;
bottom:10%;
left:45%;
}
.banner
{
background-image:url("sky.jpg");
padding:60px;
color:lightblue;
}
.banntxt
{
font-size:50px;
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
font-family:"Faster One";
}
.navbar-brand
{
font-family:"Faster One";
font-size:25px;
}
li
{
margin:3px 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link href="styles.css" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Faster One">
<title>My Webpage</title>
</head>
<body>
<div>
<div class="banner">
<h1 class="banntxt">abcdefghijklmnop</h1>
</div>
<nav class="navbar navbar-light" style="background-color: #e3f2fd;">
<span class="navbar-brand mb-0 h1">ABC</span>
<h2 style="font-size:26px;">Contact us at: abcdefgh#gmail.com | ###-####-####</h2>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul id="navbaritems" class="navbar-nav">
<li class="nav-item active">
<button type="button" class="btn btn-info disabled">Home</a>
</li>
<li class="nav-item">
<button onclick="window.location.href='#';" type="button" class="btn btn-info">About me</a>
</li>
<li class="nav-item">
<button onclick="window.location.href='#';" type="button" class="btn btn-info">Blah</a>
</li>
<li>
<form class="form-inline">
<input id="pgsearchbar" class="form-control mr-sm-2" type="search" onkeyup="search()" placeholder="Search" aria-label="Search">
<ul id="searchitems">
<li>
Homepage
</li>
<li>
About Me
</li>
<li>
Page2
</li>
<li>
Page3
</li>
<li>
Page4
</li>
</ul>
<button class="btn btn-outline-info my-2 my-sm-0" type="submit">Search</button>
</form>
</li>
</ul>
</div>
</nav>
</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.6/umd/popper.min.js"
integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
crossorigin="anonymous"></script>
<script type="text/javascript" src="functions.js"></script>
<audio src="coin.wav" autostart="false" width="0" height="0" id="coin" enablejavascript="true">
<audio src="death.wav" autostart="false" width="0" height="0" id="death" enablejavascript="true">
</body>
</html>

I added #searchitems li { display: none; } to hide search items at first.
Then using input.length === 0 we check if search input value is empty then hide all search items else show them by li[i].style.display = "list-item". I changed if/else order.
function search()
{
var input, filter, ul, li, a, i, txtValue;
input = document.getElementById("pgsearchbar").value;
filter = input.toUpperCase();
ul = document.getElementById("searchitems");
li = ul.getElementsByTagName("li");
for (i = 0; i < li.length; i++)
{
finder = li[i].getElementsByTagName("a")[0];
letter = finder.textContent || finder.innerText;
if (input.length === 0 || letter.toUpperCase().indexOf(filter) === -1)
{
li[i].style.display = "none";
}
else
{
li[i].style.display = "list-item";
}
}
}
let counter = 0;
function increment()
{
counter++;
document.querySelector("#counter").innerHTML = counter;
}
function PlaySound(soundObj)
{
var audio = document.getElementById(soundObj);
if (audio.paused){
audio.play();
}
else{
audio.currentTime = 0;
}
}
function reset()
{
document.querySelector("#counter").innerHTML = 0;
counter = 0;
}
.pageselector
{
position:absolute;
bottom:10%;
left:45%;
}
.banner
{
background-image:url("sky.jpg");
padding:60px;
color:lightblue;
}
.banntxt
{
font-size:50px;
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
font-family:"Faster One";
}
.navbar-brand
{
font-family:"Faster One";
font-size:25px;
}
li
{
margin:3px 0;
}
#searchitems li { display: none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link href="styles.css" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Faster One">
<title>My Webpage</title>
</head>
<body>
<div>
<div class="banner">
<h1 class="banntxt">abcdefghijklmnop</h1>
</div>
<nav class="navbar navbar-light" style="background-color: #e3f2fd;">
<span class="navbar-brand mb-0 h1">ABC</span>
<h2 style="font-size:26px;">Contact us at: abcdefgh#gmail.com | ###-####-####</h2>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul id="navbaritems" class="navbar-nav">
<li class="nav-item active">
<button type="button" class="btn btn-info disabled">Home</a>
</li>
<li class="nav-item">
<button onclick="window.location.href='#';" type="button" class="btn btn-info">About me</a>
</li>
<li class="nav-item">
<button onclick="window.location.href='#';" type="button" class="btn btn-info">Blah</a>
</li>
<li>
<form class="form-inline">
<input id="pgsearchbar" class="form-control mr-sm-2" type="search" onkeyup="search()" placeholder="Search" aria-label="Search">
<ul id="searchitems">
<li>
Homepage
</li>
<li>
About Me
</li>
<li>
Page2
</li>
<li>
Page3
</li>
<li>
Page4
</li>
</ul>
<button class="btn btn-outline-info my-2 my-sm-0" type="submit">Search</button>
</form>
</li>
</ul>
</div>
</nav>
</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.6/umd/popper.min.js"
integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
crossorigin="anonymous"></script>
<script type="text/javascript" src="functions.js"></script>
<audio src="coin.wav" autostart="false" width="0" height="0" id="coin" enablejavascript="true">
<audio src="death.wav" autostart="false" width="0" height="0" id="death" enablejavascript="true">
</body>
</html>

Deleting data on firebase with unique id as reference

I want to delete data on my website using a delete button. The data is displayed into a "#table_body" with a button that is created in a javascript. My idea here is that every line of data has a delete button under it. My problem is how to delete the data based on the unique id/reference id by pressing the delete button.
I have tried naming the ".child('123').remove();" instead of ".child(key).remove();" and it works. however it only deletes the data based on the 123 id. I want it to delete the data with the unique id.
Here is the Javascript code:
var rootRef = firebase.database().ref().child("User");
rootRef.on("child_added", snap => {
var name = snap.child("name").val();
var add = snap.child("address").val();
var contact = snap.child("contact").val();
$("#table_body").append("<tr><td>" + name + "</td><td>" + add + "</td><td>" + contact + "</td><td>");
$("#table_body").append('<button id="1" onClick="reply_click(this.id)">Delete</button></td></tr>');
});
function reply_click(clicked_id){
firebase.database().ref("User").child(key).remove();
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="apple-touch-icon" sizes="76x76" href="../assets/img/apple-icon.png">
<link rel="icon" type="image/png" href="../assets/img/favicon.png">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>
Happy Paws
</title>
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport' />
<!-- Fonts and icons -->
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">
<!-- CSS Files -->
<link href="../assets/css/material-dashboard.css?v=2.1.0" rel="stylesheet" />
<!-- CSS Just for demo purpose, don't include it in your project -->
<link href="../assets/demo/demo.css" rel="stylesheet" />
</head>
<div class="wrapper ">
<div class="sidebar" data-color="green" data-background-color="black" data-image="../assets/img/sidebar-2.jpg">
<!--
Tip 1: You can change the color of the sidebar using: data-color="purple | azure | green | orange | danger"
Tip 2: you can also add an image using data-image tag
-->
<div class="logo">
<a class="simple-text logo-normal">
HAPPY PAWS
</a>
</div>
<div class="sidebar-wrapper">
<ul class="nav">
<li class="nav-item active ">
<a class="nav-link" href="./dashboard.html">
<i class="material-icons">dashboard</i>
<p>Dashboard</p>
</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="./user.html">
<i class="material-icons">person</i>
<p>Account</p>
</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="./tables.html">
<i class="material-icons">content_paste</i>
<p>User List</p>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="javscript:void(0)" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">library_books</i>
<span class="notification">Pet Article</span>
<p class="d-lg-none d-md-block">
Some Actions
</p>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="./typography.html"><p style="color:green;">Articles</p></a>
<a class="dropdown-item" href="./add-article.html"><p style="color:green;">Add Article</p></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="javscript:void(0)" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">shopping_cart</i>
<span class="notification">Products</span>
<p class="d-lg-none d-md-block">
Some Actions
</p>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="./accessories.html"><p style="color:green;">Accessories</p></a>
<a class="dropdown-item" href="./clothes.html"><p style="color:green;">Clothes</p></a>
<a class="dropdown-item" href="./food.html"><p style="color:green;">Food</p></a>
<a class="dropdown-item" href="./hygiene.html"><p style="color:green;">Hygiene</p></a>
<a class="dropdown-item" href="./toys.html"><p style="color:green;">Toys</p></a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="javscript:void(0)" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">pets</i>
<span class="notification">Pet Adoption</span>
<p class="d-lg-none d-md-block">
Some Actions
</p>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="./icons.html"><p style="color:green;">Dog</p></a>
<a class="dropdown-item" href="./cat.html"><p style="color:green;">Cat</p></a>
</div>
</li>
<li class="nav-item ">
<a class="nav-link" href="./login.html">
<i class="material-icons">logout</i>
<p>logout</p>
</a>
</li>
<!-- <li class="nav-item active-pro ">
<a class="nav-link" href="./upgrade.html">
<i class="material-icons">unarchive</i>
<p>Upgrade to PRO</p>
</a>
</li> -->
</ul>
</div>
</div>
<div class="main-panel">
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-transparent navbar-absolute fixed-top " id="navigation-example">
<div class="container-fluid">
<div class="navbar-wrapper">
<a class="navbar-brand" href="javascript:void(0)">Dashboard</a>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" aria-controls="navigation-index" aria-expanded="false" aria-label="Toggle navigation" data-target="#navigation-example">
<span class="sr-only">Toggle navigation</span>
<span class="navbar-toggler-icon icon-bar"></span>
<span class="navbar-toggler-icon icon-bar"></span>
<span class="navbar-toggler-icon icon-bar"></span>
</button>
<div class="collapse navbar-collapse justify-content-end">
<form class="navbar-form">
<div class="input-group no-border">
<input type="text" id="Search1" value="" class="form-control" placeholder="Search...">
<button type="submit" id="Search2" class="btn btn-default btn-round btn-just-icon">
<i class="material-icons">search</i>
<div class="ripple-container"></div>
</button>
</div>
</form>
</div>
</nav>
<!-- End Navbar -->
<div class="content">
<div class="container-fluid">
<div class="row">
<div class="col-xl-3 col-lg-6 col-md-6 col-sm-6">
<a href="#">
<div class="card card-stats">
<div class="card-header card-header-warning card-header-icon">
<div class="card-icon">
<i class="material-icons">face</i>
</div>
<p class="card-category">New Users</p>
<h3 class="card-title">
<small></small>
</h3>
</div>
<div class="card-footer">
<div class="stats">
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-6 col-md-6 col-sm-6">
<a href="reports.html">
<div class="card card-stats">
<div class="card-header card-header-success card-header-icon">
<div class="card-icon">
<i class="material-icons">report_problem</i>
</div>
<p class="card-link" href="./dashboard.html">
<p class="card-category" >Reports</p>
<h3 class="card-title"></h3>
</div>
<div class="card-footer">
<div class="stats">
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-6 col-md-6 col-sm-6">
<a href=".">
<div class="card card-stats">
<div class="card-header card-header-danger card-header-icon">
<div class="card-icon">
<i class="material-icons">pets</i>
</div>
<p class="card-category">New Pet for Adoption</p>
<h3 class="card-title"></h3>
</div>
<div class="card-footer">
<div class="stats">
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-6 col-md-6 col-sm-6">
<a href="#">
<div class="card card-stats">
<div class="card-header card-header-info card-header-icon">
<div class="card-icon">
<i class="material-icons">add_shopping_cart</i>
</div>
<p class="card-category" href="./dashboard.html">New Product</p>
<h3 class="card-title"></h3>
</div>
<div class="card-footer">
<div class="stats">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12">
<a href="#">
<div class="card">
<div class="card-header card bg-success text-white">
<h4 class="card-title">Account List</h4>
</div>
<div class="card-body table-responsive">
<table class="table table-hover">
<thead class="text-warning">
<th>Name</th>
<th>Address</th>
<th>Contact</th>
<th>Delete</th>
</thead>
<tbody id="table_body">
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<script src="https://www.gstatic.com/firebasejs/5.5.8/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "AIzaSyBHzWLC1UCPrwI0lTsWdmTQWlles05unb0",
authDomain: "happy-paws-6f139.firebaseapp.com",
databaseURL: "https://happy-paws-6f139.firebaseio.com",
projectId: "happy-paws-6f139",
storageBucket: "happy-paws-6f139.appspot.com",
messagingSenderId: "53124089069"
};
firebase.initializeApp(config);
</script>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="accountview.js"></script>
<script src="firebase.js"></script>
<script src="login.js"></script>
<div class="fixed-plugin">
<div class="dropdown show-dropdown">
<a href="#" data-toggle="dropdown">
<i class="fa fa-cog fa-2x"> </i>
</a>
<ul class="dropdown-menu">
<li class="header-title"> Sidebar Filters</li>
<li class="adjustments-line">
<a href="javascript:void(0)" class="switch-trigger active-color">
<div class="badge-colors ml-auto mr-auto">
<span class="badge filter badge-purple active" data-color="purple"></span>
<span class="badge filter badge-azure" data-color="azure"></span>
<span class="badge filter badge-green" data-color="green"></span>
<span class="badge filter badge-warning" data-color="orange"></span>
<span class="badge filter badge-danger" data-color="danger"></span>
</div>
<div class="clearfix"></div>
</a>
</li>
<li class="header-title">Images</li>
<li>
<a class="img-holder switch-trigger" href="javascript:void(0)">
<img src="../assets/img/sidebar-1.jpg" alt="">
</a>
</li>
<li class="active">
<a class="img-holder switch-trigger" href="javascript:void(0)">
<img src="../assets/img/sidebar-2.jpg" alt="">
</a>
</li>
<li>
<a class="img-holder switch-trigger" href="javascript:void(0)">
<img src="../assets/img/sidebar-3.jpg" alt="">
</a>
</li>
<li>
<a class="img-holder switch-trigger" href="javascript:void(0)">
<img src="../assets/img/sidebar-4.jpg" alt="">
</a>
</li>
<!-- Core JS Files -->
<script src="../assets/js/core/jquery.min.js"></script>
<script src="../assets/js/core/popper.min.js"></script>
<script src="../assets/js/core/bootstrap-material-design.min.js"></script>
<script src="https://unpkg.com/default-passive-events"></script>
<script src="../assets/js/plugins/perfect-scrollbar.jquery.min.js"></script>
<!-- Place this tag in your head or just before your close body tag. -->
<script async defer src="https://buttons.github.io/buttons.js"></script>
<!-- Google Maps Plugin -->
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE"></script>
<!-- Chartist JS -->
<script src="../assets/js/plugins/chartist.min.js"></script>
<!-- Notifications Plugin -->
<script src="../assets/js/plugins/bootstrap-notify.js"></script>
<!-- Control Center for Material Dashboard: parallax effects, scripts for the example pages etc -->
<script src="../assets/js/material-dashboard.js?v=2.1.0"></script>
<!-- Material Dashboard DEMO methods, don't include it in your project! -->
<script src="../assets/demo/demo.js"></script>
<script>
$(document).ready(function() {
$().ready(function() {
$sidebar = $('.sidebar');
$sidebar_img_container = $sidebar.find('.sidebar-background');
$full_page = $('.full-page');
$sidebar_responsive = $('body > .navbar-collapse');
window_width = $(window).width();
$('.fixed-plugin a').click(function(event) {
// Alex if we click on switch, stop propagation of the event, so the dropdown will not be hide, otherwise we set the section active
if ($(this).hasClass('switch-trigger')) {
if (event.stopPropagation) {
event.stopPropagation();
} else if (window.event) {
window.event.cancelBubble = true;
}
}
});
$('.fixed-plugin .active-color span').click(function() {
$full_page_background = $('.full-page-background');
$(this).siblings().removeClass('active');
$(this).addClass('active');
var new_color = $(this).data('color');
if ($sidebar.length != 0) {
$sidebar.attr('data-color', new_color);
}
if ($full_page.length != 0) {
$full_page.attr('filter-color', new_color);
}
if ($sidebar_responsive.length != 0) {
$sidebar_responsive.attr('data-color', new_color);
}
});
$('.fixed-plugin .background-color .badge').click(function() {
$(this).siblings().removeClass('active');
$(this).addClass('active');
var new_color = $(this).data('background-color');
if ($sidebar.length != 0) {
$sidebar.attr('data-background-color', new_color);
}
});
$('.fixed-plugin .img-holder').click(function() {
$full_page_background = $('.full-page-background');
$(this).parent('li').siblings().removeClass('active');
$(this).parent('li').addClass('active');
var new_image = $(this).find("img").attr('src');
if ($sidebar_img_container.length != 0 && $('.switch-sidebar-image input:checked').length != 0) {
$sidebar_img_container.fadeOut('fast', function() {
$sidebar_img_container.css('background-image', 'url("' + new_image + '")');
$sidebar_img_container.fadeIn('fast');
});
}
if ($full_page_background.length != 0 && $('.switch-sidebar-image input:checked').length != 0) {
var new_image_full_page = $('.fixed-plugin li.active .img-holder').find('img').data('src');
$full_page_background.fadeOut('fast', function() {
$full_page_background.css('background-image', 'url("' + new_image_full_page + '")');
$full_page_background.fadeIn('fast');
});
}
if ($('.switch-sidebar-image input:checked').length == 0) {
var new_image = $('.fixed-plugin li.active .img-holder').find("img").attr('src');
var new_image_full_page = $('.fixed-plugin li.active .img-holder').find('img').data('src');
$sidebar_img_container.css('background-image', 'url("' + new_image + '")');
$full_page_background.css('background-image', 'url("' + new_image_full_page + '")');
}
if ($sidebar_responsive.length != 0) {
$sidebar_responsive.css('background-image', 'url("' + new_image + '")');
}
});
$('.switch-sidebar-image input').change(function() {
$full_page_background = $('.full-page-background');
$input = $(this);
if ($input.is(':checked')) {
if ($sidebar_img_container.length != 0) {
$sidebar_img_container.fadeIn('fast');
$sidebar.attr('data-image', '#');
}
if ($full_page_background.length != 0) {
$full_page_background.fadeIn('fast');
$full_page.attr('data-image', '#');
}
background_image = true;
} else {
if ($sidebar_img_container.length != 0) {
$sidebar.removeAttr('data-image');
$sidebar_img_container.fadeOut('fast');
}
if ($full_page_background.length != 0) {
$full_page.removeAttr('data-image', '#');
$full_page_background.fadeOut('fast');
}
background_image = false;
}
});
$('.switch-sidebar-mini input').change(function() {
$body = $('body');
$input = $(this);
if (md.misc.sidebar_mini_active == true) {
$('body').removeClass('sidebar-mini');
md.misc.sidebar_mini_active = false;
$('.sidebar .sidebar-wrapper, .main-panel').perfectScrollbar();
} else {
$('.sidebar .sidebar-wrapper, .main-panel').perfectScrollbar('destroy');
setTimeout(function() {
$('body').addClass('sidebar-mini');
md.misc.sidebar_mini_active = true;
}, 300);
}
// we simulate the window Resize so the charts will get updated in realtime.
var simulateWindowResize = setInterval(function() {
window.dispatchEvent(new Event('resize'));
}, 180);
// we stop the simulation of Window Resize after the animations are completed
setTimeout(function() {
clearInterval(simulateWindowResize);
}, 1000);
});
});
});
</script>
<script>
$(document).ready(function() {
// Javascript method's body can be found in assets/js/demos.js
md.initDashboardPageCharts();
});
</script>
</body>
</html>

To get the key, you can do the following:
rootRef.on("child_added", snap => {
var key = snap.key;
var name = snap.child("name").val();
var add = snap.child("address").val();
var contact = snap.child("contact").val();
$("#table_body").append("<tr><td>" + name + "</td><td>" + add + "</td><td>" + contact + "</td><td>");
$("#table_body").append('<button id="1" onClick="reply_click(' + key + ')">Delete</button></td></tr>');
});
function reply_click(clicked_id){
firebase.database().ref("User").child(clicked_id).remove();
}
The snap.key will be able to retrieve the unique id in the database.
From the docs:
key
The key (last part of the path) of the location of this DataSnapshot.

We Keep Coding

JavaScript is the programming language of the Web.

My audio and search features don't function as intended - javascript

Related

Adding a form in html using javascript

how to move the whole main-video-wrap div into video-list-Wrapping div?

Adding onclick function in anchor tag which is not working [closed]

Why don't my search items hide when you're not tabbed into the search bar?

Deleting data on firebase with unique id as reference

Categories

Resources