We Keep Coding

Connecting few "if" conditions

I have 12 <a> tags and they are linked to image. What i want to do is to connect all of them in one if as a .clicked == true. For some reason it does not work so here i am with another question.
A sample of my <a> tag.
<div id="container">
<div id="slider">
</div>
<div id="wypelniacz">
<img style="top: 22%; right: 60%;" alt="" src="greenapple.png" class="apl" id="apple1" onclick="imageSwap(1) ; this.onclick=null;">
</div>
</div>
JS
function imageSwap(id)
{
document.getElementById("apple" + id).src = "redapple.png";
}
To make it easier to explain i have posted a picture of what am i doing.
When apple is not clicked it remains green, but when i click on it, it will change to red.
Then, when all 12apples are red the whole div copntent will be deleted and swapped for one image. How can i possibly do that? Thanks in advance!

So add a class for attribute and check how many you have
function imageSwap(id) {
var img = document.getElementById("apple" + id);
img.src = "redapple.png";
img.classList.add("selected");
var count = document.querSelectorAll(".selected").length;
console.log(count);
}
or just with html and css
document.querySelector(".tree").addEventListener("change", function(evt) {
const checked = document.querySelectorAll(".apple:checked").length;
console.log(checked);
console.log(evt.target.form.checkValidity());
});
.apple {
display: none;
}
.apple + label {
display: inline-block;
width: 100px;
height: 100px;
background-image: url(http://placekitten.com/g/100/100);
}
.apple:checked + label {
background-image: url(http://placekitten.com/100/100);
}
<form class="tree">
<input type="checkbox" class="apple" id="apple1" required><label for="apple1"></label>
<input type="checkbox" class="apple" id="apple2" required><label for="apple2"></label>
<input type="checkbox" class="apple" id="apple3" required><label for="apple3"></label>
<input type="checkbox" class="apple" id="apple4" required><label for="apple4"></label>
<input type="checkbox" class="apple" id="apple5" required><label for="apple5"></label>
<button>Next</button>
</form>

Use event delegation, that is I attach a click event to '.container', and use 'event.target' to manipulate the target apple
toggle target apple class to switch background-color
check all apples, if there is no '.red', then switch to a new image(Here I just remove the '.red' class all)
document.addEventListener('DOMContentLoaded', ev => {
const apples = [...document.querySelectorAll('.apple')]
const container = document.querySelector('.container')
container.addEventListener('click', ev => {
if (ev.target.matches('.apple')) {
ev.preventDefault()
ev.target.classList.toggle('red')
const apples = [...container.querySelectorAll('.apple')]
if (apples.every(apple => apple.classList.contains('red'))) {
apples.forEach(apple => apple.classList.remove('red'))
}
}
})
}, false)
div {
display: flex;
flex-flow: row wrap;
justify-content: space-evenly;
align-items: center;
}
.apple {
width: 5rem;
height: 5rem;
border-radius: 5rem;
background: green;
}
.green {
background: green;
}
.red {
background: red;
}
<div class="container">
</div>

Replace CHOOSE FILE with an image

Hi I am trying to replace the choose file button with an image. I am using javascript to create the button but when I am inspecting the website, it shows me a html script of the button which is of type= file.
To create it, I used:
input = createFileInput(handleFile);
input.elt.style["width"] = "40%";
input.elt.style["font-size"]="3vmin";
function handleFile(file) {
print(file);
if (file.type === 'image') {
imgFile = file.data;
img = createImg(file.data);
img.hide();
canvas.image(img, 0, 0, 224, 224);
image(img, 0, 0, width, height/2);
img.remove();
}
mode = 1;
tint = false;
}
Can anyone suggest how I can change the generic button with an image.

I think you can cheat and position an image over the input, then add a click handler to the image and pass it through to the input button below.
Is this what you are trying to achieve?
const input = document.querySelector("#avatar");
const button = document.querySelector("#button");
button.addEventListener('click', event => input.click(event));
.body {
font-family: sans-serif;
}
label {
display: inline-block;
padding: 1em 0;
}
.wrapper {
position: relative;
}
#avatar {
display: block;
height: 50px;
border: 1px solid #333;
}
#button {
position: absolute;
left: 1px;
top: 1px;
}
<div class="body">
<label for="avatar">Choose a profile picture:</label>
<div class="wrapper">
<input type="file" id="avatar" name="avatar">
<img id="button" src="https://via.placeholder.com/75x50/333333/ffffff?text=Avatar"></img>
</div>
</div>

