We Keep Coding

How to count clicked buttons by adding each counted click button(only one on div) together

I need to count in JS two buttons if they clicked and then lower them to one couse I need confirmation of action only once in div. For example if Button1 and Button2 is clicked then I need to have the number 1. If Button1 and Button2 and Button11 and Button22 is clicked together I need to have the number 2.
Now I just need to add two counting to each other but I don't now how to finish it.
Anyone have any solution.
I have this code(http://jsfiddle.net/rjopn78x/253/)
$(document).ready(function() {
$('#hej').removeClass('selected3').addClass('black');
});
$(document).ready(function() {
$('itemitem').removeClass('green').addClass('item');
});
$( "button#jQueryColorChange" ).click(function() {
$(this).addClass( "selected" );
$(this).text("TRENING");
$(this).addClass( "selected" );
});
$( "button#jQueryColorChange2" ).click(function() {
$(this).addClass( "selected2" );
$(this).text("ZNAM");
$(this).addClass( "selected2" );
});
$(".Button1").click(function(){
$('#itemitem').removeClass( "green" );
$('#itemitem').addClass( "orange" );
$('item').removeClass( "green" );
$('Button').removeClass( "selected3" );
$(this).addClass( "Button" );
$('#hej').addClass( "selected4" );
$('Button').removeClass( "selected" );
});
$(".Button2").click(function(){
$('#itemitem').removeClass( "orange" );
$('#itemitem').addClass( "green" );
$('item').removeClass( "orange" );
$('Button').removeClass( "selected4" );
$(this).addClass( "Button" );
$('#hej').addClass( "selected3" );
$('Button').removeClass( "selected2" );
});
$(document).ready(function() {
$('#hejnowe').removeClass('selected5').addClass('black');
});
$(document).ready(function() {
$('itemitem2').removeClass('green').addClass('item2');
});
$( "button#jQueryColorChange11" ).click(function() {
$(this).addClass( "selected" );
$(this).text("TRENING");
$(this).addClass( "selected" );
});
$( "button#jQueryColorChange22" ).click(function() {
$(this).addClass( "selected2" );
$(this).text("ZNAM");
$(this).addClass( "selected2" );
});
$(".Button11").click(function(){
$('#itemitem2').removeClass( "green" );
$('#itemitem2').addClass( "orange" );
$('item2').removeClass( "green" );
$('Button').removeClass( "selected5" );
$(this).addClass( "Button" );
$('#hejnowe').addClass( "selected6" );
$('Button').removeClass( "selected" );
});
$(".Button22").click(function(){
$('#itemitem2').removeClass( "orange" );
$('#itemitem2').addClass( "green" );
$('item2').removeClass( "orange" );
$('Button').removeClass( "selected6" );
$(this).addClass( "Button" );
$('#hejnowe').addClass( "selected5" );
$('Button').removeClass( "selected2" );
});
var count = 0;
var counta = 0;
var btn = document.getElementById("jQueryColorChange");
var btna = document.getElementById("jQueryColorChange11");
var disp = document.getElementById("display");
var dispa = document.getElementById("display2");
var dispaa = count + counta;
if(dispaa < 2){
btn.onclick = function (){
count++;
if (count > 1) {
return false;
}
disp.innerHTML = count;
}
btna.onclick = function (){
counta++;
if (counta > 1) {
return false;
}
dispa.innerHTML = counta;
}
var dispaa = count + counta;
}
$('#something').click( function() { alert(dispaa); });
div.menu {
/* To correctly align image, regardless of content height: */
top: 15px;
display: inline-block;
/* To horizontally center images and caption */
/* The width of the container also implies margin around the images. */
width: 300px;
height:50px;
background-color: blue;
text-align: center;
top: 0px;
}
div.menu2 {
/* To correctly align image, regardless of content height: */
top: 15px;
display: inline-block;
/* To horizontally center images and caption */
/* The width of the container also implies margin around the images. */
width: 300px;
height:50px;
background-color: blue;
text-align: center;
top: 0px;
}
.Button {
font-size:13px;
font-weight: bold;
width: 160px;
height: 25px;
background:grey;
color: yellow;
}
.Button1 {
text-align: center;
font-size:13px;
font-weight: bold;
width: 160px;
height: 25px;
background:orange;
color: yellow;
}
.Button2 {
font-size:13px;
font-weight: bold;
width: 160px;
height: 25px;
background:green;
color: yellow;
}
.nowe.selected3 {
color: black;
background:green;
border: solid;
}
.nowe.selected4 {
color: black;
background:orange;
border: solid;
}
.selected {
color: black;
background:orange;
border: solid;
}
.selected2 {
color: black;
background:green;
border: solid;
}
.item {
/* To correctly align image, regardless of content height: */
top: 0px;
display: inline-block;
/* To horizontally center images and caption */
/* The width of the container also implies margin around the images. */
width: 294px;
}
.ite {
background-color: white;
}
.item.orange {
background-color: orange;
}
.item.green {
background-color: green;
}
div.item:hover {
border: 3px red solid;}
}
img33 {
width: 294px;
height: 201px;
background-color: grey;
}
.caption {
text-align: center;
/* Make the caption a block so it occupies its own line. */
display: block;
color: black;
}
.Button {
font-size:13px;
font-weight: bold;
width: 160px;
height: 25px;
background:grey;
color: yellow;
}
.Button11 {
text-align: center;
font-size:13px;
font-weight: bold;
width: 160px;
height: 25px;
background:orange;
color: yellow;
}
.Button22 {
font-size:13px;
font-weight: bold;
width: 160px;
height: 25px;
background:green;
color: yellow;
}
.nowe2.selected5 {
color: black;
background:green;
border: solid;
}
.nowe2.selected6 {
color: black;
background:orange;
border: solid;
}
.selected {
color: black;
background:orange;
border: solid;
}
.selected2 {
color: black;
background:green;
border: solid;
}
.item2 {
/* To correctly align image, regardless of content height: */
top: 0px;
display: inline-block;
/* To horizontally center images and caption */
/* The width of the container also implies margin around the images. */
width: 294px;
}
.item2.orange {
background-color: orange;
}
.item2.green {
background-color: green;
}
div.item2:hover {
border: 3px red solid;}
}
img33 {
width: 294px;
height: 201px;
background-color: grey;
}
.caption {
text-align: center;
/* Make the caption a block so it occupies its own line. */
display: block;
color: black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id="display">0</span>
<span id="display2">0</span>
<a id="something">Text</a>
<div class="menu">
<button id="hej" class="nowe">GUY</button>
</div>
<div id="itemitem" class="item">
<img id="33" src="http://smartangielski.j.pl/img/1bmix.jpg"/>
<span class="caption"><u><b>Kacz</u></b>yński <u><b>łapie</u></b> motyle --- <b>catch[kacz] - łapać</b></span>
<button class="Button1" id="jQueryColorChange";>TRENING</button>
<br><br>
<button class="Button2" id="jQueryColorChange2";>ZNAM</button>
<br><br>
</div>
<div class="menu2">
<button id="hejnowe" class="nowe2">CATCH</button>
</div>
<div id="itemitem2" class="item2">
<img id="33" src="http://smartangielski.j.pl/img/1bmix.jpg"/>
<span class="caption"><u><b>Kacz</u></b>yński <u><b>łapie</u></b> motyle --- <b>catch[kacz] - łapać</b></span>
<button class="Button11" id="jQueryColorChange11" onclick="return myFunction()";;>TRENING</button>
<br><br>
<button class="Button22" id="jQueryColorChange22" onclick="return myFunction()";>ZNAM</button>
<br><br>
</div>

I found the solution:
var count = 0;
var counta = 0;
var btn = document.getElementById("jQueryColorChange");
var btna = document.getElementById("jQueryColorChange11");
var disp = document.getElementById("display");
var dispa = document.getElementById("display2");
var di = document.getElementById("display3"); ///here
btn.onclick = function (){
count++;
if (count > 1) {
return false;
}
disp.innerHTML = count;
di.innerHTML = Number(dispa.innerHTML) + Number(disp.innerHTML); ///here
}
btna.onclick = function (){
counta++;
if (counta > 1) {
return false;
}
dispa.innerHTML = counta;
di.innerHTML = Number(dispa.innerHTML) + Number(disp.innerHTML); //and here
}
Working example: http://jsfiddle.net/4szxcvan/4/
Thanks for attention :)
Here is possibility to store score in localStorage: https://jsfiddle.net/nbL9zkpu/1/

