javascript won't appear on html

javascript won't appear on html - javascript

I have been trying to make an etch a sketch for days now. I cannot find what to try next as I am a brand new web development student. I have put console logs in and haven't found any errors in the dev tools.
I have tried breaking down other files to run only one function at a time and somehow my addEventListeners aren't working as they should be. A little nudge in the right direction would help alot.
<!DOCTYPE html>
<html>
<head>
//<link rel="stylesheet" type="text/css" href="etchASketch.css">
<style>
* {
background-color: aqua;
font-size: 16px;
}
#headers {
height: 25%;
position:relative;
}
h1 {
font-size: 2em;
font-family: cursive;
color: blue;
text-align: center;
margin: auto;
padding-bottom: 10px;
}
#instructions {
text-align: center;
font-size: 1.5em;
font-family: cursive;
margin: auto;
padding-bottom: 15px;
}
#moreInstructions {
text-align: center;
font-family: cursive;
font-size: 1.25em;
width: 60%;
margin: auto;
padding-top: 15px;
}
#colorOptions {
position: absolute;
height: 45px;
width: 125px;
color: blue;
text-align: center;
font-family: cursive;
font-size: 1.25em;
cursor: pointer;
border-radius: 20%;
left: 25px;
background-color: pink;
}
#btns {
float: right;
height: 200px;
display:flex;
flex-direction: column;
justify-content: space-between;
margin-right: 30px;
}
.radio {
height: 25px;
width: 50px;
border-radius: 15%;
margin: 15px;
padding: 10px;
display: inline-block;
float: right;
font-family: cursive;
font-size:1em;
}
#sliderContainer {
margin: auto;
height: 75px;
width: 400px;
font-family: cursive;
text-align: center;
color: blue;
background-color: turquoise;
}
#mySlider {
margin: auto;
}
.grid {
bottom: 0;
height: 60%;
width: 70%;
margin: auto;
border: 2px solid black;
background-color: white;
}
.radio :active {
background-color: grey;
}
</style>
</head>
<body>
<div id="headers">
<h1 id="heading">Etch-A-Sketch</h1>
<h3 id="instructions">Choose a color and set the slider on the size of grid you prefer</h3>
<p id="moreInstructions">Move cursor over the grid to draw your masterpiece. If you make a mistake, just hit "Erase"
then move cursor over unwanted squares. Click "Draw" to continue drawing. Click "Clear Grid" to clear grid
entirely and begin a new drawing.</p>
</div>
<select id="colorOptions">
<option value"colorChoices" selected>Colors</option>
<option value"red">Red</option>
<option value"pink">Pink</option>
<option value"blue">Blue</option>
<option value"green">Green</option>
<option value"purple">Purple</option>
<option value"black">Black</option>
</select>
<div id="btns">
<label class="radio">Draw</label>
<input type="radio" id="draw" class="radio" checked>
<label class="radio">Erase</label>
<input type="radio" id="erase" class="radio">
<label class="radio">Clear Grid</label>
<input type="radio" id="clearGrid" class="radio">
</div>
<div class="size">Size = <span class="out"> </span>
<input type="range" class="slider" id="myRange" min="1" max="64" value="16">
<div class="grid"></div>
<script>
let size = 16;
let color = 'black';
var slider = document.getElementById('myRange');
var output = document.querySelector('.out');
var clearGrid = document.getElementById('clearGrid');
let drawButton = document.getElementById('draw');
let eraseButton = document.getElementById('erase');
let select = document.getElementById('colorOptions');
let colorChoice = document.getElementById('colorOptions').value;
select.onchange = function() {
let color = this.value;
}
drawButton.onclick = function() {
if (this.checked == true && eraseButton.checked == false) color = color;
}
eraseButton.onclick = function() {
if (this.checked == true) color = 'white';
else if (this.checked == false)
color = color;
}
function hoverFunc(e) {
if (eraseButton.checked == true) {
this.style.backgroundColor = 'white';
} else if (drawButton.checked == true) {
this.style.backgroundColor = color;
}
}
slider.onchange = function() {
output.innerHTML = this.value;
size = this.value;
buildBoard(this.value);
}
function buildBoard(size) {
let grid = document.querySelector(".grid");
grid.style.gridTemplateRows = `repeat (${size}, 1fr)`;
grid.style.gridTemplateColumns = `repeat (${size}, 1fr)`;
for (let i = 0; i < size; i++) {
for (let j = 0; j < size; j++) {
let square = document.createElement('div');
square.classList.add('cell');
square.addEventListener('mouseover', hoverFunc);
grid.appendChild(square);
}
}
}
clearGrid.addEventListener('click', clearBoard);
function clearBoard() {
let cell = document.querySelectorAll('.cell');
cell.forEach(x => x.remove());
}
function hoverFunc(e) {
if (eraseButton.checked == true) {
this.style.backgroundColor = 'white';
} else if (drawButton.checked == true) {
this.style.backgroundColor = select.value;
}
}
buildBoard(size);
</script>
</body>
</html>

Problem 1:
<select id="colorOptions">
<option value"colorChoices" selected>Colors</option>
<option value"red">Red</option>
<option value"pink">Pink</option>
<option value"blue">Blue</option>
<option value"green">Green</option>
<option value"purple">Purple</option>
<option value"black">Black</option>
</select>
Solution:
<select id="colorOptions">
<option value="colorChoices" selected>Colors</option>
<option value="red">Red</option>
<option value="pink">Pink</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
<option value="purple">Purple</option>
<option value="black">Black</option>
</select>
Problem 2:
<div id="btns">
<label class="radio">Draw</label>
<input type="radio" id="draw" class="radio" checked>
<label class="radio">Erase</label>
<input type="radio" id="erase" class="radio">
<label class="radio">Clear Grid</label>
<input type="radio" id="clearGrid" class="radio">
</div>
Solution:
<div id="btns">
<label class="radio">Draw</label>
<input type="radio" name="xyz" id="draw" class="radio" checked>
<label class="radio">Erase</label>
<input type="radio" name="xyz" id="erase" class="radio">
<label class="radio">Clear Grid</label>
<input type="radio" name="xyz" id="clearGrid" class="radio">
</div>
Give name attributes to all the radio buttons and their values should be same
The grid is not having any height.
Change it using inline css.
For all the variables just after the script tag change all the let to var