How to change color of a container border using radio buttons using JS?

I have an issue, I need to create a settings dropdown menu when you can select different themes. The themes have to change the background color and border color, I have the background color working, however I'm struggling to make the border change color.
function changeTheme() {
if (document.getElementById("theme1").checked = true) {
document.container.style.backgroundColor = "lightgray";
document.container.style.borderColor = "red";
}
}
function bgcolor(color, border) {
document.body.style.background = color;
document.body.style.borderColor = border;
}
<div class="dropdown">
<input type="radio" id="theme1" name="theme" value="1" onclick="bgcolor('lightgray', 'red');" onchange="showFeedback('You changed the theme!')">Light<br><br>
</div>
So the container is a square in the middle of the page with a border. When I select one of the themes the background color of the whole page should change and the border color of the container in the middle should change as well.
I tried onclick="changeTheme()but it doesn't work

To set a border, you must specify the thickness and style.
Also, don't use inline styles or inline event handlers. Just set a pre-existing class upon the event. And instead of checking to see if the radio button is selected, just use the click event of the button. If you've clicked it, it's selected.
Lastly, if you are using a form field, but only as a UI element and not to actually submit data anywhere, you don't need the name attribute.
document.getElementById("theme1").addEventListener("click", function() {
document.body.classList.add("lightTheme");
});
.lightTheme { border:1px solid red; background-color:lightgrey; }
<div class="dropdown">
<input type="radio" id="theme1" value="1">Light<br><br>
</div>

As #Tyblitz remarked: your "border" needs to be set properly:
function changeTheme() {
if (document.getElementById("theme1").checked = true) {
document.container.style.backgroundColor = "lightgray";
document.container.style.borderColor = "red";
}
}
function bgcolor(color, border) {
document.body.style.background = color;
document.body.style.border = border;
}
<div class="dropdown">
<input type="radio" id="theme1"
name="theme" value="1"
onclick="bgcolor('lightgray', '6px solid red');"
onchange="console.log('You changed the theme!')">Light<br><br>
</div>