Is there a way to make this Javascript list ouput result to show images instead of numbers?

I am struggling on how to make the result output into images like: image 1, image 2 so on... Is there way to store all those images in the javascript and then show them on the result?
Here's the script of what i am talking about, please bear with me, i am learning and i am not an expert.
function proRangeSlider(sliderid, outputid, colorclass) {
var x = document.getElementById(sliderid).value;
document.getElementById(outputid).innerHTML = x;
document.getElementById(sliderid).setAttribute('class', colorclass);
updateTotal();
}
var total = 0;
function updateTotal() {
var list= document.getElementsByClassName("range");
[].forEach.call(list, function(el) {
console.log(el.value);
total += parseInt(el.value);
});
document.getElementById("n_total").innerHTML = total;
}
$.fn.serializeObject = function()
{
var o = {};
var a = this.serializeArray();
$.each(a, function() {
if (o[this.name] !== undefined) {
if (!o[this.name].push) {
o[this.name] = [o[this.name]];
}
o[this.name].push(this.value || '');
} else {
o[this.name] = this.value || '';
}
});
return o;
};
$(function() {
$('form').submit('click', function() {
$(this).hide();
$('html, body').animate({
scrollTop: $("#anchor").offset().top
}, 500);
$("#result").empty().append(
"<ul>" + Object.entries($('form').serializeObject()).map(e => `<li>${e[0]}: ${e[1]}`).join("") + "</ul>");
$(".hidden-block").show();
return false;
});
});
$(document).ready(function(){
$("#reset").click(function(){
location.reload(true);
});
});
Here's my project in case you would like to view the source: https://jsfiddle.net/archer201977/h9f6r21u/6/