Related

Assign TWO Images to Radio Button

Hi so I have this "product" page (on Fiddle) where I have multiple radio boxes in two classes .choosesize and .choosetea. I want to set up my code where if the 8oz radio button is selected then one set of pictures will appear for all the tea selections and if the 16oz radio button is selected another set of pictures will appear for the tea selections.
I have assigned the small and big images to each tea option but I do not know how to show the small pictures if the small 8oz option is selected.

While you don't have all the "combined" images, I have added a possible solution.
var size = "small"
var teatype = "green"
$('.choosetea input').on('click', function() {
teatype = $(this).attr('data-image');
console.log(size + "_" +teatype)
$('.active').removeClass('active');
$('.columnleft img[data-image = ' + size + "_" +teatype + ']').addClass('active');
$(this).addClass('active');
});
$('.choosesize input').on('click', function() {
size = $(this).attr('data-image');
console.log(size + "_" +teatype)
$('.active').removeClass('active');
$('.columnleft img[data-image = ' + size + "_" +teatype + ']').addClass('active');
$(this).addClass('active');
});
So this will comebine size and teatype, So each image will have the data-image where it should be size_teatype
$(document).ready(function() {
var size = "small"
var teatype = ""
$('.choosetea input').on('click', function() {
teatype = "_"+$(this).attr('data-image');
console.log(size +teatype)
$('.active').removeClass('active');
$('.columnleft img[data-image = ' + size +teatype + ']').addClass('active');
$(this).addClass('active');
});
$('.choosesize input').on('click', function() {
size = $(this).attr('data-image');
console.log(size +teatype)
$('.active').removeClass('active');
$('.columnleft img[data-image = ' + size +teatype + ']').addClass('active');
$(this).addClass('active');
});
//local storage color
//local storage size
// add the value of the added radio boxes in the text box
$('.radios1').change(function(e) {
var selectedValue = parseInt($(this).val());
selectedValue += parseInt($(".radios2").val());
$('#amount').val('$' + selectedValue)
});
//add to cart
});
const sizeSelector = 'input:radio[id=small]';
const colorSelector = 'input:radio[id=green]';
const cartSelector = 'button[name=cart]';
$(function() {
$(`${cartSelector}`).click(() => {
validityCheck();
});
const SMALL = 20;
const GREEN = 0;
const CARTBUTTON = 5;
function validityCheck() {
let $size = $(`${sizeSelector}`);
let $color = $(`${colorSelector}`);
let size_flag = $size.is(':checked');
let color_flag = $color.is(':checked');
$('#itemdv1A').toggle(size_flag && color_flag) && $('#itemdv2A').toggle(size_flag && color_flag) && $('#yourbutton').toggle(size_flag && color_flag);
}
});
const sizeSelector1 = 'input:radio[id=small]';
const colorSelector1 = 'input:radio[id=chamomile]';
const cartSelector1 = 'button[name=cart]';
$(function() {
$(`${cartSelector}`).click(() => {
validityCheck();
});
const CHAMOMILE = 1;
function validityCheck() {
let $size1 = $(`${sizeSelector1}`);
let $color1 = $(`${colorSelector1}`);
let size_flag1 = $size1.is(':checked');
let color_flag1 = $color1.is(':checked');
$('#itemdv1B').toggle(size_flag1 && color_flag1) && $('#itemdv2B').toggle(size_flag1 && color_flag1) && $('#yourbutton').toggle(size_flag1 && color_flag1)
};
});
const sizeSelector2 = 'input:radio[id=small]';
const colorSelector2 = 'input:radio[id=oolong]';
const cartSelector2 = 'button[name=cart]';
$(function() {
$(`${cartSelector}`).click(() => {
validityCheck();
});
const OOLONG = 2;
function validityCheck() {
let $size2 = $(`${sizeSelector2}`);
let $color2 = $(`${colorSelector2}`);
let size_flag2 = $size2.is(':checked');
let color_flag2 = $color2.is(':checked');
$('#itemdv1C').toggle(size_flag2 && color_flag2) && $('#itemdv2C').toggle(size_flag2 && color_flag2) && $('#yourbutton').toggle(size_flag2 && color_flag2);
}
});
document.querySelector('#yourbutton').onclick = function() {
document.querySelector('#itemscart').style.display = "none"
};
/* Basic Styling */
.container {
width: 1200px;
top: 300px;
left: 50px;
padding: 15px;
display: flex;
position: absolute;
}
/* Columns */
.columnleft {
width: 220%;
position: relative;
margin-left: 30px;
}
.columnright {
width: 120%;
top: 10px;
margin-left: 80px;
display: block;
}
/* Left Column */
.columnleft img {
width: 100%;
position: absolute;
opacity: 0;
transition: all 0.3s ease;
}
.columnleft img.active {
opacity: 1;
}
/* Product Description */
.product-description {
border-bottom: 1px solid #E1E8EE;
margin-bottom: 20px;
}
/* Product Color */
.tea-type {
margin-bottom: 30px;
}
.choosetea div {
display: block;
margin-top: 10px;
}
.label {
width: 150px;
float: left;
text-align: left;
padding-right: 9px;
}
.choosetea input {
display: none;
}
.choosetea input+label span {
display: inline-block;
width: 40px;
height: 40px;
margin: -1px 4px 0 0;
vertical-align: middle;
cursor: pointer;
border-radius: 50%;
}
.choosetea input+label span {
border: 4px solid RGB(94, 94, 76)
}
.choosetea input#green+label span {
background-color: #90978b;
}
.choosetea input#chamomile+label span {
background-color: #ffd4a1;
}
.choosetea input#oolong+label span {
background-color: #948e9e;
}
.choosetea input:checked+label span {
background-image: url(check-icn.svg);
background-repeat: no-repeat;
background-position: center;
}
/* SIZE */
.tea-type {
margin-bottom: 30px;
}
.choosesize div {
display: block;
margin-top: 10px;
}
.label {
width: 100px;
float: left;
text-align: left;
padding-right: 9px;
}
.choosesize input {
display: none;
}
.choosesize input+label span {
display: inline-block;
width: 40px;
height: 40px;
margin: -1px 4px 0 0;
vertical-align: middle;
cursor: pointer;
border-radius: 50%;
}
.choosesize input+label span {
border: 4px solid RGB(94, 94, 76)
}
.choosesize input#small+label span {
background-color: #252525;
}
.choosesize input#big+label span {
background-color: #1d1d1d;
}
.choosesize input:checked+label span {
background-image: url(https://noychat.github.io/Folia-Website/check-icn.svg);
background-repeat: no-repeat;
background-position: center;
}
/* Product Price */
.product-price {
margin-top: 40px;
display: flex;
align-items: center;
}
.product-price span {
font-size: 26px;
font-weight: 300;
color: #43474D;
margin-right: 20px;
}
.cart-btn {
display: inline-block;
background-color: RGB(94, 94, 76);
border-radius: 6px;
font-size: 16px;
color: #FFFFFF;
text-decoration: none;
padding: 12px 30px;
transition: all .5s;
}
.cart-btn:hover {
background-color: black;
}
.cart-btn2 {
background-color: RGB(94, 94, 76);
border-radius: 6px;
font-size: 16px;
color: #FFFFFF;
text-decoration: none;
padding: 12px 30px;
transition: all .5s;
width: 20px;
position: absolute;
}
#amount {
margin-right: 10px;
display: inline-block;
border-radius: 2px solid RGB(94, 94, 76);
border-radius: 6px;
font-size: 20px;
color: RGB(94, 94, 76);
width: 55px;
height: 40px;
padding-left: 10px;
transition: all .5s;
}
#shoppingcart {
width: 360px;
height: 300px;
/* border: 1px solid red; */
}
.item {
margin-right: 10px;
border-radius: 2px solid RGB(94, 94, 76);
border-radius: 6px;
font-size: 20px;
color: RGB(94, 94, 76);
width: 200px;
height: 30px;
padding-left: 10px;
transition: all .5s;
float: left;
}
.item1 {
margin-right: 10px;
border-radius: 2px solid RGB(94, 94, 76);
border-radius: 6px;
font-size: 20px;
color: RGB(94, 94, 76);
width: 55px;
height: 30px;
padding-left: 10px;
transition: all .5s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="header"></div>
<!--close all header portion-->
<div class="container">
<!-- Left Column---Tea Images -->
<div class="columnleft">
<img data-image="oolong" src="https://noychat.github.io/Folia-Website/oolongbig.png" alt=" Big Oolong Can">
<img data-image="chamomile" src="https://noychat.github.io/Folia-Website/chamomilebig.png" alt="Big Chamomile Can">
<img data-image="green" class="active" src="https://noychat.github.io/Folia-Website/greenteabig.png" alt="Big Green Tea Can">
<img data-image="small" class="active" src="https://noychat.github.io/Folia-Website/foliasmall.png" alt="Small Example Can">
<img data-image="big" src="https://noychat.github.io/Folia-Website/foliabig.png" alt="Big Example Can">
<img data-image="small_chamomile" src="https://noychat.github.io/Folia-Website/chamomilesmall.png" alt="Small Chamomile Can">
<img data-image="small_oolong" src="https://noychat.github.io/Folia-Website/oolongsmall.png" alt="Small Oolong Can">
<img data-image="small_green" src="https://noychat.github.io/Folia-Website/greenteasmall.png" alt="Small Green Tea Can">
</div>
<!-- Right Column -->
<div class="columnright">
<!-- Product Description -->
<div class="product-description">
<span>Folia Tea Collection</span>
<h1>Signature Teas</h1>
<p>We source our tea leaves from around the world. Try our many selections of teas and you will taste the difference.</p>
</div>
<!-- Product Configuration -->
<div class="product-configuration">
<!-- Tea Size -->
<div class="tea-type">
<h3>Size</h3>
<div class="choosesize">
<div>
<input data-image="small" type="radio" id="small" name="size" value="20" class="radios1">
<label for="small"><span></span></label>
<div class="label">8 oz</div>
</div>
<div>
<input data-image="big" type="radio" id="big" name="size" value="40" class="radios1">
<label for="big"><span></span></label>
<div class="label">16 oz</div>
</div>
</div>
<!--CLOSE TEA Size-->
<!-- Tea Type -->
<div class="tea-type">
<h3>Tea Type</h3>
<div class="choosetea">
<div>
<input data-image="green" data-image1="small_green" type="radio" id="green" name="color" value="0" class="radios2">
<label for="green"><span></span></label>
<div class="label">Green Tea</div>
</div>
<div>
<input data-image="chamomile" data-image1="small_chamomile" type="radio" id="chamomile" name="color" class="radios2" value="1">
<label for="chamomile"><span></span></label>
<div class="label">Chamomile Tea</div>
</div>
<div>
<input data-image="oolong" data-image1="small_oolong" type="radio" id="oolong" name="color" class="radios2" value="2">
<label for="oolong"><span></span></label>
<div class="label">Oolong Tea</div>
</div>
</div>
</div>
<!--CLOSE TEA TYPE-->
<h3>Product Pricing</h3>
<div class="product-price">
<input type="text" name="amount" id="amount">
<button type="button" class="cart-btn" id="cartbutton" name="cart" value="5">Add To Cart!</button>
</div>
</div>
</div>
<!--close CONTAINER-->
<div id="shoppingcart">
<h3>Shopping Cart</h3>
<h5>Item and Price</h5>
<div id="itemscart">
<div id="itemdv1A" style="display: none"> <input type="text" name="amount" class="item" value="8oz Green Tea"></div>
<div id="itemdv2A" style="display: none"> <input type="text" name="amount" class="item1" value="$20"></div>
<div id="itemdv1B" style="display: none"> <input type="text" name="amount" class="item" value="8oz Chamomile Tea"></div>
<div id="itemdv2B" style="display: none"> <input type="text" name="amount" class="item1" value="$20"></div>
<div id="itemdv1C" style="display: none"> <input type="text" name="amount" class="item" value="8oz Oolong Tea"></div>
<div id="itemdv2C" style="display: none"> <input type="text" name="amount" class="item1" value="$20"></div>
<button style="display: none" type="button" class="cart-btn2" id="yourbutton" name="remove" value="10">x</button>
</div>
</div>

How to select checkboxes from the dropdown? [duplicate]

var expanded = false;
function showCheckboxes() {
var checkboxes = document.getElementById("checkboxes");
if (!expanded) {
checkboxes.style.display = "block";
expanded = true;
} else {
checkboxes.style.display = "none";
expanded = false;
}
}
.gradesub-filter{
width: 299px;
height: 335px;
margin: 30px 0px 0px 0px;
background-color: #ffffff;
}
.form-filter-shade{
padding: 16px 0px 9px 20px;
font-weight: 600;
font-size: 16px;
border-bottom: 2px solid #F0F0F0;
}
.multiselect {
width: 200px;
}
.selectBox {
position: relative;
}
.selectBox select {
width: 100%;
font-weight: bold;
}
.overSelect {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
#checkboxes {
display: none;
border: 1px #dadada solid;
}
#checkboxes label {
display: block;
}
#checkboxes label:hover {
background-color: #1e90ff;
}
<div class="gradesub-filter">
<div class="form-filter-shade">Gradecheck</div>
<div class="multiselect">
<div class="selectBox" onclick="showCheckboxes()">
<select>
<option>Select an option</option>
</select>
<div class="overSelect"></div>
</div>
<div id="checkboxes">
<label for="one">
<input type="checkbox" id="one" />First checkbox</label>
<label for="two">
<input type="checkbox" id="two" />Second checkbox</label>
<label for="three">
<input type="checkbox" id="three" />Third checkbox</label>
</div>
</div>
</div>
I am trying to do "Drop-down with multi select" with checkboxes as shown in the picture below. Now the issue with the code is unable to select the list from the dropdown.
I am thinking that the issue is in js code, where it is not fetching values during onclick, Can any one please suggest me to solve the issue