2nd Edit :
(Thanks to Scott Marcus answer and Mike 'Pomax' Kamermans comment)
Here is a pen for it.
I create classes for each theme with the naming pattern : prefix "colorTheme" followed by the input value attribute's value.
function themeChange() {
/* theme class naming pattern : prefix "colorTheme"
followed by the input "value attribute" 's value */
var themeCheckedClassValue = "colorTheme" + this.value;
/* don't do anything if we click on the same input/label */
if (themeCheckedClassValue != document.body.dataset.currentThemeClass) {
document.body.classList.remove(document.body.dataset.currentThemeClass);
document.body.classList.add(themeCheckedClassValue);
/* new current theme value stored in data-current-theme-class custom
attribut of body */
document.body.dataset.currentThemeClass = themeCheckedClassValue;
}
}
document.addEventListener('DOMContentLoaded', function () {
/* querySelector and if statement only needed at DOMContentLoaded
So I did a seperate function for this event */
var themeChecked = document.querySelector('input[id^="theme"]:checked');
if (themeChecked) {
var themeCheckedClassValue = "colorTheme" + themeChecked.value;
document.body.classList.add(themeCheckedClassValue);
document.body.dataset.currentThemeClass = themeCheckedClassValue;
}
else {
/* if there is no input with the attribute "checked"
the custom attribut data-current-theme-class takes the value "null" */
document.body.dataset.currentThemeClass = null;
}
});
/* input[id^="theme] mean every input with an id starting with "theme" */
var themeInputs = document.querySelectorAll('input[id^="theme"]');
for (let i = 0; i < themeInputs.length; i++) {
themeInputs[i].addEventListener("click", themeChange);
}
This way you can simply add new themes by following the same naming pattern.
function themeChange() {
/* theme class naming pattern : prefix "colorTheme"
followed by the input "value attribute" 's value */
var themeCheckedClassValue = "colorTheme" + this.value;
/* don't do anything if we click on the same input/label */
if (themeCheckedClassValue != document.body.dataset.currentThemeClass) {
document.body.classList.remove(document.body.dataset.currentThemeClass);
document.body.classList.add(themeCheckedClassValue);
/* new current theme value stored in data-current-theme-class custom
attribut of body */
document.body.dataset.currentThemeClass = themeCheckedClassValue;
}
}
document.addEventListener('DOMContentLoaded', function() {
/* querySelector and if statement only needed at DOMContentLoaded
So I did a seperate function for this event */
var themeChecked = document.querySelector('input[id^="theme"]:checked');
if (themeChecked) {
var themeCheckedClassValue = "colorTheme" + themeChecked.value;
document.body.classList.add(themeCheckedClassValue);
document.body.dataset.currentThemeClass = themeCheckedClassValue;
} else {
/* if there is no input with the attribute checked
the custom attribut data-current-theme-class takes the value "null" */
document.body.dataset.currentThemeClass = null;
}
});
/* input[id^="theme] mean every input with an id starting with "theme" */
var themeInputs = document.querySelectorAll('input[id^="theme"]');
for (let i = 0; i < themeInputs.length; i++) {
themeInputs[i].addEventListener("click", themeChange);
}
html {
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-size: 16px;
}
*,
*::after,
*::before {
-webkit-box-sizing: inherit;
box-sizing: inherit;
}
body {
margin: 0;
padding: 0;
min-height: 100vh;
width: 100vw;
border: 10px solid;
border-color: transparent;
-webkit-transition: all .4s;
transition: all .4s;
}
ul {
list-style: none;
margin: 0;
padding: 10px;
font-size: 20px;
}
li {
padding: 2px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
input,
label {
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
outline: none;
}
.colorTheme1 {
color: rgb(36, 36, 33);
font-weight: 400;
background-color: rgb(248, 236, 220);
border-color: rgb(60, 75, 124);
}
.colorTheme2 {
background-color: rgb(39, 34, 28);
border-color: rgb(102, 102, 153);
color: rgb(248, 236, 220);
font-weight: 700;
}
.colorTheme3 {
background-color: rgb(255, 0, 0);
border-color: rgb(0, 255, 255);
color: rgb(255, 255, 0);
font-weight: 700;
}
<body>
<ul>
<li><input type="radio" id="theme1" name="theme" value="1" checked><label for="theme1">Light</label></li>
<li>
<input type="radio" id="theme2" name="theme" value="2"><label for="theme2">Dark</label></li>
<li>
<input type="radio" id="theme3" name="theme" value="3"><label for="theme3">Flashy</label></li>
</ul>
</body>

Why is this code using .parentNode not working?

Here is the method I’m trying to make. Basically what it’s supposed to do is, when an <input> with the type of button is clicked, it makes the next <div> (in this case hard-coded) go from display: none to display: block. However it’s not working.
matchDivs() {
let showInputs = document.querySelectorAll('input')
const inputs = Array.from(showInputs)
inputs.map(input => {
if (input.parentNode.getAttribute('class') === 'first-employee') {
document.querySelector('.second-employee').setAttribute('style', 'display: block')
}
return input
})
}

When you use if (node.getAttribute('class') === 'first-employee') this is return:
class='first-employee' // true
class='employee first-employee' // false
You must use:
if (node.classList.contains("first-employee")):
class='first-employee' // true
class='employee first-employee' // true

If I have understand your question properly that on button click you want to show/hide DIV tag next to it, which is inside common parent div for both, button and 'second-employee'.
I think below will be helpful.
// For single Div show/hide on button click
let btnMatchDiv = document.querySelector('#btnMatchDivs');
btnMatchDiv.addEventListener('click', matchDivs, true);
function matchDivs() {
let showInputs = document.querySelectorAll('input')
const inputs = Array.from(showInputs)
inputs.map(input => {
// Method 1
// ===========================
/*if (input.parentNode.getAttribute('class') === 'first-employee') {
document.querySelector('.second-employee').setAttribute('style', 'display: block')
}*/
// Method 2 : you can use new classList method
// ===========================
if (input.parentNode.classList.contains('first-employee')) {
input.nextElementSibling.classList.toggle('hidden');
}
//return input
})
}
body {
font-family: Arial;
}
.first-employee {
display: block;
padding: 1em;
border: 1px solid green;
}
.second-employee {
padding: 1em;
border: 1px solid red;
}
#btnMatchDivs {
padding: 1em 0.5em;
border: 1px solid #777;
}
.hidden {
display: none
}
<div class="first-employee">
<h2>
First Employee
</h2>
<input type="button" id="btnMatchDivs" value="Toggle Second Employee" />
<div class="second-employee hidden">
Second Employee
</div>
</div>
Please let me know if you need further help on this.
Thanks,
Jignesh Raval