I'm not sure what you mean by 'image' here, but maybe you want to display the slider within div#result?
Your code has some issues. To educate and entertain 😊 I've created a minimal reproducable example, presuming that by 'image' you mean the actual sliders. It
does not use jQuery
does not use inline event handling
does use event delegation
uses data attributes to be able to pass some state values etc.
document.addEventListener(`change`, handle);
updateTotal();
function handle(evt) {
if (evt.target.dataset.inputstate) {
return displayResult(evt.target);
}
}
function displayResult(origin) {
proRangeSlider(origin, ...origin.dataset.inputstate.split(`,`));
let totalValues = [];
document.querySelectorAll(`[data-inputstate]`).forEach(range => {
const rangeClone = createClone(range);
totalValues.push(`<li><div>${rangeClone}</div><div>${
range.dataset.name}: ${range.value}</div></li>`);
});
totalValues.push(`<li><div><b>Total: ${
document.querySelector(`#n_total`).textContent}</b></div></li>`);
document.querySelector(`#result`).innerHTML = `<ul>${totalValues.join(``)}</ul>`;
}
function createClone(fromRange) {
const clone = fromRange.cloneNode();
clone.setAttribute(`value`, fromRange.value);
clone.id = ``;
clone.removeAttribute(`data-inputstate`);
return clone.outerHTML;
}
function proRangeSlider(origin, outputId, colorclass) {
origin.closest(`div`).querySelector(`#${outputId}`).textContent = origin.value;
origin.setAttribute('class', colorclass);
updateTotal();
}
function updateTotal() {
let total = 0;
[...document.querySelectorAll(`[data-inputstate]`)]
.forEach(elem => total += +elem.value);
document.getElementById("n_total").textContent = total;
}
body,
html {
margin: 10px;
}
#proRangeSlider {
border: 1px solid #CCC;
padding: 0;
}
div {
background: #f1f1f1;
border-bottom: 1px dotted #666;
padding: 2px 0px;
}
div:last-child {
border: none;
}
input {
-webkit-appearance: none;
width: 160px;
height: 15px;
background: linear-gradient(to right, #16a085 0%, #16a085 100%);
background-size: 150px 10px;
background-position: center;
background-repeat: no-repeat;
overflow: hidden;
outline: none;
vertical-align: middle;
}
input::-webkit-slider-thumb {
-webkit-appearance: none;
width: 15px;
height: 15px;
border-radius: 50%;
background: #27ae60;
position: relative;
z-index: 3;
}
#total {
padding-left: 7px;
}
.blue::-webkit-slider-thumb {
background: #2980b9;
}
.orange::-webkit-slider-thumb {
background: #d35400;
}
#result {
margin-bottom: 0;
border: none;
padding: 5px;
background-color: transparent;
}
#result ul {
margin-left: -1.5rem;
}
#result ul li div {
display: inline-block;
vertical-align: middle;
background-color: transparent;
border: none;
padding: 0 3px;
}
#result ul li div input[type=range] {
height: auto;
margin-left: -0.4rem;
}
#result ul li {
text-align: left;
}
<div id="proRangeSlider">
<div id="total">TOTAL: <span id="n_total"></span></div>
<div>
<input type="range" data-name="Cost per day" class="range orange" value="20" data-inputstate="output1,orange">
<output id="output1">20</output>
</div>
<div>
<input type="range" data-name="Number of days" value="50" class="blue range" data-inputstate="output2,blue">
<output id="output2">50</output>
</div>
</div>
<div id="result"></div>
But ... you meant to create an image from some number, ok. This snippet may help. It uses an image sprite for the numbers.
const createNumber = nr => {
const numbers = `zero,one,two,three,four,five,six,seven,eight,nine`
.split(`,`);
return [...`${nr}`]
.map(n => `<div class="number ${numbers[n]}"></div>`)
.join(``);
}
const example = nr => document.body.insertAdjacentHTML(
`beforeend`,
`<div class="example">${nr} => ${createNumber(nr)}</p>`);
example(1234567890);
example(233);
example(732);
example(1854);
example(42);
.example {
height: 32px;
}
.example .number {
vertical-align: middle;
}
.number {
background-image: url('//sdn.nicon.nl/tests/numbers.png');
background-repeat: no-repeat;
width: 14px;
height: 16px;
display: inline-block;
border: 1px solid #aaa;
padding: 1px;
margin: 0 1px
}
.number.zero {
background-position: 3px 1px;
}
.number.one {
background-position: -25px 1px;
}
.number.two {
background-position: -51px 1px
}
.number.three {
background-position: -77px 1px
}
.number.four {
background-position: -103px 1px
}
.number.five {
background-position: -129px 1px
}
.number.six {
background-position: -155px 1px
}
.number.seven {
background-position: -183px 1px
}
.number.eight {
background-position: -209px 1px
}
.number.nine {
background-position: -235px 1px
}

How to get information of a particular WMS layer and display it as a popup using Openlayers3