I think you are looking for nested Checkbox, Provided Image also suggest the same.
Here is the code snippet, simply added <ul> and <li> tags for checkboxes alignment and used some JavaScript query selectors for checkbox functioning.
var subOptions = document.querySelectorAll('input.sub');
var checkAll = document.getElementById("one");
for(var i = 0; i < subOptions.length; i++ ){
subOptions[i].onclick = function(){
var checkedCount = document.querySelectorAll('input.sub:checked').length;
checkAll.checked = checkedCount > 0;
checkAll.indeterminate = checkedCount > 0 && checkedCount < subOptions.length;
}
}
checkAll.onclick = function() {
for(var i=0; i<subOptions.length; i++) {
subOptions[i].checked = this.checked;
}
}
var expanded = false;
function showCheckboxes() {
var checkboxes = document.getElementById("checkboxes");
if (!expanded) {
checkboxes.style.display = "block";
expanded = true;
} else {
checkboxes.style.display = "none";
expanded = false;
}
}
.gradesub-filter{
width: 299px;
height: 335px;
margin: 30px 0px 0px 0px;
background-color: #ffffff;
}
.form-filter-shade{
padding: 16px 0px 9px 20px;
font-weight: 600;
font-size: 16px;
border-bottom: 2px solid #F0F0F0;
}
.multiselect {
width: 200px;
}
.selectBox {
position: relative;
}
.selectBox select {
width: 100%;
font-weight: bold;
}
.overSelect {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
#checkboxes {
display: none;
border: 1px #dadada solid;
}
#checkboxes label {
display: block;
}
#checkboxes label:hover {
background-color: #1e90ff;
}
ul{
margin-left: -25px;
}
li{
list-style: none;
}
<div class="gradesub-filter">
<div class="form-filter-shade">Gradecheck</div>
<div class="multiselect">
<div class="selectBox" onclick="showCheckboxes()">
<select>
<option>Select an option</option>
</select>
<div class="overSelect"></div>
</div>
<div id="checkboxes">
<ul>
<li>
<label for="one"><input type="checkbox" id="one" />First checkbox</label>
<ul>
<li>
<label for="sub-one"><input class='sub' type="checkbox" id="sub-one" />Sub One checkbox</label>
</li>
<li>
<label for="sub-two"><input class='sub' type="checkbox" id="sub-two" />Sub Two checkbox</label>
</li>
<li>
<label for="sub-three"><input class='sub' type="checkbox" id="sub-three" />Sub Three checkbox</label>
</li>
</ul>
</li>
<li>
<label for="two"><input type="checkbox" id="two" />Second checkbox</label>
</li>
<li>
<label for="three"><input type="checkbox" id="three" />Third checkbox</label>
</li>
</ul>
</div>
</div>
</div>
Since you clearly not mentioned in the question, I thought it would be you looking for. If any help needed, Mention in the comment.