Also if you want to toggle multiple items then you can try below code.
// For multiple Div show/hide on button click
// ===================================
let showInputs = document.querySelectorAll('input')
const btnInputs = Array.from(showInputs)
// Bind click event to each button input
btnInputs.map(input => {
input.addEventListener('click', matchDivs, false);
})
function matchDivs(event) {
let buttonEle = event.currentTarget;
if (buttonEle.parentNode.classList.contains('first-employee')) {
buttonEle.nextElementSibling.classList.toggle('hidden');
}
}
body {
font-family: Arial;
}
.first-employee {
display: block;
padding: 1em;
border: 1px solid green;
margin-bottom: 1em;
}
.second-employee {
margin: 1em 0;
padding: 1em;
border: 1px solid red;
}
#btnMatchDivs {
padding: 1em 0.5em;
border: 1px solid #777;
}
.hidden {
display: none
}
<div class="first-employee">
<h2>
First Employee 1
</h2>
<input type="button" id="btnMatchDivs" value="Match Divs" />
<div class="second-employee hidden">
Second Employee 1
</div>
</div>
<div class="first-employee">
<h2>
First Employee 2
</h2>
<input type="button" id="btnMatchDivs" value="Match Divs" />
<div class="second-employee hidden">
Second Employee 2
</div>
</div>
<div class="first-employee">
<h2>
First Employee 3
</h2>
<input type="button" id="btnMatchDivs" value="Match Divs" />
<div class="second-employee hidden">
Second Employee 3
</div>
</div>
I hope this will be helpful.
Thanks,
Jignesh Raval

Jquery Range Slider - Low Fill Section - How to Fill with Background-Color