I am trying display two WMS layers,in which I have succeeded.Next is to get information of a particular WMS layer and display it as a pop up.I am using Openlayers3 with Geoserver.
First layer is 'Village Boundary' which is base layer and the second one is 'OSM Grids'.
These grids are numbered from 1 to 87. When I click on each grid , it should display its attribute information like grid number,map number etc. as a pop up.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="http://localhost:8080/geoserver/openlayers3/ol.css" type="text/css">
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<style>
.ol-zoom {
top: 52px;
}
.ol-toggle-options {
z-index: 1000;
background: rgba(255,255,255,0.4);
border-radius: 4px;
padding: 2px;
position: absolute;
left: 8px;
top: 8px;
}
#updateFilterButton, #resetFilterButton {
height: 22px;
width: 22px;
text-align: center;
text-decoration: none !important;
line-height: 22px;
margin: 1px;
font-family: 'Lucida Grande',Verdana,Geneva,Lucida,Arial,Helvetica,sans-serif;
font-weight: bold !important;
background: rgba(0,60,136,0.5);
color: white !important;
padding: 2px;
}
.ol-toggle-options a {
background: rgba(0,60,136,0.5);
color: white;
display: block;
font-family: 'Lucida Grande',Verdana,Geneva,Lucida,Arial,Helvetica,sans-serif;
font-size: 19px;
font-weight: bold;
height: 22px;
line-height: 11px;
margin: 1px;
padding: 0;
text-align: center;
text-decoration: none;
width: 22px;
border-radius: 2px;
}
.ol-toggle-options a:hover {
color: #fff;
text-decoration: none;
background: rgba(0,60,136,0.7);
}
body {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: small;
}
iframe {
width: 100%;
height: 250px;
border: none;
}
/* Toolbar styles */
#toolbar {
position: relative;
padding-bottom: 0.5em;
}
#toolbar ul {
list-style: none;
padding: 0;
margin: 0;
}
#toolbar ul li {
float: left;
padding-right: 1em;
padding-bottom: 0.5em;
}
#toolbar ul li a {
font-weight: bold;
font-size: smaller;
vertical-align: middle;
color: black;
text-decoration: none;
}
#toolbar ul li a:hover {
text-decoration: underline;
}
#toolbar ul li * {
vertical-align: middle;
}
#map {
clear: both;
position: relative;
width: 600px;
height: 800px;
border: 1px solid black;
bottom:802px;
left:450px;
}
img{
position: relative;
width: 444px;
height: 775px;
top:5px;
}
#legend {
position: relative;
width: 444px;
height: 800px;
border: 1px solid black;
top:0px;
}
#wrapper {
width: 444px;
position: relative;
bottom:802px;
left:450px;
}
#location {
bottom:802px;
left:450px;
}
/* Styles used by the default GetFeatureInfo output, added to make IE happy */
table.featureInfo, table.featureInfo td, table.featureInfo th {
border: 1px solid #ddd;
border-collapse: collapse;
margin: 0;
padding: 0;
font-size: 90%;
padding: .2em .1em;
}
table.featureInfo th {
padding: .2em .2em;
font-weight: bold;
background: #eee;
}
table.featureInfo td {
background: #fff;
}
table.featureInfo tr.odd td {
background: #eee;
}
table.featureInfo caption {
text-align: left;
font-size: 100%;
font-weight: bold;
padding: .2em .2em;
}
</style>
<script src="http://localhost:8080/geoserver/openlayers3/ol.js" type="text/javascript"></script>
<title>OpenLayers map preview</title>
</head>
<body>
<div id="legend">
<img src="Legend.PNG.jpg">
</div>
<div id="map">
<input type="checkbox" value="Village Boundary" checked>Village Boundary<br>
<input type="checkbox" value="OSM Grids">OSM Grids<br>
</div>
<div id="wrapper">
<div id="location"></div>
<div id="scale"></div>
</div>
<script type="text/javascript">
var pureCoverage = false;
// if this is just a coverage or a group of them, disable a few items,
// and default to jpeg format
var format = 'image/png';
var bounds = [472440.0520989996, 911801.0984444692,
768802.9061656371, 1424302.9894040015];
if (pureCoverage) {
document.getElementById('antialiasSelector').disabled = true;
document.getElementById('jpeg').selected = true;
format = "image/jpeg";
}
var supportsFiltering = true;
if (!supportsFiltering) {
document.getElementById('filterType').disabled = true;
document.getElementById('filter').disabled = true;
document.getElementById('updateFilterButton').disabled = true;
document.getElementById('resetFilterButton').disabled = true;
}
var mousePositionControl = new ol.control.MousePosition({
className: 'custom-mouse-position',
target: document.getElementById('location'),
coordinateFormat: ol.coordinate.createStringXY(5),
undefinedHTML: ' '
});
var projection = new ol.proj.Projection({
code: 'EPSG:32643',
units: 'm',
axisOrientation: 'neu',
global: false
});
var villageboundary = new ol.layer.Image({
title:'Village Boundary',
type: 'base',
label:'Village Boundary',
source: new ol.source.ImageWMS({
ratio: 1,
url: 'http://localhost:8080/geoserver/geog585/wms',
params: {'FORMAT': format,
'VERSION': '1.1.1',
"LAYERS": 'geog585:Village_Boundary',
"exceptions": 'application/vnd.ogc.se_inimage',
}
})
});
var osmgrid = new ol.layer.Image({
title:'OSM Grid',
visible: false,
label:'OSM Grid',
source: new ol.source.ImageWMS({
ratio: 1,
url: 'http://localhost:8080/geoserver/geog585/wms',
params: {'FORMAT': format,
'VERSION': '1.1.1',
"LAYERS": 'geog585:OSM_Grid_25000_include_hazard_line',
"exceptions": 'application/vnd.ogc.se_inimage',
}
})
});
//Tile OSM
var tiledOSM = new ol.layer.Tile({
title:'OSM Grids',
visible: false,
label:'OSM Grids',
source: new ol.source.TileWMS({
url: 'http://localhost:8080/geoserver/geog585/wms',
params: {'FORMAT': format,
'VERSION': '1.1.1',
tiled: true,
"LAYERS": 'geog585:OSM_Grid_25000_include_hazard_line',
"exceptions": 'application/vnd.ogc.se_inimage',
tilesOrigin: 472849.4548000004 + "," + 912420.9497999996
}
})
});
//Tile OSM
var map = new ol.Map({
controls: ol.control.defaults({
attribution: false
}).extend([mousePositionControl]),
target: 'map',
layers: [
villageboundary,
tiledOSM
],
view: new ol.View({
projection: projection
})
});
map.getView().on('change:resolution', function(evt) {
var resolution = evt.target.get('resolution');
var units = map.getView().getProjection().getUnits();
var dpi = 25.4 / 0.28;
var mpu = ol.proj.METERS_PER_UNIT[units];
var scale = resolution * mpu * 39.37 * dpi;
if (scale >= 9500 && scale <= 950000) {
scale = Math.round(scale / 1000) + "K";
} else if (scale >= 950000) {
scale = Math.round(scale / 1000000) + "M";
} else {
scale = Math.round(scale);
}
document.getElementById('scale').innerHTML = "Scale = 1 : " + scale;
});
map.getView().fit(bounds, map.getSize());
var changeLayer = function changeLayer(ev) {
var val = $(this).val();
var checked = $(this).is(':checked');
map.getLayers().forEach(function (layer) {
if (layer.get('label') === val) {
layer.setVisible(checked);
}
});
};
$('input').each(function (){ $(this).on('change', changeLayer); });
</script>
</body>
</html>
Can anybody help me with this.