Error when trying to work on drop down with multi select?

var expanded = false;
function showCheckboxes() {
var checkboxes = document.getElementById("checkboxes");
if (!expanded) {
checkboxes.style.display = "block";
expanded = true;
} else {
checkboxes.style.display = "none";
expanded = false;
}
}
.gradesub-filter{
width: 299px;
height: 335px;
margin: 30px 0px 0px 0px;
background-color: #ffffff;
}
.form-filter-shade{
padding: 16px 0px 9px 20px;
font-weight: 600;
font-size: 16px;
border-bottom: 2px solid #F0F0F0;
}
.multiselect {
width: 200px;
}
.selectBox {
position: relative;
}
.selectBox select {
width: 100%;
font-weight: bold;
}
.overSelect {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
#checkboxes {
display: none;
border: 1px #dadada solid;
}
#checkboxes label {
display: block;
}
#checkboxes label:hover {
background-color: #1e90ff;
}
<div class="gradesub-filter">
<div class="form-filter-shade">Gradecheck</div>
<div class="multiselect">
<div class="selectBox" onclick="showCheckboxes()">
<select>
<option>Select an option</option>
</select>
<div class="overSelect"></div>
</div>
<div id="checkboxes">
<label for="one">
<input type="checkbox" id="one" />First checkbox</label>
<label for="two">
<input type="checkbox" id="two" />Second checkbox</label>
<label for="three">
<input type="checkbox" id="three" />Third checkbox</label>
</div>
</div>
</div>
I am trying to do "Drop-down with multi select" with checkboxes as shown in the picture below. Now the issue with the code is unable to select the list from the dropdown.
I am thinking that the issue is in js code, where it is not fetching values during onclick, Can any one please suggest me to solve the issue

