Open setting menu On click with Javascript - javascript

I have been trying to make a setting button which toggles my settings section On click, but no hope, if you can help me I would be thankful, Here is the HTML and JS.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="apping.css">
</head>
<body>
<button id="toggler" style="font-size:24px">Settings <i class="fa fa-gear"></i></button>
<section>
<h2> Dark Mode!</h2>
<label class="switch">
<input id="slider" type="checkbox">
<span class="slider round"></span>
</label>
</section>
<script src="app.js"></script>
</body>
</html>
and here is the Javascript
let slider = document.getElementById('slider');
let section = document.getElementById('section');
let toggler = document.getElementById('toggler');
toggler.addEventListener('click',function(){
section.classList.toggle("opacity");
})
and this is the class i'm trying to toggle in css, is there something i'm missing?
.opacity {
opacity: 1;
}


Was it necessary?
let slider = document.getElementById('slider');
let section = document.getElementById('section');
let toggler = document.getElementById('toggler');
toggler.addEventListener('click',function(){
section.classList.toggle("opacity");
})
#section {
opacity: 0;
}
.opacity {
opacity: 1!important;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="apping.css">
</head>
<body>
<button id="toggler" style="font-size:24px">Settings <i class="fa fa-gear"></i></button>
<section id="section">
<h2> Dark Mode!</h2>
<label class="switch">
<input id="slider" type="checkbox">
<span class="slider round"></span>
</label>
</section>
<script src="app.js"></script>
</body>
</html>


You forgot to add id="section" to your section tag, and also you need to set the initial state of the section to opacity: 0.
let slider = document.getElementById('slider');
let section = document.getElementById('section');
let toggler = document.getElementById('toggler');
toggler.addEventListener('click',function(){
section.classList.toggle("opacity");
})
#section {
opacity: 0
}
#section.opacity {
opacity: 1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="apping.css">
</head>
<body>
<button id="toggler" style="font-size:24px">Settings <i class="fa fa-gear"></i></button>
<section id="section">
<h2> Dark Mode!</h2>
<label class="switch">
<input id="slider" type="checkbox">
<span class="slider round"></span>
</label>
</section>
<script src="app.js"></script>
</body>
</html>

Related

How to copy the input text on button click?

I am looking to copy the text written in an input when the user click on a button. How can I do it ?
Here is my HTML structure :
<!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">
<title>2b2tyoung.tk</title>
<link rel="stylesheet" href="style.css">
<script src="main.js"></script>
</head>
<body>
<div class="container">
<div label>
Join server
</div>
<div class="copy-text">
<input type="text" class="text" value="2b2tyoung.tk">
<button>
<i class="fa fa-clone"></i>
</button>
</div>
</div>
</body>
</html>

Here I selected the fa-clone icon, added a listener on click, then I copied the value of the input.
document.querySelector(".fa-clone").addEventListener("click", () => {
let input = document.querySelector(".copy-text input");
navigator.clipboard.writeText(input.value);
console.log("copied "+input.value)
})
<div class="copy-text">
<input type="text" class="text" value="2b2tyoung.tk">
<button>
<i class="fa fa-clone">Clone</i>
</button>
</div>

<!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" />
<title>2b2tyoung.tk</title>
<link rel="stylesheet" href="style.css" />
<script src="main.js"></script>
</head>
<body>
<div class="container">
<div label>Join server</div>
<div class="copy-text">
<input type="text" class="text" value="2b2tyoung.tk" />
<button onclick="copyInputValue()">
<i class="fa fa-clone"></i>
</button>
</div>
</div>
</body>
</html>
<script>
function copyInputValue() {
const ipt = document.querySelector("#app input");
ipt.select();
const copyed = document.execCommand("copy");
if (copyed) {
alert("copy success!");
} else {
alert("copy failed!");
}
}
</script>

Why am i getting undefined in the console log instead of the input value?

I am trying to get the input value as my result but after clicking on the button I am getting 'undefined' as the console result. Please help to understand the reason. Sharing the HTML and js code
<!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="movie-search-engine.css">
<script src="scripts/movie-search-engine.js" defer></script>
<title>Movie Search Engine</title>
</head>
<body>
<div class="searchBox">
<input type="text" class="searchBox" placeholder="Movie Name">
<button onclick="moviesearchEngine()" class="searchBoxID" >Search</button>
</div>
<div class="movieDetails">
<h2 class="movieTitle">Movie Title</h2>
<div class="movieData">
<p class="yearofRelease">Year of Release</p>
<p class="movieTitle">Movie Title</p>
<p class="genre">Genre</p>
<p class="director">Director</p>
<p class="plot">Plot</p>
</div>
</body>
</html>
const moviesearchEngine=()=>{
let searchBox = document.querySelector('.searchBox');
console.log(searchBox.value)
}