The above requirement worked when I added the below given code snippet.
var container = document.getElementById('popup');
var content = document.getElementById('popup-content');
var closer = document.getElementById('popup-closer');
var overlay = new ol.Overlay({
element: container,
autoPan: true,
autoPanAnimation: {
duration: 250
}
});
closer.onclick = function() {
overlay.setPosition(undefined);
closer.blur();
return false;
};
map.addOverlay(overlay);
map.on('singleclick', function(evt) {
var view = map.getView();
var viewResolution = /** #type {number} */ (map.getView().getResolution());
var url = tiledOSM.getSource().getGetFeatureInfoUrl(evt.coordinate, view.getResolution(), view.getProjection(), {
'INFO_FORMAT': 'application/json',
'PIXELRADIUS': 5,
'FEATURE_COUNT': 10
});
if (url) {
var parser = new ol.format.GeoJSON();
$.ajax({
url: url,
crossOrigin: true,
dataType: 'json',
jsonpCallback: 'parseResponse'
}).then(function(response) {
var result = parser.readFeatures(response);
if (result.length) {
var info = [];
for (var i = 0, ii = result.length; i < ii; ++i) {
info.push(result[i].get('Map_No'));
}
content.innerHTML =info.join;
}
});
}
overlay.setPosition(evt.coordinate);
});
Hence,I am marking this as answer.

Can't seem to integrate my CSS and JS/Jquery files in my HTML