I think you are looking for nested Checkbox, Provided Image also suggest the same.
Here is the code snippet, simply added <ul> and <li> tags for checkboxes alignment and used some JavaScript query selectors for checkbox functioning.
var subOptions = document.querySelectorAll('input.sub');
var checkAll = document.getElementById("one");
for(var i = 0; i < subOptions.length; i++ ){
subOptions[i].onclick = function(){
var checkedCount = document.querySelectorAll('input.sub:checked').length;
checkAll.checked = checkedCount > 0;
checkAll.indeterminate = checkedCount > 0 && checkedCount < subOptions.length;
}
}
checkAll.onclick = function() {
for(var i=0; i<subOptions.length; i++) {
subOptions[i].checked = this.checked;
}
}
var expanded = false;
function showCheckboxes() {
var checkboxes = document.getElementById("checkboxes");
if (!expanded) {
checkboxes.style.display = "block";
expanded = true;
} else {
checkboxes.style.display = "none";
expanded = false;
}
}
.gradesub-filter{
width: 299px;
height: 335px;
margin: 30px 0px 0px 0px;
background-color: #ffffff;
}
.form-filter-shade{
padding: 16px 0px 9px 20px;
font-weight: 600;
font-size: 16px;
border-bottom: 2px solid #F0F0F0;
}
.multiselect {
width: 200px;
}
.selectBox {
position: relative;
}
.selectBox select {
width: 100%;
font-weight: bold;
}
.overSelect {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
#checkboxes {
display: none;
border: 1px #dadada solid;
}
#checkboxes label {
display: block;
}
#checkboxes label:hover {
background-color: #1e90ff;
}
ul{
margin-left: -25px;
}
li{
list-style: none;
}
<div class="gradesub-filter">
<div class="form-filter-shade">Gradecheck</div>
<div class="multiselect">
<div class="selectBox" onclick="showCheckboxes()">
<select>
<option>Select an option</option>
</select>
<div class="overSelect"></div>
</div>
<div id="checkboxes">
<ul>
<li>
<label for="one"><input type="checkbox" id="one" />First checkbox</label>
<ul>
<li>
<label for="sub-one"><input class='sub' type="checkbox" id="sub-one" />Sub One checkbox</label>
</li>
<li>
<label for="sub-two"><input class='sub' type="checkbox" id="sub-two" />Sub Two checkbox</label>
</li>
<li>
<label for="sub-three"><input class='sub' type="checkbox" id="sub-three" />Sub Three checkbox</label>
</li>
</ul>
</li>
<li>
<label for="two"><input type="checkbox" id="two" />Second checkbox</label>
</li>
<li>
<label for="three"><input type="checkbox" id="three" />Third checkbox</label>
</li>
</ul>
</div>
</div>
</div>
Since you clearly not mentioned in the question, I thought it would be you looking for. If any help needed, Mention in the comment.

HTML/CSS Can't get form and buttons to work properly [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 7 years ago.
Improve this question
For a school assignment I have to create a "Doughnut/Coffee Shop", in which I used HTML and CSS, but I can't seem to get my "Calculate Totals" and "Reset Form" buttons for my form to work.
Sorry for formatting but here is my HTML:
http://pastebin.com/raw.php?i=xJ8SkqQ4
And my CSS:
http://pastebin.com/raw.php?i=zZbpt61Y
If anyone could find my error(s) I'd greatly appreciate it.
Edit: Such a stupid mistake, I forgot my id on my select dropdown bar. Thank you again Austin Greco!

