I'm trying to display certain div elements in a forloop and would like javascript to identify the correct one. For example:
<div id="box">
<div class="red-box"></div>
</div>
<div id="box">
<div class="green-box"></div>
</div>
<div id="box">
<div class="blue-box"></div>
</div>
const boxes = document.querySelectorAll("#box");
for (var i = 0; i < boxes.length; i++) {
//if array is 0 display red box
//If array is 1 display a green box
//If array is 2 display a blue box
}
If I click the first div class box and want to display a red box but if I click the 3rd div class box it will display a blue box.
Use a class since Ids have to be unique. Add click event listener, show the child inside.
const boxes = document.querySelectorAll(".box");
for (var i = 0; i < boxes.length; i++) {
boxes[i].addEventListener("click", function () {
this.children[0].classList.toggle("active");
});
}
.box {
width: 100px;
height: 100px;
border: 1px solid black;
display: inline-block;
}
.box > div {
width: 100%;
height: 100%;
display: none;
}
.box > div.active {
display: block;
}
.red-box {
background-color: red;
}
.green-box {
background-color: green;
}
.blue-box {
background-color: blue;
}
<div class="box">
<div class="red-box"></div>
</div>
<div class="box">
<div class="green-box"></div>
</div>
<div class="box">
<div class="blue-box"></div>
</div>
And without JavaScript
.selector {
display: none;
}
.box {
width: 100px;
height: 100px;
border: 1px solid black;
display: inline-block;
}
.box > div {
width: 100%;
height: 100%;
display: none;
}
.selector:checked + .box > div {
display: block;
}
.red-box {
background-color: red;
}
.green-box {
background-color: green;
}
.blue-box {
background-color: blue;
}
<input type="checkbox" id="box1" class="selector">
<label for="box1" class="box">
<div class="red-box"></div>
</label>
<input type="checkbox" id="box2" class="selector">
<label for="box2" class="box">
<div class="green-box"></div>
</label>
<input type="checkbox" id="box3" class="selector">
<label for="box3" class="box">
<div class="blue-box"></div>
</label>
<hr/>
<input type="radio" name="color" id="box1r" class="selector">
<label for="box1r" class="box">
<div class="red-box"></div>
</label>
<input type="radio" name="color" id="box2r" class="selector">
<label for="box2r" class="box">
<div class="green-box"></div>
</label>
<input type="radio" name="color" id="box3r" class="selector">
<label for="box3r" class="box">
<div class="blue-box"></div>
</label>
id must be unique.
Don't use id unless you have to.
Get rid of unnecessary parents.
I use data attributes for colors because it's easier than using class.
<div class="box" data-color="red"></div>
<div class="box" data-color="blue"></div>
<div class="box" data-color="green"></div>
and javascript:
let boxes = document.querySelectorAll(".box");
[...boxes].forEach(box => {
box.addEventListener("click", () => {
let color = event.target.dataset.color;
// You have color name now.
// Do whatever you want to do with it.
})
})
You can do something like this:
function fillDiv()
{
var div = document.getElementById('change');
var selection = document.getElementById('bgcolor').value;
var text = document.getElementById('message');
switch (selection)
{
case "1":
div.style.backgroundColor = 'green';
text.style.color = "lightblue";
break;
case "2":
div.style.backgroundColor = 'red';
text.style.color = "yellow";
break;
case "3":
div.style.backgroundColor = 'blue';
text.style.color = "white";
break;
}
}
h4.fill-div
{
display: block;
padding:10px;
width: 100%;
color: Green;
margin: auto;
text-align: center;
}
div.fill
{
height:30px;
width:100%;
position: absolute;
float:bottom;
background-color:#000000;
}
<div id="change" class="fill">
<h4 class="fill-div" id="message" >Hello world! </h4>
</div>
<br><br>
<select name="bgcolor" id="bgcolor" onchange="fillDiv()">
<option class="1" value=1>Green</option>
<option class="2" value=2>Red</option>
<option class="3" value=3>Blue</option>
</select>
<br>
Related
I want to make a board consisting of tiles but I do not know how to fill up the entire board area. I have only gotten up to 1 column of the board, as shown in the image. How can I fill this board so that each tile can be changed if clicked on or such?
body {
font-family: Arial, Helvetica, sans-serif;
text-align: center;
}
hr {
width: 500px;
}
#board {
width: 1000px;
height: 1000px;
float: center;
display: grid;
background-color: rgb(126, 124, 122);
border: 6px solid rgb(0, 0, 0);
}
.tile {
width: 200px;
height: 200px;
border: 5px solid bisque;
border-radius: 10%;
font-size: 40px;
font-weight: bold;
display: flex;
justify-content: center;
align-items: center;
}
.picker {
width: 100px;
height: 100px;
border: 5px solid bisque;
margin: 0 auto;
border-radius: 10%;
align-content: left;
align-self: left;
}
.tile {
background-color: rgb(255, 255, 255);
color: black;
}
.float-child {
width: 10%;
padding: 10px;
border: 2px solid rgb(0, 0, 0);
vertical-align: left;
}
<body>
<h1>Play-Color</h1>
<hr>
<div class="game">
<div class="float-child">
<button class="picker" style="background-color: red"></button>
<h4>count = 0</h4>
<br>
<button class="picker" style="background-color: blue"></button>
<h4>count = 0</h4>
<br>
<button class="picker" style="background-color: green"></button>
<h4>count = 0</h4>
<br>
<button class="picker" style="background-color: yellow"></button>
<h4>count = 0</h4>
<br>
<button class="picker" style="background-color: grey"></button>
<h4>count = 0</h4>
<br>
<button class="picker"></button>
<br>
</div>
<div id="board" class="float-child" style="position:relative; left:900px; top:-1000px" >
<button class="tile"></button>
<button class="tile"></button>
<button class="tile"></button>
<button class="tile"></button>
<button class="tile"></button>
</div>
</div>
</div>
</body>
[2]UpdatedImage
........................................................................................................................................................................................
There are many steps to achieve the wanted result. Normally I wouldn't code this on SO. I just did it because I had fun it it. For the feature dont expect others to code a whole game for you for free!
See the comments within HTML, CSS and JS for furtehr info.
You have to create your color to pick from. The smartest solution IMHO is the use of radio-buttons. The Radio button will even without a script only allow the selection of one choice:
<input type="radio" name="color" value="color-name" id="color-name">
To not break the game you should always have one color selected. To ensure that on start one color is already selected you add the checked-attribtue to one color such as:
<input type="radio" ... checked>
Next you have to hide the checkboxes to be invisible and not cunsumign any space which you do through CSS:
input { display: none; }
Then you have to add the color as visual box by adding a <label>. That has the advantage that you can click on the label and it will select the correct radio button:
<label for="color-name">
After that you color the label with the color you want. While you do that, you can also set a CSS-Class to the same color in the same instance to allow the painting with that color:
label[for=color-name],
.color-name {
background-color: color-name;
}
Finally you have to create a grid. You can do that easily through JS or hardcode it to HTML. Sicne I dont want to explain you on how to do it correctly through JS (which would cost me another 30 minutes of my lifetime) I will hardcode it through HTML. In my case I used a grid-container: <div class="game-board">. Then I added 25x child elements: <div class="card"></div>. To make the grid 5x5 dimensions I used CSS on the Grid-Container to create 5 columns:
.game-board {
display: grid;
grid-template-columns: repeat(5, 1fr);
}
As said already in the comments, you don't need buttons to be clickable for JS. The label of the radio buttons are clickable already (as they are labels). You can run a script even when not being clickable by simply usign the EventListener to check for a click-event by using JS:
element.addEventListener('click', e => {
// statements
});
To only select the grid-cards and not the container itself or possibel other content you can check if the element that was clicked on contains a specific class:
if (e.target.classList.contains('card')) {
// statements
}
In case that grid-card already has a color as CSS-Class applied to, we have to remove all potencial classes that would prevent the CSS to work correctly (it would only show the color of the class that is listed last in CSS):
e.target.className = ''
Unfortunatly the last step also removed the card class and as such we have to re-add this class:
e.target.classList.add('card');
Once we did that, we use a switch-case-statement which is cleaner then writing tons of if/else-statements. You can google guides and tutorials on your own. That switch-statement now checks what radio-button is checked and applies a class to the element you clicked on that adds the background-color:
e.target.classList.add('color-name');
EDIT
To include a counter you can use the JS lenght-statement:
document.querySelectorAll('.game-board .color-name').length. this statement will count the number of elements that contain a specific class.
Then simply use innerHTML-statement to display the count:
element.innerHTML = document.querySelectorAll('.game-board .color-name').length
var board = document.querySelector('.game-board')
// eventListener to listen to click events on the game board
board.addEventListener('click', e => {
console.clear();
// checks if a card and not the agme baord itself was clicked on
if (e.target.classList.contains('card')) {
const card = e.target.classList;
// checks which color has been selected
var color = document.querySelector('.color-picker input:checked').value;
// removes all classes from the clicked on element to allow re-painting
e.target.className = '';
// re-adds the "card" class to the clicked element
card.add('card');
// switch statement to add the class with the selected color to paint the grid-card
switch (color) {
case "red":
card.add('red');
break;
case "blue":
card.add('blue');
break;
case "green":
card.add('green');
break;
case "yellow":
card.add('yellow');
break;
case "gray":
card.add('gray');
break;
}
// color-counter
var countRed = document.querySelectorAll('.game-board .red').length,
countBlue = document.querySelectorAll('.game-board .blue').length,
countGreen = document.querySelectorAll('.game-board .green').length,
countYellow = document.querySelectorAll('.game-board .yellow').length,
countGray = document.querySelectorAll('.game-board .gray').length;
// displaying the counter
var labelRed = document.querySelector('#count-red span'),
labelBlue = document.querySelector('#count-blue span'),
labelGreen = document.querySelector('#count-green span'),
labelYellow = document.querySelector('#count-yellow span'),
labelGray = document.querySelector('#count-gray span');
labelRed.innerHTML = countRed;
labelBlue.innerHTML = countBlue;
labelGreen.innerHTML = countGreen;
labelYellow.innerHTML = countYellow;
labelGray.innerHTML = countGray;
}
});
/* aligning the color picker and game board next to each other */
body {
margin: 0;
padding: 10px;
box-sizing: border-box;
display: flex;
gap: 10px;
min-height: 100vh;
}
/* box for the color */
.color-picker {
border: 1px solid black;
display: flex;
flex-direction: column;
padding: 5px 30px;
gap: 10px;
}
/* hides the radio button */
.color-picker > input {
display: none;
}
/* creatign a visual border to see what color has been selected */
input:checked + label {
border: 3px solid black;
}
/* setting a "color-box" to the radio-button */
.color-picker > label {
display: block;
box-sizing: border-box;
aspect-ratio: 1 / 1;
min-width: 50px;
}
/* settign the color of the color picker and classes for painting */
label[for=red],
.red {
background-color: red;
}
label[for=blue],
.blue {
background-color: blue;
}
label[for=green],
.green {
background-color: green;
}
label[for=yellow],
.yellow {
background-color: yellow;
}
label[for=gray],
.gray {
background-color: gray;
}
/* game board that creates a board of 5x5 with equal dimensions */
.game-board {
flex-grow: 1;
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-gap: 5px;
}
/* Setting the grid-cards to be squares */
.game-board > .card {
aspect-ratio: 1 / 1;
border: 1px solid red;
border-radius: 5px;
display: flex;
justify-content: center;
align-items: center;
}
/* To make the grid-cards and label appear like buttons on hover */
.color-picker > label:hover,
.card:hover {
cursor: pointer;
}
<!-- Letting you select the color -->
<div class="color-picker">
<input type="radio" name="color" value="red" id="red" checked>
<label for="red"></label>
<div id="count-red">Count: <span>0</span></div>
<input type="radio" name="color" value="blue" id="blue">
<label for="blue"></label>
<div id="count-blue">Count: <span>0</span></div>
<input type="radio" name="color" value="green" id="green">
<label for="green"></label>
<div id="count-green">Count: <span>0</span></div>
<input type="radio" name="color" value="yellow" id="yellow">
<label for="yellow"></label>
<div id="count-yellow">Count: <span>0</span></div>
<input type="radio" name="color" value="gray" id="gray">
<label for="gray"></label>
<div id="count-gray">Count: <span>0</span></div>
</div>
<!-- The game board as a grid -->
<div class="game-board">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>
I am trying to be able to select a parent div and have it select its respective child radio button.
Inside this parent div there is a show/hide link that shows some info in a div that's also inside this container.
Problem is when I click the show/hide link of a parent div that isn't clicked, I want it to show/hide that hidden div without selecting that div's radio button/parent div.
Looking for a clean vanilla javascript solution.
In my code so far, it's not properly selecting the parent div of radio button, and then I want to make sure the show/hide link doesn't select the div if it wasn't already selected.
HTML
<div class="box" onclick="check(this)">
<h3>This is div 1</h3>
<input id="radio1" name="field" type="radio" />
<div>
<div class="hiddenstuff">
You see me now
</div>
<p>show</p>
</div>
</div>
<br />
<div class="box" onclick="check(this)">
<h3>This is div 2</h3>
<input id="radio2" name="field" type="radio" />
<div>
<div class="hiddenstuff">
You see me now
</div>
<p>show</p>
</div>
</div>
CSS:
.box {
width: 300px;
height: 150px;
padding: 10px;
background-color: yellow;
cursor: pointer;
}
.checked {
border: 3px solid blue;
}
.hiddenstuff {
color: red;
padding: 10px;
display: none;
}
JS:
function check(box) {
var radioId = this.querySelectorAll('input[type="radio"]').value;
document.getElementById(radioId).click();
document.querySelectorAll(".box").forEach(function (item) {
item.classList.remove("checked");
});
if ((input[0].checked = true)) {
box.classList.add("checked");
}
return false;
}
function showhide(elem) {
var cont = elem.parentNode.previousElementSibling;
if (cont.style.display != "block") {
cont.style.display = "block";
elem.innerHTML = "hide";
} else {
cont.style.display = "none";
elem.innerHTML = "show";
}
return false;
elem.stopPropagation();
}
.box {
width: 300px;
height: 150px;
padding: 10px;
background-color: yellow;
cursor: pointer;
}
.checked {
border: 3px solid blue;
}
.hiddenstuff {
color: red;
padding: 10px;
display: none;
}
<div class="box" onclick="check(this)">
<h3>This is div 1</h3>
<input id="radio1" name="field" type="radio" />
<div>
<div class="hiddenstuff">
You see me now
</div>
<p>show</p>
</div>
</div>
<br />
<div class="box" onclick="check(this)">
<h3>This is div 2</h3>
<input id="radio2" name="field" type="radio" />
<div>
<div class="hiddenstuff">
You see me now
</div>
<p>show</p>
</div>
</div>
Is this what you need?
If so, add event.stopPropagation(); at start of your clicking link function.
Also i believe your id fetching was wrong so i changed it:
querySelectorAll returns nod list, not element. Then you need to loop in it and fetch .id not .value to get the id.
var el = box.querySelectorAll('input[type="radio"]');
var radioId = "";
el.forEach(element => {
radioId = element.id
});
Use box, not this. Also input[0] was undefined, in my solution you have el, use that in your if condition.
function check(box) {
var el = box.querySelectorAll('input[type="radio"]');
var radioId = "";
el.forEach(element => {
radioId = element.id
});
//console.log(radioId);
document.getElementById(radioId).click();
document.querySelectorAll(".box").forEach(function(item) {
item.classList.remove("checked");
});
if ((el[0].checked = true)) {
box.classList.add("checked");
}
return false;
}
function showhide(elem) {
event.stopPropagation();
var cont = elem.parentNode.previousElementSibling;
if (cont.style.display != "block") {
cont.style.display = "block";
elem.innerHTML = "hide";
} else {
cont.style.display = "none";
elem.innerHTML = "show";
}
return false;
}
.box {
width: 300px;
height: 150px;
padding: 10px;
background-color: yellow;
cursor: pointer;
}
.checked {
border: 3px solid blue;
}
.hiddenstuff {
color: red;
padding: 10px;
display: none;
}
<div class="box" onclick="check(this)">
<h3>This is div 1</h3>
<input id="radio1" name="field" type="radio" />
<div>
<div class="hiddenstuff">
You see me now
</div>
<p>show</p>
</div>
</div>
<br />
<div class="box" onclick="check(this)">
<h3>This is div 2</h3>
<input id="radio2" name="field" type="radio" />
<div>
<div class="hiddenstuff">
You see me now
</div>
<p>show</p>
</div>
</div>
I want to change the styling of a dropdown with check boxes using only CSS and javascript. I have added a picture of what I am trying to make when the button is pressed.. It would be nice if I could make a focus to the selected check box just like the grey container at the first checkbox
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>Group</option>
</select>
<div class="overSelect"></div>
</div>
<div id="checkboxes">
<label for="one">
<input type="checkbox" id="one" /> Boiler
</label>
<label for="two">
<input type="checkbox" id="two" /> Engine
</label>
<label for="three">
<input type="checkbox" id="three" /> Fan
</label>
<label for="one">
<input type="checkbox" id="four" /> Location
</label>
<label for="two">
<input type="checkbox" id="five" /> Ship
</label>
<label for="three">
<input type="checkbox" id="six" /> Valmarine
</label>
<label for="three">
<input type="checkbox" id="seven" /> Voyage</label>
</div>
</div>
</form>
For example I want to change the color of the dropdown button, the color of the box with the arrow on the right of the dropbox, the color of the checkboxes (dark grey) etc..
I am trying to make it as simple as possible using only CSS and javascript.
You can get pretty far on css alone. Most of the trick here is using a pseudo element on checkbox to represent selected state.
No html and js changes in this solution.
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;
}
}
* {
box-sizing: border-box;
}
body {
background: #0b4a79;
}
input[type="checkbox"]:checked::after {
border: 1px solid #a8a8a8;
background: #dadada;
background: linear-gradient(to bottom, #f0f0f0 0%, #c5c5c5 100%);
content: "";
left: 0;
right: 0;
top: 0;
bottom: 0;
position: absolute;
z-index: -10;
border-radius: 2px;
}
.multiselect {
width: 200px;
}
.selectBox {
position: relative;
}
.selectBox select {
width: 100%;
font-weight: bold;
background: #0000;
border: none;
border-radius: 2px;
background: linear-gradient(to bottom, #c9dde8 0%, #86b3cc 100%);
}
.overSelect {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
#checkboxes {
background-color: #103c5d;
display: none;
border: 1px #dadada solid;
margin: 5px 0 0 0;
border-radius: 3px;
}
#checkboxes label {
display: block;
font-family: Helvetica, Arial, sans-serif;
margin: 4px;
padding: 3px 2px;
position: relative;
color: #ffffff;
background: rgba(0, 0, 0, 0);
z-index: 1;
}
#checkboxes label:hover {
background-color: #1e90ff;
border-radius: 2px;
}
<form>
<div class="multiselect">
<div class="selectBox" onclick="showCheckboxes()">
<select>
<option>Group</option>
</select>
<div class="overSelect"></div>
</div>
<div id="checkboxes">
<label for="one">
<input type="checkbox" id="one" /> Boiler
</label>
<label for="two">
<input type="checkbox" id="two" /> Engine
</label>
<label for="three">
<input type="checkbox" id="three" /> Fan
</label>
<label for="one">
<input type="checkbox" id="four" /> Location
</label>
<label for="two">
<input type="checkbox" id="five" /> Ship
</label>
<label for="three">
<input type="checkbox" id="six" /> Valmarine
</label>
<label for="three">
<input type="checkbox" id="seven" /> Voyage</label>
</div>
</div>
</form>
To highlight the label you can go with something like mentioned in this post from #dfsq and add/remove a special class to your label on the click-event.
// get all your inputs within "#checkboxes label"
var checkedInput = document.querySelectorAll('#checkboxes label > input');
// loop over your inputs, by on change of your input (checked/unchecked)
// toggle the css class for the closest "label"
Array.from(checkedInput ).forEach(input => {
input.addEventListener('change', function(event) {
this.closest("label").classList.toggle("with-focus");
});
});
You can style then the new class
#checkboxes label.with-focus {
display: block;
background-color: #eee;
border-radius: 2px;
}
I've changed your snippet with this:
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;
}
}
// get all your inputs within "#checkboxes label"
var checkedInput = document.querySelectorAll('#checkboxes label > input');
// loop over your inputs, by on change of your input (checked/unchecked)
// toggle the css class for the closest "label"
Array.from(checkedInput ).forEach(input => {
input.addEventListener('change', function(event) {
this.closest("label").classList.toggle("with-focus");
});
});
.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;
padding: 5px;
background-color: #103c5d;
}
#checkboxes label {
display: block;
}
#checkboxes label.with-focus {
display: block;
background-color: #eee;
border-radius: 2px;
}
#checkboxes label:hover {
background-color: #1e90ff;
}
<form>
<div class="multiselect">
<div class="selectBox" onclick="showCheckboxes()">
<select>
<option>Group</option>
</select>
<div class="overSelect"></div>
</div>
<div id="checkboxes">
<label for="one">
<input type="checkbox" id="one" /> Boiler
</label>
<label for="two">
<input type="checkbox" id="two" /> Engine
</label>
<label for="three">
<input type="checkbox" id="three" /> Fan
</label>
<label for="one">
<input type="checkbox" id="four" /> Location
</label>
<label for="two">
<input type="checkbox" id="five" /> Ship
</label>
<label for="three">
<input type="checkbox" id="six" /> Valmarine
</label>
<label for="three">
<input type="checkbox" id="seven" /> Voyage</label>
</div>
</div>
</form>
For all the other CSS stuff you should probably dig around, thats not as hard as its sounds ;)
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 2 years ago.
Improve this question
beginner here
Trying to create a drop down where the user can select multiple records.
after reading how other have done it, i came up with the below..
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>
When i delete the STYLE section i get the drop down (with nothing) and the 3 created check box options.
Trying to put them together!!
Is this what you wanted ?
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 {
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'm new to JavaScript, so bear with me if I'm not explaining what I want that well. So basically I have a form for creating activities, so whenever the user fills the fields and hit save it will create an instance of the div containing the information. Now those information are basically just in lines, and I would like to organize them inside a box (div), but I'm not sure how to create it, is it using JS or HTMl?
Here is a picture of what I have working right now.
And here is a view of the code.
window.onload = function() {
function addAct(nameact, when, where,desc) {
var buses = document.querySelectorAll(".bus");
var curr = document.createElement("div");
curr.setAttribute("class", "name");
var p0 = document.createElement("p");
p0.setAttribute("class", "nameact");
p0.innerHTML = nameact;
var p1 = document.createElement("p");
p1.setAttribute("class", "whereisit");
p1.innerHTML = when;
var p2 = document.createElement("p");
p2.setAttribute("class", "when");
p2.innerHTML = where;
var p3 = document.createElement("p");
p3.setAttribute("class", "describtion");
p3.innerHTML = desc;
curr.appendChild(p0);
curr.appendChild(p1);
curr.appendChild(p2);
curr.appendChild(p3);
if (buses.length) {
buses[buses.length -1].insertAdjacentHTML("afterEnd", curr.outerHTML)
} else {
document.forms[1].insertAdjacentHTML("afterEnd", curr.outerHTML)
}
}
var obj = {nameact: "", when: "", where: "",desc:""};
document.forms[1].onchange = function(e) {
obj[e.target.name] = e.target.value;
}
document.forms[1].onsubmit = function(e) {
e.preventDefault();
addAct(obj.nameact, obj.when, obj.where, obj.desc)
}
}
<section id="cd-placeholder-2" class="cd-section cd-container">
<h2>Activities</h2>
<div id="Slider" class="slide-up">
<div>
<div class="contents" >
<form class="form2">
<div class="col-3">
<label>
Activity Name
<input placeholder="What is your activity?" tabindex="3" name="nameact" />
</label>
</div>
<div class="col-3">
<label>
Where?
<input placeholder="Where is it going to be?" tabindex="4" name="when" />
</label>
</div>
<div class="col-3">
<label>
When?
<input type="date" placeholder="mm\dd\yy" tabindex="4" name="where"/>
</label>
</div>
<div>
<label>
Care to share more?
<textarea placeholder="describtion of your activity" class="text" name="desc"></textarea>
</label>
</div>
<button type="submit" value="Submit" class="cd-btn" id="col-submit" style="position:relative;float:right;overflow:hidden;margin:10px;margin-top:30px;">Add Activity</button>
</form>
<div id="name"></div>
</div>
</div>
</div>
</section>
Any feedback is highly appreciated.
You need HTML+CSS+JS
HTML :
<div id="name"></div>
CSS
.row{
background-color: red;
border: 5px solid #333;
display: block;
position: relative;
overflow: hidden;
}
.nameact{
background-color:red;
height: 40px;
display: inline-block;
}
.whereisit{
background-color:green;
height: 40px;
display: inline-block;
}
.when{
background-color:blue;
height: 40px;
display: inline-block;
}
.describtion{
background-color:brown;
height: 40px;
display: inline-block;
}
JS
var obj = {nameact: "", when: "", where: "",desc:""};
document.forms[1].onchange = function(e) {
obj[e.target.name] = e.target.value;
}
document.forms[1].onsubmit = function(e) {
e.preventDefault();
addAct(obj.nameact, obj.when, obj.where, obj.desc)
}
function addAct(nameact, when, where,desc) {
var myhtml = '<div class="row"><div class="nameact">'+nameact+'</div><div class="whereisit">'+where+'</div><div class="when">'+when+'</div><div class="describtion">'+describtion+'</div></div>';
document.getElementById('name').innerHTML += myhtml;
}
You will need to update CSS code, based on your needs
If you need any help understanding this, please let me know. I've written a few css styles, and the html markup that they will be applied to. Make your javascript produce this markup, and do some reading about CSS to extrapolate this into a complete module.
<style>
.activity {
width: 645px;
height: 160px;
border: 2px solid #0000ff;
}
.activity > div {
padding: 20px;
}
.activity .top {
display: inline-block;
float: left;
width: 174px;
height: 30;
border-right: 1px solid #0000ff;
}
.activity .top.end {
width: 175px;
border-right: none;
}
.activity .bottom {
display: inline-block;
float: left;
width: 605px;
height: 50;
border-top: 1px solid #0000ff;
}
.activity .title {
display: block;
}
</style>
<div class="activity">
<div class="top">
<span class="title">ACTIVITY NAME</span>
<span>Skydiving</span>
</div>
<div class="top">
<span class="title">WHERE?</span>
<span>Dubai Palm Island</span>
</div>
<div class="top end">
<span class="title">2017-06-22</span>
</div>
<div class="bottom">
<span>CARE TO SHARE MORE?</span>
<span class="title">It will be a fun trip!</span>
</div>
</div>
I hope this gets you headed in the right direction!