Pretty new to coding, was just wondering if maybe someone could revise why my .CSS & .JS files are not linking with my HTML?
Here are the lines & this is what it's supposed to look like: https://codepen.io/MatteoV/pen/aGqQBe
I will also be trying to implement this code into Webflow, would anyone know where I can implement these lines?
Thank you guys for the help! :D
jQuery(document).ready(function($) {
// Terms & Discounts
var termArr = [1, 12, 24, 36],
discArr = [0, 0.2, 0.25, 0.3];
// Custom Region Pricing
var prices = {
ca: [0.12, 0.11, 0.1],
az: [0.12, 0.11, 0.1],
va: [0.12, 0.11, 0.1],
sg: [0.2, 0.19, 0.18],
th: [0.2, 0.19, 0.18],
hk: [0.2, 0.19, 0.18]
};
// Exchange Rates & Symbols
var exchange = {
rates: {
USD: 1,
CNY: 6.92,
THB: 35
},
symbol: {
USD: "$",
CNY: "¥",
THB: "฿"
}
};
// Total TB Slider
$("#gb-slider")
.slider({
range: "min",
value: 2000,
step: 500,
max: 10000,
min: 1000,
slide: function(event, ui) {
if (ui.value < 10000) {
$(".contact-us").fadeOut(200, function() {
$(".price-wrap").fadeIn(200);
});
var term = $("#term-slider").slider("option", "value");
$('[name="qty"]').val(ui.value);
$("#total-price .price").text(calcPrice(ui.value, term));
$("#price-per-gb .price").html(pricePerGB(ui.value).toFixed(2));
$('[name="unit_price"]').val(pricePerGB(ui.value).toFixed(2));
} else {
$(".price-wrap").fadeOut(200, function() {
$(".contact-us").fadeIn(200);
});
}
}
})
.each(function() {
var opt = $(this).data().uiSlider.options;
var vals = (opt.max - opt.min) / 1000;
for (var i = 0; i <= vals; i++) {
var el = $('<label class="value-label">' + (i + 1) + "TB</label>").css(
"left",
"calc(" + i / vals * 100 + "% - 10px)"
);
$(this).append(el);
}
});
// Contract Slider
$("#term-slider")
.slider({
range: "min",
max: termArr.length - 1,
slide: function(event, ui) {
var size = $("#gb-slider").slider("option", "value");
$('[name="period"]').val(termArr[ui.value]);
$("#total-price .price").text(calcPrice(size, ui.value));
$('[name="discount_term"]').val(discArr[ui.value]);
}
})
.each(function() {
var opt = $(this).data().uiSlider.options;
var vals = opt.max - opt.min;
for (var i = 0; i <= vals; i++) {
if (i == 0) {
var el = $('<label class="value-label">Monthly</label>').css("left", "0%");
} else {
var el = $(
'<label class="value-label">' + termArr[i] + " Mo.</label>"
).css("left", i / vals * 95 + "%");
}
$(this).append(el);
}
});
// Calcutate Price Per GB
function pricePerGB(value) {
var region = $("#region").val();
if (value <= 2000) {
return prices[region][0];
} else if (value <= 4999) {
return prices[region][1];
} else if (value <= 10000) {
return prices[region][2];
} else {
return false;
}
}
// Calculate Total Price
function calcPrice(size, term) {
var basePrice = size * pricePerGB(size),
discount = basePrice - basePrice * discArr[term],
rate = exchange.rates[$("#currency-select").val()],
price = (discount * rate).toFixed(2);
return price;
}
// Changing Currencies
$("#currency-select, #region").change(function() {
var pricePer = pricePerGB($("#gb-slider").slider("option", "value")).toFixed(
2
);
$(".currency-symbol").text(exchange.symbol[$(this).val()]);
$("#total-price .price").text(
calcPrice(
$("#gb-slider").slider("option", "value"),
$("#term-slider").slider("option", "value")
)
);
$('[name="unit_price"]').val(pricePer);
$("#price-per-gb .price").text(pricePer);
});
// Load price when page does
$("#total-price .price").text(
calcPrice(
$("#gb-slider").slider("option", "value"),
$("#term-slider").slider("option", "value")
)
);
$("#price-per-gb .price").html(
pricePerGB($("#gb-slider").slider("option", "value")).toFixed(2)
);
$('[name="discount_term"]').val(
discArr[$("#term-slider").slider("option", "value")]
);
$("#backup-form").submit(function(e) {
console.log($(this).serialize());
e.preventDefault();
});
});
#import "susy"; Add
#import "breakpoint"; Add
#import "color-schemer"; Add
#import "bourbon#5.*"; Add
#import "neat#2.*"; Add
#import "modularscale#3.*";
*,
*:before,
*:after {
box-sizing: border-box;
}
$yellow: #fdb022;
$yellow-alt: #eea61e;
$grey: #e6e6e6;
html,
body {
font: 16px "Open Sans", Arial, sans-serif;
}
#veeam-sliders {
width: 72em;
margin: 40px auto 0;
h3 {
font-weight: 600;
font-size: 21px;
margin: 0;
}
label {
font: normal 16px/1 "Open Sans", Arial, sans-serif;
text-transform: uppercase;
color: #aaa;
}
button,
.btn {
text-decoration: none;
border: none;
background: $yellow;
color: #fff;
text-transform: uppercase;
font: 700 14px "Open Sans", Arial, sans-serif;
padding: 8px 20px;
border-radius: 3px;
box-shadow: 0 2px 0 0 darken($yellow-alt, 5%);
cursor: pointer;
&:active {
position: relative;
top: 2px;
box-shadow: none;
}
}
.select-wrap {
margin-bottom: 40px;
margin-left: 15px;
display: inline-block;
position: relative;
&:after {
position: absolute;
top: 8px;
right: 10px;
content: "▾";
color: black;
display: block;
z-index: -1;
font-size: 20px;
}
#region,
#currency-select {
padding: 10px 30px 10px 10px;
font-size: 16px;
border-radius: 5px;
border: 1px solid #ccc;
margin: 0;
appearance: none;
position: relative;
background: rgba(255, 255, 255, 0);
color: #222;
&:hover {
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15);
}
}
}
.sliders-wrap {
width: 70%;
padding-right: 100px;
float: left;
.slider {
position: relative;
margin: 25px 0;
}
#gb-slider {
margin-bottom: 80px;
}
}
.total-wrap {
width: 30%;
float: left;
button {
margin-top: 40px;
}
.price-wrap {
h3 {
margin-bottom: 10px;
}
#total-price {
font-size: 42px;
line-height: 1.15;
color: #999;
border-bottom: 1px solid $grey;
padding: 0 0 20px;
margin: 0 0 10px;
span {
color: #999;
}
}
#price-per-gb {
color: #222;
font-size: 21px;
clear: both;
.price {
color: #222;
}
}
}
.veeam-provider {
float: right;
}
}
.value-label {
white-space: nowrap;
position: absolute;
top: 25px;
font-size: 15px;
color: #666;
text-transform: none;
font-weight: normal;
}
.contact-us {
margin-top: 25px;
display: none;
h3 {
margin: 0;
line-height: 1;
}
p {
margin: 10px 0 25px;
}
}
/* jQuery UI Slider Theming */
.ui-slider,
.ui-slider-handle,
.ui-slider-range {
border-radius: 500px;
}
.ui-slider {
background: $grey;
border: none;
height: 1em;
}
.ui-slider-handle {
width: 1.8em;
height: 1.8em;
top: -0.4em;
margin-left: -0.7em;
cursor: grab;
background: $yellow-alt;
border-color: $yellow-alt;
}
.ui-slider-range {
background: $yellow;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<!DOCTYPE html>
<html lang "en">
<head>
<meta charset="utf-8">
<title>...</title>
<link rel="stylesheet" type="text/css" href="https://raw.githubusercontent.com/Crackerzzzz/slider/master/slider.css" />
<script type='text/javascript' src='https://raw.githubusercontent.com/Crackerzzzz/slider/master/Slider.js'></script>
</head>
<body>
<section id="veeam-sliders" class="clearfix">
<form id="backup-form">
<div class="sliders-wrap">
<label>Select Data Center:</label>
<div class="select-wrap">
<select id="region" name="idc">
<option value="ca">Los Angeles, CA</option>
<option value="az">Phoenix, AZ</option>
<option value="va">Ashburn, VA</option>
<option value="sg">Singapore, SG</option>
<option value="th">Bangkok, TH</option>
<option value="hk">Hong Kong, HK</option>
</select>
</div>
<div class="tb-wrap">
<h3>Total GB to Backup</h3>
<div id="gb-slider" class="slider"></div>
<input type="hidden" name="qty" value="2000">
</div>
<div class="contract-wrap">
<h3>Contract Term Length</h3>
<div id="term-slider" class="slider"></div>
<input type="hidden" name="period" value="1">
</div>
</div>
<div class="total-wrap">
<label>Select Currency:</label>
<div class="select-wrap">
<select id="currency-select">
<option value="USD">USD</option>
<option value="CNY">CNY</option>
<option value="THB">THB</option>
</select>
</div>
<div class="price-wrap">
<h3>Total:</h3>
<div id="total-price">
<span class="currency-symbol">$</span><span class="price">000.00</span> /m.
</div>
<div id="price-per-gb">
<span>$</span><span class="price">0.00</span> /GB
<input type="hidden" name="unit_price" value="0.12">
</div>
<button type="submit">Add To Cart</button>
<img class="veeam-provider" src="/wp-content/uploads/veeam-gold-provider_x100.jpg">
</div>
<div class="contact-us">
<h3>Contact Us</h3>
<p>If you're interested in enterprise backup with over 10TB of space, please contact our sales agent for a custom quote based on your needs.</p>
Contact Us
</div>
</div>
<input name="discount_term" type="hidden">
<input name="id" value="621" type="hidden">
<input name="option" value="7688:53546" type="hidden">
</form>
</section>
</body>
</html>
Note: the css is messed up due to not having sass installed.

Javascript Todolist category if else statement

Hello I'm stuck on how to add category for my to do list. When you click on Button of category need change class name. I don't understand how to correctly write if/else statement when button is clicked.
plan how it need to work
Write task name
Choose Category
Add new task
May be somebody can help me out ore give some advice how to solve this problem!
Sorry for my english and if my question is to badly explained!
var toDoList = function() {
var addNewTask = function() {
var input = document.getElementById("taks-input").value,
itemTexts = input,
colA = document.getElementById('task-col-a').children.length,
colB = document.getElementById('task-col-b').children.length,
taskBoks = document.createElement("div"),
work = document.getElementById("work"),
Category = "color-2",
taskCount = 1;
if (work.onclick === true) {
var Category = "color";
}
taskBoks.className = "min-box";
taskBoks.innerHTML = '<div class="col-3 chack" id="task_' + (taskCount++) + '"><i class="fa fa-star"></i></div><div class="col-8 task-text" id="taskContent"><p>' + itemTexts + '</p><span id="time-now"></span></div><div class="col-1 ' + (Category) + '"></div>'
if (colB < colA) {
var todolist = document.getElementById("task-col-b");
} else {
var todolist = document.getElementById("task-col-a");
}
//todolist.appendChild(taskBoks);
todolist.insertBefore(taskBoks, todolist.childNodes[0]);
},
addButton = function() {
var btn2 = document.getElementById("add-task-box");
btn2.onclick = addNewTask;
};
addButton()
}
toDoList();
p {
padding: 20px 20px 20px 45px;
}
.chack {
background-color: #4c4b62;
height: 100%;
width: 40px;
}
.task-text {
background-color: #55566e;
height: 100%;
width: 255px;
}
.color {
width: 5px;
height: 100%;
background-color: #fdcd63;
float: right;
}
.color-2 {
width: 5px;
height: 100%;
background-color: red;
float: right;
}
.color-3 {
width: 5px;
height: 100%;
background-color: purple;
float: right;
}
.task {
height: 100px;
width: 300px;
border: 1px solid #fff;
float: left;
}
.chack,
.task-text {
float: left;
}
.add-new-task {
margin-bottom: 50px;
height: 80px;
width: 588px;
background-color: rgb(85, 86, 110);
padding-top: 30px;
padding-left: 15px;
}
.min-box {
height: 100px;
border-bottom: 1px solid #fff;
}
.center {
padding-top: 20px;
padding-left: 50px;
}
.fa-star {
padding-left: 14px;
padding-top: 100%;
}
#add-task-box {
float: right;
margin-right: 10px;
margin-top: -7px;
border: none;
background-color: rgb(255, 198, 94);
padding: 10px;
}
#taks-input {
height: 30px;
width: 350px;
margin-top: -7px;
}
.category {
margin-top: 10px;
}
<div class="container">
<div class="add-new-task">
<input type="text" id="taks-input">
<button id="add-task-box">Add New Task box</button>
<div class="category">
<button class="catBtn" id="work">Work</button>
<button class="catBtn" id="home">Home</button>
<button class="catBtn" id="other">Other</button>
</div>
</div>
<div class="lg-task" id="bigTask"></div>
<div class="task" id="task-col-a"></div>
<div class="task" id="task-col-b"></div>
</div>