You were just missing the id on the doughnut select:
<select id="DoughnutChoiceField">
If you use the chrome/ff debugger, you can debug and see the element is null, which means document.getElementById failed to find the id.
function ResetForm()
{
document.getElementById("OrderForm").reset();
}
function ValidateNumber(value)
{//We need to ensure that what you entered is a valid number
if (isNaN(value))
alert("What you entered is not a number. You entered a " + value +".")
}
function PlaceOrder()
{
const TAXRATE = 0.087;
// Coffee blend constant prices
const HOUSEBLENDPRICE = 8.00;
const KENYAPRICE = 9.50;
const BOURBONPRICE = 12.00;
const NOBLENDPRICE = 0.00;
// Coffee size constant prices
const SMALLSIZEPRICE = 0.50;
const MEDIUMSIZEPRICE = 0.75;
const LARGESIZEPRICE = 1.00;
const NOSIZEPRICE = 0.00;
// Doughnut type constant prices
const GLAZEDDOUGHNUTPRICE = 1.00;
const CHOCOLATEDOUGHNUTPRICE = 1.50;
const MAPLEDOUGHNUTPRICE = 1.50;
const NOTYPEPRICE = 0.00;
// Coffee Amount
var NumberOfBags = parseInt(document.getElementById("NoBagsField").value);
if (isNaN(NumberOfBags))
{// if no entry, then set it to zero in the form
NumberOfBags = 0;
document.getElementById("NoBagsField").value = 0;
}
// Coffee Blend
var BeanChoice = document.getElementById("CoffeeBlendField");
var Blend = BeanChoice.options[BeanChoice.selectedIndex].value;
if (Blend == "HouseBlend")
{BeanPrice = HOUSEBLENDPRICE;}
if (Blend == "KenianBlend")
{BeanPrice = KENYAPRICE;}
if (Blend == "BourbonBlend")
{BeanPrice = BOURBONPRICE;}
if (Blend == "NoBlend")
{BeanPrice = NOBLENDPRICE;}
// Price for Coffee Size
var SizeChoice = document.getElementById("SizeChoiceField");
var Size = SizeChoice.options[SizeChoice.selectedIndex].value;
if (Size == "SmallSize")
{SizePrice = SMALLSIZEPRICE;}
if (Size == "MediumSize")
{SizePrice = MEDIUMSIZEPRICE;}
if (Size == "LargeSize")
{SizePrice = LARGESIZEPRICE;}
if (Size == "NoSize")
{SizePrice = NOSIZEPRICE;}
// Type of Doughnut
var DoughnutChoice = document.getElementById("DoughnutChoiceField");
var Doughnut = DoughnutChoice.options[DoughnutChoice.selectedIndex].value;
if (Doughnut == "Glazed")
{DoughnutPrice = GLAZEDDOUGHNUTPRICE;}
if (Doughnut == "Chocolate")
{DoughnutPrice = CHOCOLATEDOUGHNUTPRICE;}
if (Doughnut == "Maple")
{DoughnutPrice = MAPLEDOUGHNUTPRICE;}
if (Doughnut == "NoDoughnut")
{DoughnutPrice = NOTYPEPRICE;}
// Doughnut Amount
var NumberOfDoughnuts = parseInt(document.getElementById("DoughnutAmountField").value);
if (isNaN(NumberOfDoughnuts))
{// if no entry, then set it to zero in the form
NumberOfDoughnuts = 0;
document.getElementById("DoughnutAmountField").value = 0;
}
// Pricing
var SubTotal = (((BeanPrice+SizePrice)*NumberOfBags) + ((DoughnutPrice)*NumberOfDoughnuts));
var SalesTax = SubTotal * TAXRATE;
var Total = SubTotal + SalesTax;
document.getElementById("SubTotalField").value = "$" + SubTotal.toFixed(2);
document.getElementById("SalesTaxField").value = "$" + SalesTax.toFixed(2);
document.getElementById("TotalField").value = "$" + Total.toFixed(2);
}
.body
{
}
.header
{
font-size: 25px;
top:10px;
left:100px;
width:900px;
height:150px;
border-style: solid;
border-color: #9A0E2A;
border-width: 5px;
display: table;
color: yellow;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
.header h1
{
color: #AE5AAB;
text-align: center;
display: table-cell;
vertical-align: middle;
}
.flipimage
{
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
.MainBody
{
width: 800px;
padding: 0px;
}
.left
{
width: 250px;
height: 600px;
margin: 0px;
padding: 0px;
border-color: #9A0E2A;
border-style: solid;
border-width: 5px;
float: left;
text-align: center;
position: absolute;
color: yellow;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
.left img
{
position: absolute;
left: 0;
bottom: 0;
}
.left h1
{
color: DarkCyan;
text-align: left;
vertical-align: top;
font-size: 20px;
margin-top: 50px;
margin-left: 15px;
}
.left h2
{
color: DarkCyan;
text-align: left;
vertical-align: top;
font-size: 20px;
margin-left: 15px;
}
.left h3
{
color: White;
text-align: left;
vertical-align: top;
font-size: 15px;
margin-left: 15px;
}
.center
{
position: absolute;
width: 650px;
border-style: solid;
border-color: #9A0E2A;
border-width: 5px;
margin-left: 250px;
padding: 0px;
height: 600px;
color: yellow;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
.center h1
{
color: RoyalBlue;
text-align: center;
vertical-align: top;
line-height: 100px;
}
.center p
{
color: RoyalBlue;
text-indent:50px;
}
<div class="MainBody">
</div>
<div class="header">
<img src="doughnut3.png" align="left" width="300px" height="150px">
<h1>Doughnut Shop</h1>
<img src="doughnut3.png" align="right" class="flipimage" width="300px" height="150px">
</div>
<div class="left">
<h1 valign="top" align="left">Shop Address:</h1>
<h3 valign="top" align="left">12345 E. Main Street</h3>
<h2 valign="top" align="left">Phone:</h2>
<h3 valign="top" align="left">(509) 123-4567</h3>
<h2 valign="top" align="left">Email:</h2>
<h3 valign="top" align="left">doughnutshop#hotmail.com</h3>
<hr>
<img valign="bottom" src="doughnut.png" width="250px" height="175px">
</div>
<div class="center">
<h1>Order:</h1>
<p><b>Customer Name:</b>
<input type="text" name="state" value=""><br>
</p>
<p><b>Order Date:</b>
<input type="date" name="date">
</p>
<hr>
<form id="OrderForm">
<p><b>Coffee Blend</b>
<select id="CoffeeBlendField">
<option value="NoBlend" disabled selected style='display:none;'></option>
<option value="HouseBlend">House Blend</option>
<option value="KenianBlend">Kenian Blend</option>
<option value="BourbonBlend">Bourbon Blend</option>
</select>
</p>
<p><b>Coffee Size:</b>
<select id="SizeChoiceField">
<option value="NoSize" disabled selected style='display:none;'></option>
<option value="SmallSize">Small</option>
<option value="MediumSize">Medium</option>
<option value="LargeSize">Large</option>
</select>
</p>
<p><b>Quantity (1-20):</b>
<input type="text"
id="NoBagsField"
placeholder="#"
value=""
size = "1"
onblur="ValidateNumber(this.value)">
</p>
<hr>
<p><b>Doughnut Type:</b>
<select id="DoughnutChoiceField">
<option value="NoDoughnut" disabled selected style='display:none;'></option>
<option value="Glazed">Glazed</option>
<option value="Chocolate">Chocolate</option>
<option value="Maple">Maple</option>
</select>
</p>
<p><b>Quantity (1-20):</b>
<input type="text"
id="DoughnutAmountField"
placeholder="#"
value=""
size = "1"
onblur="ValidateNumber(this.value)">
</p>
<hr>
<p><b>SubTotal:</b>
<input type="text"
id="SubTotalField"
value="">
</p>
<p><b>SalesTax:</b>
<input type="text"
id="SalesTaxField"
value="">
</p>
<p><b>Total Sale:</b>
<input type="text"
id="TotalField"
value="">
</p>
</form>
<button onclick="PlaceOrder()">Calculate Totals</button>
<button onclick="ResetForm()">Reset</button>
</div>

How to create checkbox inside dropdown?

I want to create a multiple selection dropbox list. Actually I have to select more than one option using a dropdown menu. When I simply do this as shown bellow:
<select>
<option><input type="checkbox"></option>
</select>
Then checkbox is showing in front of dropdown field. But I want to create it for each option not for as a whole so that I can select more than option. Is there any way to do this?

Here is a simple dropdown checklist:
var checkList = document.getElementById('list1');
checkList.getElementsByClassName('anchor')[0].onclick = function(evt) {
if (checkList.classList.contains('visible'))
checkList.classList.remove('visible');
else
checkList.classList.add('visible');
}
.dropdown-check-list {
display: inline-block;
}
.dropdown-check-list .anchor {
position: relative;
cursor: pointer;
display: inline-block;
padding: 5px 50px 5px 10px;
border: 1px solid #ccc;
}
.dropdown-check-list .anchor:after {
position: absolute;
content: "";
border-left: 2px solid black;
border-top: 2px solid black;
padding: 5px;
right: 10px;
top: 20%;
-moz-transform: rotate(-135deg);
-ms-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.dropdown-check-list .anchor:active:after {
right: 8px;
top: 21%;
}
.dropdown-check-list ul.items {
padding: 2px;
display: none;
margin: 0;
border: 1px solid #ccc;
border-top: none;
}
.dropdown-check-list ul.items li {
list-style: none;
}
.dropdown-check-list.visible .anchor {
color: #0094ff;
}
.dropdown-check-list.visible .items {
display: block;
}
<div id="list1" class="dropdown-check-list" tabindex="100">
<span class="anchor">Select Fruits</span>
<ul class="items">
<li><input type="checkbox" />Apple </li>
<li><input type="checkbox" />Orange</li>
<li><input type="checkbox" />Grapes </li>
<li><input type="checkbox" />Berry </li>
<li><input type="checkbox" />Mango </li>
<li><input type="checkbox" />Banana </li>
<li><input type="checkbox" />Tomato</li>
</ul>
</div>

This can't be done in just HTML (with form elements into option elements).
Or you can just use a standard select multiple field.
<select multiple>
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>

var expanded = false;
function showCheckboxes() {
var checkboxes = document.getElementById("checkboxes");
if (!expanded) {
checkboxes.style.display = "block";
expanded = true;
} else {
checkboxes.style.display = "none";
expanded = false;
}
}
.multiselect {
width: 200px;
}
.selectBox {
position: relative;
}
.selectBox select {
width: 100%;
font-weight: bold;
}
.overSelect {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
#checkboxes {
display: none;
border: 1px #dadada solid;
}
#checkboxes label {
display: block;
}
#checkboxes label:hover {
background-color: #1e90ff;
}
<form>
<div class="multiselect">
<div class="selectBox" onclick="showCheckboxes()">
<select>
<option>Select an option</option>
</select>
<div class="overSelect"></div>
</div>
<div id="checkboxes">
<label for="one">
<input type="checkbox" id="one" />First checkbox</label>
<label for="two">
<input type="checkbox" id="two" />Second checkbox</label>
<label for="three">
<input type="checkbox" id="three" />Third checkbox</label>
</div>
</div>
</form>

I have to say in advance that I was greatly inspired by the answer of Naveen so I created my own solution based on the answer.
Following 3 functions are the basis of our multiselect:
initiazation function - detects when user clicks away in order to close the dropdown
function that detects when user clicks on dropdown to uncollapse it
function that detects checkbox click events to update the label
few improvements include:
design as in bootstrap 5
collapse when clicking away
updating the label with list of values
added Y-axis overflow with scrollbar
also I tried to stick to native JS (no jQuery) and to use as much of a native Bootstrap 5 styling as possible
here is the video:
I had no intentions to make a ready to use solution that would suit every persons' needs so please adjust it to your liking. I am personally looking forward to adding a search feature.
fiddle:
window.onload = (event) => {
initMultiselect();
};
function initMultiselect() {
checkboxStatusChange();
document.addEventListener("click", function(evt) {
var flyoutElement = document.getElementById('myMultiselect'),
targetElement = evt.target; // clicked element
do {
if (targetElement == flyoutElement) {
// This is a click inside. Do nothing, just return.
//console.log('click inside');
return;
}
// Go up the DOM
targetElement = targetElement.parentNode;
} while (targetElement);
// This is a click outside.
toggleCheckboxArea(true);
//console.log('click outside');
});
}
function checkboxStatusChange() {
var multiselect = document.getElementById("mySelectLabel");
var multiselectOption = multiselect.getElementsByTagName('option')[0];
var values = [];
var checkboxes = document.getElementById("mySelectOptions");
var checkedCheckboxes = checkboxes.querySelectorAll('input[type=checkbox]:checked');
for (const item of checkedCheckboxes) {
var checkboxValue = item.getAttribute('value');
values.push(checkboxValue);
}
var dropdownValue = "Nothing is selected";
if (values.length > 0) {
dropdownValue = values.join(', ');
}
multiselectOption.innerText = dropdownValue;
}
function toggleCheckboxArea(onlyHide = false) {
var checkboxes = document.getElementById("mySelectOptions");
var displayValue = checkboxes.style.display;
if (displayValue != "block") {
if (onlyHide == false) {
checkboxes.style.display = "block";
}
} else {
checkboxes.style.display = "none";
}
}
.multiselect {
width: 100%;
}
.selectBox {
position: relative;
}
.selectBox select {
width: 100%;
}
.overSelect {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
#mySelectOptions {
display: none;
border: 0.5px #7c7c7c solid;
background-color: #ffffff;
max-height: 150px;
overflow-y: scroll;
}
#mySelectOptions label {
display: block;
font-weight: normal;
display: block;
white-space: nowrap;
min-height: 1.2em;
background-color: #ffffff00;
padding: 0 2.25rem 0 .75rem;
/* padding: .375rem 2.25rem .375rem .75rem; */
}
#mySelectOptions label:hover {
background-color: #1e90ff;
}
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="form-group col-sm-8">
<label for="dur">BS original select</label>
<select id="dur" class="form-select">
<option value="12" selected>One Year</option>
<option value="24">Two Year</option>
<option value="36">Three Year</option>
<option value="48">Four year</option>
<option value="60">Five Year</option>
</select>
</div>
<div class="form-group col-sm-8">
<label for="myMultiselect">BS custom multiselect</label>
<div id="myMultiselect" class="multiselect">
<div id="mySelectLabel" class="selectBox" onclick="toggleCheckboxArea()">
<select class="form-select">
<option>somevalue</option>
</select>
<div class="overSelect"></div>
</div>
<div id="mySelectOptions">
<label for="one"><input type="checkbox" id="one" onchange="checkboxStatusChange()" value="one" /> First checkbox</label>
<label for="two"><input type="checkbox" id="two" onchange="checkboxStatusChange()" value="two" /> Second checkbox</label>
<label for="three"><input type="checkbox" id="three" onchange="checkboxStatusChange()" value="three" /> Third checkbox</label>
<label for="four"><input type="checkbox" id="four" onchange="checkboxStatusChange()" value="four" /> Third checkbox</label>
<label for="five"><input type="checkbox" id="five" onchange="checkboxStatusChange()" value="five" /> First checkbox</label>
<label for="six"><input type="checkbox" id="six" onchange="checkboxStatusChange()" value="six" /> Second checkbox</label>
<label for="seven"><input type="checkbox" id="seven" onchange="checkboxStatusChange()" value="seven" /> Third checkbox</label>
<label for="eight"><input type="checkbox" id="eight" onchange="checkboxStatusChange()" value="eight" /> First checkbox</label>
<label for="nine"><input type="checkbox" id="nine" onchange="checkboxStatusChange()" value="nine" /> Second checkbox</label>
<label for="ten"><input type="checkbox" id="ten" onchange="checkboxStatusChange()" value="ten" /> Third checkbox</label>
</div>
</div>
</div>
</div>

You can always use multiple or multiple = "true" option with a select tag, but there is one jquery plugin which makes it more beautiful. It is called chosen and can be found here.
This fiddle-example might help you to get started
Thank you.

Very simple code with Bootstrap and JQuery without any additional javascript code :
HTML :
.dropdown-menu label {
display: block;
}
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<form class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<label class="dropdown-item"><input type="checkbox" name="" value="one">First checkbox</label>
<label class="dropdown-item"><input type="checkbox" name="" value="two">Second checkbox</label>
<label class="dropdown-item"><input type="checkbox" name="" value="three">Third checkbox</label>
</form>
</div>
https://codepen.io/funkycram/pen/joVYBv

Multiple drop downs with checkbox's and jQuery.
jQuery(function($) {
var checkList = $('.dropdown-check-list');
checkList.on('click', 'span.anchor', function(event) {
var element = $(this).parent();
if (element.hasClass('visible')) {
element.removeClass('visible');
} else {
element.addClass('visible');
}
});
});
.dropdown-check-list {
display: inline-block;
width: 100%;
}
.dropdown-check-list:focus {
outline: 0;
}
.dropdown-check-list .anchor {
width: 98%;
position: relative;
cursor: pointer;
display: inline-block;
padding-top: 5px;
padding-left: 5px;
padding-bottom: 5px;
border: 1px #ccc solid;
}
.dropdown-check-list .anchor:after {
position: absolute;
content: "";
border-left: 2px solid black;
border-top: 2px solid black;
padding: 5px;
right: 10px;
top: 20%;
-moz-transform: rotate(-135deg);
-ms-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.dropdown-check-list .anchor:active:after {
right: 8px;
top: 21%;
}
.dropdown-check-list ul.items {
padding: 2px;
display: none;
margin: 0;
border: 1px solid #ccc;
border-top: none;
}
.dropdown-check-list ul.items li {
list-style: none;
}
.dropdown-check-list.visible .anchor {
color: #0094ff;
}
.dropdown-check-list.visible .items {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="list3" class="dropdown-check-list" tabindex="100">
<span class="anchor">Which development(s) are you interested in?</span>
<ul class="items">
<li><input id="answers_2529_the-lawns" name="answers[2529][answers][]" type="checkbox" value="The Lawns" /><label for="answers_2529_the-lawns">The Lawns</label></li>
<li><input id="answers_2529_the-residence" name="answers[2529][answers][]" type="checkbox" value="The Residence" /><label for="answers_2529_the-residence">The Residence</label></li>
</ul>
</div>

Simply use bootstrap-multiselect where you can populate dropdown with multiselect option and many more feaatures.
For doc and tutorials you may visit below link
https://www.npmjs.com/package/bootstrap-multiselect
http://davidstutz.de/bootstrap-multiselect/

Develop Reference

JavaScript is the programming language of the Web.

javascript won't appear on html - javascript

Related

Assign TWO Images to Radio Button

How to select checkboxes from the dropdown? [duplicate]

Error when trying to work on drop down with multi select?

HTML/CSS Can't get form and buttons to work properly [closed]

How to create checkbox inside dropdown?

Categories

Resources