You are using a class for multiple elements which is why undefined is shown. Among many ways, I will discuss two here, you have to either use indices with classes if using queryselector to get the correct element or use an ID to select the input element. Here I have used ID to get the input searchbox. See the following code:
const moviesearchEngine = () => {
let searchBox = document.querySelector('#searchBoxInput');
console.log(searchBox.value)
}
<!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="movie-search-engine.css">
<script src="scripts/movie-search-engine.js" defer></script>
<title>Movie Search Engine</title>
</head>
<body>
<div class="searchBox">
<input type="text" id="searchBoxInput" placeholder="Movie Name">
<button onclick="moviesearchEngine()" class="searchBoxID">Search</button>
</div>
<div class="movieDetails">
<h2 class="movieTitle">Movie Title</h2>
<div class="movieData">
<p class="yearofRelease">Year of Release</p>
<p class="movieTitle">Movie Title</p>
<p class="genre">Genre</p>
<p class="director">Director</p>
<p class="plot">Plot</p>
</div>
</body>
</html>

Your div <div class="searchBox"> also contain a class "searchBox" so it selected that.
Fixed: Add an input selector after class selector.
const moviesearchEngine=()=>{
let searchBox = document.querySelector('.searchBox input');
console.log(searchBox.value)
}
<!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="movie-search-engine.css">
<script src="scripts/movie-search-engine.js" defer></script>
<title>Movie Search Engine</title>
</head>
<body>
<div class="searchBox">
<input type="text" class="searchBox" placeholder="Movie Name">
<button onclick="moviesearchEngine()" class="searchBoxID" >Search</button>
</div>
<div class="movieDetails">
<h2 class="movieTitle">Movie Title</h2>
<div class="movieData">
<p class="yearofRelease">Year of Release</p>
<p class="movieTitle">Movie Title</p>
<p class="genre">Genre</p>
<p class="director">Director</p>
<p class="plot">Plot</p>
</div>
</body>
</html>

Javascript Input value returns undefined (To do list program)