you need to bind click event to your buttons and store that value in Category, so in you js add this
var toDoList = function() {
// set to default
var Category = "color-3";
// attach event to buttons
var catButtons = document.getElementsByClassName("catBtn");
// assign value based on event
var myCatEventFunc = function() {
var attribute = this.getAttribute("id");
if (attribute === 'work') {
Category = 'color';
} else if (attribute === 'home') {
Category = 'color-2';
}
};
for (var i = 0; i < catButtons.length; i++) {
catButtons[i].addEventListener('click', myCatEventFunc, false);
}
Demo: Fiddle
and remove this code from addNewTask function
if (work.onclick === true) {
var Category = "color";
}

It is a bit hard to understand what you are doing, what you are going for (a module of some kind?). You were not that far away from a working state.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Task</title>
<style>
p {
padding: 20px 20px 20px 45px;
}
.chack {
background-color: #4c4b62;
height: 100%;
width: 40px;
}
.task-text {
background-color: #55566e;
height: 100%;
width: 255px;
}
.color {
width: 5px;
height: 100%;
background-color: #fdcd63;
float: right;
}
.color-2 {
width: 5px;
height: 100%;
background-color: red;
float: right;
}
.color-3 {
width: 5px;
height: 100%;
background-color: purple;
float: right;
}
.task {
height: 100px;
width: 300px;
border: 1px solid #fff;
float: left;
}
.chack,
.task-text {
float: left;
}
.add-new-task {
margin-bottom: 50px;
height: 80px;
width: 588px;
background-color: rgb(85, 86, 110);
padding-top: 30px;
padding-left: 15px;
}
.min-box {
height: 100px;
border-bottom: 1px solid #fff;
}
.center {
padding-top: 20px;
padding-left: 50px;
}
.fa-star {
padding-left: 14px;
padding-top: 100%;
}
#add-task-box {
float: right;
margin-right: 10px;
margin-top: -7px;
border: none;
background-color: rgb(255, 198, 94);
padding: 10px;
}
#taks-input {
height: 30px;
width: 350px;
margin-top: -7px;
}
.category {
margin-top: 10px;
}
</style>
<script>
var toDoList = function() {
var addNewTask = function() {
var input = document.getElementById("taks-input").value,
itemTexts = input,
colA = document.getElementById('task-col-a').children.length,
colB = document.getElementById('task-col-b').children.length,
taskBoks = document.createElement("div"),
work = document.getElementById("work"),
Category = "color-2",
taskCount = 1;
if (work.onclick === true) {
Category = "color";
}
taskBoks.className = "min-box";
taskBoks.innerHTML = '<div class="col-3 chack" id="task_'
+ (taskCount++) +
'"><i class="fa fa-star"></i></div><div class="col-8 task-text" id="taskContent"><p>'
+ itemTexts +
'</p><span id="time-now"></span></div><div class="col-1 '
+ (Category) + '"></div>'
if (colB < colA) {
var todolist = document.getElementById("task-col-b");
} else {
var todolist = document.getElementById("task-col-a");
}
//todolist.appendChild(taskBoks);
todolist.insertBefore(taskBoks, todolist.childNodes[0]);
},
// I don't know what to do with that?
addButton = function() {
var btn2 = document.getElementById("add-task-box");
btn2.onclick = addNewTask();
};
// return the stuff you want to have public
return {
addNewTask:addNewTask
};
}
var f;
// wait until all HTML is loaded and put the stuff from above into the variable `f`
// you can call it with f.someFunction() in your case f.addNewTask()
window.onload = function(){
f = toDoList();
}
</script>
</head>
<body>
<div class="container">
<div class="add-new-task">
<input type="text" id="taks-input">
<button id="add-task-box" onclick="f.addNewTask()">Add New Task box</button>
<div class="category">
<button class="catBtn" id="work" >Work</button>
<button class="catBtn" id="home">Home</button>
<button class="catBtn" id="other">Other</button>
</div>
</div>
<div class="lg-task" id="bigTask"></div>
<div class="task" id="task-col-a"></div>
<div class="task" id="task-col-b"></div>
</div>
</body>
</html
I hope you understood what I did?