I created this range slider, and i would like to fill the "lower" section of the slider with a green color similar to the blue in the example picture.
I've tried every technique i could find on the web. I read that Internet Explorer supports code for this sort of thing, but most modern browsers will need a hack to achieve this affect. I tried a gradient technique but it seemed a little too hacky for me. Nothing i try sticks.
Does anybody know a simple way to fill the lower fill section? There has to be a way-
https://codepen.io/stinkytofu3311/pen/GmKxoW
var sizeRange = ["11x17 - Starting Price <span>- $19.99</span>", // Store string inside of an Array
"24x36 - Starting Price <span>- $29.99</span>",
"70x90 - Starting Price <span>- $39.99</span>",
"120x50 - Starting Price <span>- $49.99</span>",
"67x18 - Starting Price <span>- $59.99</span>",
"19x30 - Starting Price <span>- $69.99</span>"]
var imageUrl = new Array(); // Store images inside of an Array
imageUrl[0] = 'http://svgshare.com/i/1Ak.svg';
imageUrl[1] = 'http://svgshare.com/i/1AQ.svg';
imageUrl[2] = 'http://svgshare.com/i/1Bb.svg';
imageUrl[3] = 'http://svgshare.com/i/1Am.svg';
imageUrl[4] = 'http://svgshare.com/i/1CG.svg';
imageUrl[5] = 'http://svgshare.com/i/1By.svg';
$('#sliderPrice').html( sizeRange[0] );
$(document).on('input change', '#range-slider', function() { //Listen to slider changes (input changes)
var v=$(this).val(); //Create a Variable (v), and store the value of the input change (Ex. Image 2 [imageURL])
$('#sliderStatus').html( $(this).val() );
$('#sliderPrice').html( sizeRange[v] );
$("#img").prop("src", imageUrl[v]); // Modify the Images attribute src based on the sliders value, and input the value inside the imageURL[v] to display image
});
// ::::: Range Slider Thumb ::::: //
$("#range-slider").on("mousedown", function() { //1. When user clicks their mouse down on the Range-Slider
$(this).removeClass().addClass("thumb-down");//1.1 Remove default class from CSS, and add the class .thumb-down (changes background color)
$(this).addClass("hover-ring");//1.2 Remove default class from CSS, and add the class .hover-ring (changes box-shadow to a green color)
});
$("#range-slider").on("mouseup", function() { //2. When user mouse-up on Range-Slider
$(this).addClass("thumb-up"); //2.1 Changes thumb color back to light green
$(this).addClass("hover-ring-out"); //2.2 Removes Box-Shadow
});
#import url('https://fonts.googleapis.com/css?family=Roboto');
.product-range-wrapper {
displat: -webkit-flex;
displat:flex;
-webkit-flex-direction: column;
flex-direction:column;
max-width:600px;
margin:0px auto;
/*outline: 1px solid purple;*/
}
.product-range-block {
display: -webkit-flex;
display:flex;
-webkit-flex-direction: row;
flex-direction: row;
width:100%;
height:100%;
/*outline: 1px solid red;*/
}
.ref-height-block {
flex-grow:3;
/*background-color:red;*/
}
.size-chart-block {
flex-grow:9;
/*background-color:green;*/
}
.product-range-block img {
width:90%;
/*outline: 1px solid blue;*/
}
#img {
width: 100% !important;
}
/* ::::::::::::::::::::Range Slider Styles::::::::::::::::::::::::: */
.range-slider-block {
margin:0px auto;
width:90%;
}
#range-slider {
padding:40px 0px;
width:100%;
/*outline: 1px solid green;*/
}
/* Remove Range Sliders Default Styles*/
input[type=range]{
-webkit-appearance: none;
}
/* Track */
input[type=range]::-webkit-slider-runnable-track {
height: 10px;
background: #d7d7d7;
border: none;
border-radius: 6px;
}
input[type=range]:focus {
outline: none;
}
/* Thumb */
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
border: none;
height: 30px;
width: 30px;
border-radius: 50%;
background: #46947F;
margin-top: -9px;
transition: box-shadow 0.5s;
}
input[type=range]:hover::-webkit-slider-thumb {
box-shadow: 0 0 0 10pt rgba(190,190,190,0.4);
cursor:pointer;
}
/* JS Styles */
/* Changes Thumb color to darker green when mousedownn */
input[type=range].thumb-down::-webkit-slider-thumb {
background:#316557;
}
/* Changes Thumb color back to light green when mouseup */
input[type=range].thumb-up::-webkit-slider-thumb {
background:#46947F;
}
/* Changes Ring color Green */
input[type=range].hover-ring::-webkit-slider-thumb {
box-shadow: 0 0 0 6pt rgba(70,148,127,0.46);
cursor:pointer;
}
input[type=range].hover-ring-out::-webkit-slider-thumb {
box-shadow: 0 0 0 0pt rgba(0,0,0,0);
cursor:pointer;
}
/* Input Value Styles */
#slider_count {
margin:0px auto;
width:100%;
padding:0px 20px;
text-align:center;
}
#sliderPrice {
font-family: 'Roboto', sans-serif;
font-size:22px;
font-weight:600;
}
#sliderPrice span {
font-weight:600;
color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<div class="product-range-wrapper">
<div class="product-range-block">
<div class="ref-height-block">
<img src="http://svgshare.com/i/1Ba.svg" alt="Product Height Refrence" height="" width="">
</div>
<div class="size-chart-block">
<img src="http://svgshare.com/i/1Ak.svg" style='' id='img'/>
</div>
</div>
<div id="slider_count"><span id="sliderPrice">0</span></div>
<div class="range-slider-block">
<input type="range" id="range-slider" value="0.0" min="0" max="5" step="1" />
</div>
</div>
<div id="slider_count">Slider Value = <span id="sliderStatus">0</span></div>
<br/>

I managed to get a working version here: http://codepen.io/anon/pen/LyxYVY
var sheet = document.createElement('style'),
$rangeInput = $('.range'),
prefs = ['webkit-slider-runnable-track', 'moz-range-track', 'ms-track'];
document.body.appendChild(sheet);
var getTrackStyle = function (el) {
var curVal = el.value,
style = '';
for (var i = 0; i < prefs.length; i++) {
style += '.range::-' + prefs[i] + '{background: linear-gradient(to right, #34495e 0%, #34495e ' + curVal*20 + '%, #fff ' + curVal + '%, #fff 100%)}';
}
return style;
}
$rangeInput.on('input', function () {
sheet.textContent = getTrackStyle(this);
});
You can use the webkit, firefox and ms track options. However they will only work on compatible browsers.