For the past day ive been banging my head to the wall i just cant get this to work
every time i try to create a to do list it returns undefined and i cant seem to detect what went wrong with the code
Im still in the learning process so please go easy
function addToList() {
var item = document.getElementById("candidate").Value;
var text = document.createTextNode(item);
var li = document.createElement("li");
li.appendChild(text);
document.getElementById("toDoList").appendChild(li);
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/css/style.css" />
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<section>
<div class="container">
<div class="userToDoList">
<input id="candidate" class="userInput" type="text" placeholder="New List..." />
<button onclick="addToList()">Add</button>
</div>
<div class="addedLists">
<ul id="toDoList"></ul>
</div>
</div>
</section>
</body>
<script src="JS/Script.js"></script>
</html>

This must have been frustrating. You used a capital V for value.
.Value is an invalid property. You're looking for .value
function addToList() {
var item = document.getElementById("candidate").value;
var text = document.createTextNode(item);
var li = document.createElement("li");
li.appendChild(text);
document.getElementById("toDoList").appendChild(li);
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/css/style.css" />
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<section>
<div class="container">
<div class="userToDoList">
<input id="candidate" class="userInput" type="text" placeholder="New List..." />
<button onclick="addToList()">Add</button>
</div>
<div class="addedLists">
<ul id="toDoList"></ul>
</div>
</div>
</section>
</body>
<script src="JS/Script.js"></script>
</html>

How to enable a disabled anchor button when respective checkbox will be clicked

Initially both Export to CSV(2SD) and Export to CSV(3SD) should be disabled .I want to enable only Export to CSV(2SD) button when 2 Standard Deviation checkbox is clicked and similar with another button when 2 Standard Deviation checkbox is clicked it will enable only Export to CSV(3SD) anchor button.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- cdn links to apply bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" />
<!-- add icon link -->
<link rel="icon" href="https://yoyosarkari.com/wp-content/uploads/2020/07/NIMS.jpg" type="image/x-icon">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght#400;700&display=swap" rel="stylesheet">
<title>Document</title>
</head>
<body>
<div class="col-md-3">
<strong><label>Select Outlier Range :</label></strong>
<div class="form-check">
<input type="checkbox" id="2SD" name="2std" value="2 Standard Deviation" class="form-check-input"
onclick="undisableBtn1()" id="materialIndeterminate1" unchecked>
<label class="form-check-label" for="materialIndeterminate2">2 Standard Deviation</label>
</div>
<div class="form-check">
<input type="checkbox" id="3SD" name="3std" value="3 Standard Deviation" class="form-check-input"
onclick="undisableBtn2()" id="materialIndeterminate2" unchecked>
<label class="form-check-label" for="materialIndeterminate2">3 Standard Deviation</label>
</div>
<input type="hidden" name='path' value={{ path }}></input>
</div>
<div class="col-md-3">
<a href={% static '/2_Standard_Deviation.csv' %} id="button4" onclick="return false" class="btn btn-primary" download>Export to CSV(2 SD)</a>
</br></br>
<a href={% static '/3_Standard_Deviation.csv' %} id="button5" onclick="return false" class="btn btn-primary" download>Export to CSV(3 SD)</a>
</br></br>
<!--<form action='/Clear'>-->
Reset
<!--</form>-->
</div>
<script>
// function myFunction() {
// var checkBox1 = document.getElementById("2SD");
// var checkBox2 = document.getElementById("3SD");
// if (checkBox1.checked == true){
// document.getElementById("button4").disabled = false;
// console.log('button4')
// } else if (checkBox2.checked == true){
// document.getElementById("button5").disabled = false;
// console.log('button5')
// }
// }
function undisableBtn1() {
//document.getElementById("2SD").disabled = false;
$('#button4').click(function(e) {
$(this).addClass('enabled');
//do other stuff when a click happens
});
console.log('button4')
}
function undisableBtn2() {
//document.getElementById("3SD").disabled = false;
$('#button5').click(function(e) {
$(this).addClass('enabled');
//do other stuff when a click happens
});
console.log('button5')
}
</script>
</body>
</html>

You need to import jQuery library in the head section:
https://code.jquery.com/
So for example with version 3.5.1 add below script into <head>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- cdn links to apply bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" />
<!-- add icon link -->
<link rel="icon" href="https://yoyosarkari.com/wp-content/uploads/2020/07/NIMS.jpg" type="image/x-icon">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght#400;700&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<style>
.selected {
background-color: yellow;
}
td {
border: 1px solid black;
padding: 20px;
}
</style>
</head>
<body>
<!-- <input type="button" id="cont" value="continue" disabled="disabled"> -->
<a href="https://www.google.com" id="cont" value="continue" class="btn btn-primary" download>Export to CSV(2 SD)</a>
<input type="checkbox" name="check" id="check" />
<script>
$(document).ready(function () {
$('#cont').css({ pointerEvents: "none" })
});
</script>
<script>
$(document).ready(function () {
$('[id="check"]').change(function (event) {
$('#cont').css({ pointerEvents: "auto" })
});
});
</script>
</body>
</html>

How to use Bootstrap Icon Picker in Jquery

Basically, I am creating a list item that generated by jQuery script. I would like to have each list item with an icon chosen from font awesome.
My JS script to create a list and my HTML markup are as below:
<script type="text/javascript">
jQuery(document).ready(function() {
var menuID = 0;
var itemCount = 1;
$('.add-new-id').click(function() {
menuID = $('.menu-id').val();
$('.menu-id, .add-new-id').attr('disabled', 'disabled');
return false;
});
$('#new-parent').submit(function() {
var newParent = $('input.new-parent').val();
$('ol.example:last').append('<li>' + newParent + '<button class="btn btn-default" role="iconpicker"></button></li>');
itemCount++;
$('input.new-parent').val('');
return false;
});
$('body').on('click', 'button[role="iconpicker"]', function() {
$(this).iconpicker();
});
});
</script>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet"
href="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/bootstrap-3.2.0/css/bootstrap.min.css">
<link rel="stylesheet"
href="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/icon-fonts/elusive-icons-2.0.0/css/elusive-icons.min.css"/>
<link rel="stylesheet"
href="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/icon-fonts/font-awesome-4.2.0/css/font-awesome.min.css"/>
<link rel="stylesheet"
href="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/icon-fonts/ionicons-1.5.2/css/ionicons.min.css"/>
<link rel="stylesheet"
href="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/icon-fonts/map-icons-2.1.0/css/map-icons.min.css"/>
<link rel="stylesheet"
href="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/icon-fonts/material-design-1.1.1/css/material-design-iconic-font.min.css"/>
<link rel="stylesheet"
href="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/icon-fonts/octicons-2.1.2/css/octicons.min.css"/>
<link rel="stylesheet"
href="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/icon-fonts/typicons-2.0.6/css/typicons.min.css"/>
<link rel="stylesheet"
href="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/icon-fonts/weather-icons-1.2.0/css/weather-icons.min.css"/>
<link rel="stylesheet"
href="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/bootstrap-iconpicker/css/bootstrap-iconpicker.min.css"/>
<title>Menu</title>
</head>
<body>
<div class="row">
<div class="container">
<div class="col-sm-12">
<form action="" id="new-parent">
<div class="input-group col-sm-4">
<input type="text" class="form-control new-parent" placeholder="Add parent menu">
<div class="input-group-btn">
<button class="btn btn-default add-new-parent" type="submit">
<span class="glyphicon glyphicon-plus"></span>
</button>
</div>
</div>
</form>
<h4>Available Forms:</h4>
<ol class="example">
</ol>
<button class="btn btn-success" type="submit">Save</button>
</div>
</div>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/jquery-sortable-min.js"></script>
<!-- Icon picker script-->
<script type="text/javascript"
src="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/bootstrap-3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript"
src="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/bootstrap-iconpicker/js/iconset/iconset-all.min.js"></script>
<script type="text/javascript"
src="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/bootstrap-iconpicker/js/bootstrap-iconpicker.js"></script>
<!-- end script-->
</body>
</html>
For each list item icon, I would like to use Bootstrap-Iconpicker from this site. However, it does not work fine for each generated list item as you can see from screen shot and on my site.
Popup Icon Picker
By clicking on left and right arrow, or typing in text box, it does not work at all.
Please kindly test it on my demo site:
I could not find to any way to figure it out.
Please kindly help, your suggestion and solution are very much appreciate, thanks.

Categories