We Keep Coding

Using javascript, how do I duplicate the behavior of a div acting as a select element when clicking outside the element?

I needed to create a pseudo-select element that displays columns for each row in the select. Since HTML does not allow the <option> tag to contain HTML, I had to take this approach.
One of the features of a normal select element is that it folds up when you click outside the element, no matter where the user clicks. It can be within the document, it can be in the address bar, or wherever. I am having trouble duplicating that behavior. Controlling inside the document is easy. But clicking in the address bar or even in the developer/console window, it doesn't work.
Please find my code below and a working fiddle.
<style>
.selectedOrder {
height: 30px;
display:none;
}
/* class applies to select element itself, not a wrapper element */
.select-css {
font-size: 12px;
font-family: sans-serif;
font-weight: 700;
color: #444;
line-height: 1.3;
padding: .6em 1.4em .5em .8em;
/* width: 100%; */
max-width: 100%; /* useful when width is set to anything other than 100% */
box-sizing: border-box;
margin: 0;
border: 1px solid #aaa;
box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
border-radius: .5em;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
background-color: #fff;
/* note: bg image below uses 2 urls. The first is an svg data uri for the arrow icon, and the second is the gradient.
for the icon, if you want to change the color, be sure to use `%23` instead of `#`, since it's a url. You can also swap in a different svg icon or an external image reference
*/
background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
background-repeat: no-repeat, repeat;
/* arrow icon position (1em from the right, 50% vertical) , then gradient position*/
background-position: right .7em top 50%, 0 0;
/* icon size, then gradient */
background-size: .65em auto, 100%;
}
/* Hide arrow icon in IE browsers */
.select-css::-ms-expand {
display: none;
}
/* Hover style */
.select-css:hover {
border-color: #888;
}
/* Focus style */
.select-css:focus {
border-color: #aaa;
/* It'd be nice to use -webkit-focus-ring-color here but it doesn't work on box-shadow */
box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
box-shadow: 0 0 0 3px -moz-mac-focusring;
color: #222;
outline: none;
}
/* Set options to normal weight */
.select-css option {
font-weight:normal;
}
/* Support for rtl text, explicit support for Arabic and Hebrew */
*[dir="rtl"] .select-css, :root:lang(ar) .select-css, :root:lang(iw) .select-css {
background-position: left .7em top 50%, 0 0;
padding: .6em .8em .5em 1.4em;
}
/* Disabled styles */
.select-css:disabled, .select-css[aria-disabled=true] {
color: graytext;
background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22graytext%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
}
.select-css:disabled:hover, .select-css[aria-disabled=true] {
border-color: #aaa;
}
</style>
<div id="orderSelectContainer">
<div id="selectedOrder" class="selectedOrder select-css" style="width: 533px; display: block;">
<div class="currentSelectedOrder" data-value="45628" style="float: left;">
<span style="float:left; min-width:200px;">Store 1</span>
<span style="float:left; min-width:50px"> 55628</span>
<span style="float:left; min-width: 150px;"> Quantity Discrepancy</span>
<span style="float:left; min-width:100px"> </span>
</div>
</div>
<div id="orderSelect" class="select-css" style="position: absolute; z-index: 1000; background-image: none; display: none;">
<div class="orderContainer">
<div class="order" data-value="45628" style="float: left; background: white;">
<span style="float:left; min-width:200px;">Store 1</span>
<span style="float:left; min-width:50px"> 55628</span>
<span style="float:left; min-width: 150px;"> Quantity Discrepancy</span>
<span style="float:left; min-width:100px"> </span>
</div>
</div>
<div class="orderContainer">
<div class="order" data-value="45536" style="float: left; background: lightblue;">
<span style="float:left; min-width:200px;">Store 2</span>
<span style="float:left; min-width:50px"> 55536</span>
<span style="float:left; min-width: 150px;"> Quantity Discrepancy</span>
<span style="float:left; min-width:100px"> Bad UPCs</span>
</div>
</div>
<div class="orderContainer">
<div class="order" data-value="45682" style="float: left; background: white;">
<span style="float:left; min-width:200px;">Store 3</span><span style="float:left; min-width:50px"> 55682</span>
<span style="float:left; min-width: 150px;"> Quantity Discrepancy</span>
<span style="float:left; min-width:100px"> Bad UPCs</span>
</div>
</div>
<div class="orderContainer">
<div class="order" data-value="45625" style="float: left; background: white;">
<span style="float:left; min-width:200px;">Store 4</span>
<span style="float:left; min-width:50px"> 55625</span>
<span style="float:left; min-width: 150px;"> Quantity Discrepancy</span>
<span style="float:left; min-width:100px"> </span>
</div>
</div>
<div class="orderContainer">
<div class="order" data-value="45556" style="float: left; background: white;">
<span style="float:left; min-width:200px;">Store 5</span>
<span style="float:left; min-width:50px"> 55556</span>
<span style="float:left; min-width: 150px;"> Quantity Discrepancy</span>
<span style="float:left; min-width:100px"> Bad UPCs</span>
</div>
</div>
</div>
<br style="clear:both"><br>
</div>
<script>
$(document).on(`click`, `.order`, function() {
if ($(this).data(`value`) !== $(`#selectedOrder >.currentSelectedOrder`).data(`value`)) {
$(`#orderContainer`).html(``);
}
$(`#selectedOrder`).html($(this).prop(`outerHTML`)).find(`.order`).removeClass(`order`).css(`background`, ``).addClass(`currentSelectedOrder`);
$(`.order`).css(`background`, `white`);
$(this).css(`background`, `lightblue`);
$(`#selectedOrder`).show();
$(`#orderSelect`).hide();
});
$(document).on(`click`, `#selectedOrder`, function(e) {
console.log(`selected order click`);
e.stopPropagation();
e.preventDefault();
$(`#orderSelect`).toggle();
});
$(document).on(`mouseenter`, `.order`, function() {
$(`.order`).css(`background`, `white`);
$(this).css(`background`, `lightblue`);
});
$(document).on(`mouseexit`, `.order`, function() {
$(this).css(`background`, `white`);
});
$(document).on(`click`, function(e) {
console.log(e.target.id);
$(`#orderSelect`).hide();
});
<script>
Fiddle: https://jsfiddle.net/schmidtc63/xu8zgpc9/

The Window: blur event can be used as it will fire any time the window loses focus.
$(window).on(`blur`, function(e) {
$(`#orderSelect`).hide();
});

Toggle switch won't return primary theme on second click

At first click it change the theme, but when I click 2nd time, nothing happen, like it's forever the second theme. So it should change theme on every click. Can anyone give me a hand, please.
let element = document.getElementById('body');
let toggle = document.getElementById('toggle-button');
toggle.addEventListener('click', function() {
if (element.className == 'dark') {
element.className = 'light';
} else {
element.className = 'light';
}
});
body {
height: 100vh;
font-family: 'Inter', sans-serif;
color: white;
margin: auto 165px;
padding-top: 50px;
background: linear-gradient(to bottom, #20222F 25%, #1D2128 75%);
}
.dark {
background: black;
}
.light {
background: burlywood;
}
<div class="toggle-button" id="toggle-button">
<span>Dark Mode</span>
<input type="checkbox" class="checkbox" id="checkbox">
<label for="checkbox" class="label">
<div class="ball"></div>
</label>
</div>

You are trying to refer to the class and the body tag as an id - document.getElementById. And I replaced your if conditions with the toggle() method, specifying the color burlywood in it, since your body already has a black color by default.
let element = document.querySelector('body');
let toggle = document.querySelector('.toggle-button');
toggle.addEventListener('click', function() {
element.classList.toggle('light')
});
body {
height: 100vh;
font-family: 'Inter', sans-serif;
color: white;
margin: auto 165px;
padding-top: 50px;
background: linear-gradient(to bottom, #20222F 25%, #1D2128 75%);
}
/*.dark {
background: black;
}*/
.light {
background: burlywood;
}
<div class="toggle-button" id="toggle-button">
<span>Dark Mode</span>
<input type="checkbox" class="checkbox" id="checkbox">
<label for="checkbox" class="label">
<div class="ball"></div>
</label>
</div>

InvalidArgumentError: Failed due to illegal value in property: 0

I am trying to program a geography quiz and it doesn't seem to work. Whenever I try to click the 'Submit' button, it prints out InvalidArgumentError: Failed due to illegal value in property: 0. do you have any ideas why this might be? Thanks in advance.
HTML:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script>
function send() {
var q1 = document.getElementById("q1").value;
var q2 = document.getElementById("q2").value;
var q3 = document.getElementById("q3").value;
var q4 = document.getElementById("q4").value;
var q5 = document.getElementById("q5").value;
var q6 = document.getElementById("q6").value;
var q7 = document.getElementById("q7").value;
var q8 = document.getElementById("q8").value;
var Email = document.getElementById("EmailAddress");
var Result = ("Results: 1. " + q1 + " 2. " + q2 + " 3. " + q3 + " 4. " + q4 + " 5. " + q5 + " 6. " + q6 + " 7. " + q7 + " 8. " + q8);
google.script.run.send(Email, Result);
}
</script>
<script src="https://ws.sharethis.com/button/buttons.js">
</script>
<script>
stLight.options({
publisher: "a788dcd1-6dfb-49ee-ba6c-3b6822d69fd8",
doNotHash: false,
doNotCopy: false,
hashAddressBar: false
});
</script>
<style>
.myButton {
-moz-box-shadow: inset 0px 39px 0px -24px #e67a73;
-webkit-box-shadow: inset 0px 39px 0px -24px #e67a73;
box-shadow: inset 0px 39px 0px -24px #e67a73;
background-color: #e4685d;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
border: 1px solid #ffffff;
display: inline-block;
cursor: pointer;
color: #ffffff;
font-family: Arial;
font-size: 15px;
padding: 6px 15px;
text-decoration: none;
text-shadow: 0px 1px 0px #b23e35;
}
.myButton:hover {
background-color: #eb675e;
}
.myButton:active {
position: relative;
top: 1px;
}
.myButton2 {
-moz-box-shadow: inset 0px -3px 7px 0px #29bbff;
-webkit-box-shadow: inset 0px -3px 7px 0px #29bbff;
box-shadow: inset 0px -3px 7px 0px #29bbff;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #2dabf9), color-stop(1, #0688fa));
background: -moz-linear-gradient(top, #2dabf9 5%, #0688fa 100%);
background: -webkit-linear-gradient(top, #2dabf9 5%, #0688fa 100%);
background: -o-linear-gradient(top, #2dabf9 5%, #0688fa 100%);
background: -ms-linear-gradient(top, #2dabf9 5%, #0688fa 100%);
background: linear-gradient(to bottom, #2dabf9 5%, #0688fa 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#2dabf9', endColorstr='#0688fa', GradientType=0);
background-color: #2dabf9;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
border: 1px solid #9591ff;
display: inline-block;
cursor: pointer;
color: #ffffff;
font-family: Arial;
font-size: 15px;
padding: 6px 23px;
text-decoration: none;
text-shadow: 0px 1px 0px #263666;
}
.myButton2:hover {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #0688fa), color-stop(1, #2dabf9));
background: -moz-linear-gradient(top, #0688fa 5%, #2dabf9 100%);
background: -webkit-linear-gradient(top, #0688fa 5%, #2dabf9 100%);
background: -o-linear-gradient(top, #0688fa 5%, #2dabf9 100%);
background: -ms-linear-gradient(top, #0688fa 5%, #2dabf9 100%);
background: linear-gradient(to bottom, #0688fa 5%, #2dabf9 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#0688fa', endColorstr='#2dabf9', GradientType=0);
background-color: #0688fa;
}
.myButton2:active {
position: relative;
top: 1px;
}
</style>
</head>
<body>
<font face="Verdana">
<h1>
Geography Quiz
</h1>
<br/>
<br/>
Your teacher's email address:
<input type="text" id="EmailAddress"/>
<br/>
<br/>
<b>
Questions
</b>
<br/>
<br/>
Q (1): Which state has a climate suitable for growing citrus fruits—California or Maine?
<br/>
A:
<input type="text" id="q1"/>
<br/>
<br/>
Q (2): The North Atlantic current brings warm waters from the tropics to the west coast of which continent?
<br/>
A:
<input type="text" id="q2"/>
<br/>
<br/>
Q (3): Which Canadian province produces more than half of the country's manufactured goods?
<br/>
A:
<input type="text" id="q3"/>
<br/>
<br/>
Q (4): To visit the ruins of Persepolis, an ancient ceremonial capital of Persia, you would have to travel to what present-day country?
<br/>
A:
<input type="text" id="q4"/>
<br/>
<br/>
Q (5): What is the term for a part of an ocean or sea that cuts far into the bordering landmass and may contain one or more bays?
<br/>
A:
<input type="text" id="q5"/>
<br/>
<br/>
Q (6): Which country has the world's largest Muslim population—Indonesia or Mexico?
<br/>
A:
<input type="text" id="q6"/>
<br/>
<br/>
Q (7): The Rio Hondo forms a boundary between Mexico and which other country?
<br/>
A:
<input type="text" id="q7"/>
<br/>
<br/>
Q (8): Which lake is on the border between Chad and Cameroon?
<br/>
A:
<input type="text" id="q8"/>
<br/>
<br/>
<button onclick="send(); document.write('Thanks! Your teacher will receive your results in an email.')" class="myButton">
Submit
</button>
<br/>
<br/>
<br/>
<br/>
<span class='st_facebook_hcount'>
</span>
<span class='st_twitter_hcount'>
</span>
<span class='st_googleplus_hcount'>
</span>
<br/>
<br/>
<footer>
<font size="1px">
Posted by: Yona Klatchko | Contact information:
<a href="mailto:yona.klatchko#gmail.com">
yona.klatchko#gmail.com
</a>
</font>
</footer>
</font>
</body>
</html>
Google-Apps-Script doGet() function:
function doGet() {
return(HtmlService.createTemplateFromFile('Index.html').evaluate().setTitle('Geography Quiz').setSandboxMode(HtmlService.SandboxMode.IFRAME));
}
Google-Apps-Script send() function:
function send(Email, Result) {
MailApp.sendEmail(Email, Result);
}

In your send() function, you are extracting and sending email dom element instead of the string value:
var Email = document.getElementById("EmailAddress"); returns the dom element.
Change this to:
var Email = document.getElementById("EmailAddress").value;
will solve the problem of invalidArgumentError.
The next problem will be you will not receive the email.
That is because in your code:
function send(Email, Result) {
MailApp.sendEmail(Email, Result);
}
You are passing two parameters but as you see in the documentation, third parameter is not optional and you need to pass the third parameter as body.
MailApp.sendEmail(Email, Result, "");
Will send the email with empty body.

Overlay particles.js on fullscreen div

I am using the following .js plugin:
https://github.com/VincentGarreau/particles.js/
With bootstrap 3's jumbotron, I have got the plugin working and my jumbotron is fullscreen when you get to my homepage (I think this is the issue) I am trying to run particles.js UNDER my jumbotron but for some reason the particles generate a whole viewport underneath my jumbotron. Like it is set up in it's own DIV after my jumbotron unit but I have <div id="particles-js"></div> wrapped around my jumbotron DIV. Which is where I get lost, the way I have it set up it should display underneath my jumbotron content and everything.
Here is my HTML:
<div id="particles-js">
<div class="jumbotron">
<div class="container center-vertically">
<div class="col-lg-6 col-lg-offset-3 text-center">
<h1>
A template with a bit of a different <strong>look & feel</strong>.
</h1>
<hr>
<p>Particles is a fun and multipurpose template, with clean & modern design <i>+</i> code.</p>
</div>
</div>
</div>
</div>
And the CSS for the jumbotron as well as the particles-js ID:
.jumbotron {
height: 100%;
width: 100%;
font-family: 'Roboto', sans-serif;
color: #fff;
padding-top: 79px;
padding-bottom: 0;
display: table;
}
#particles-js {
position: absolute;
width: 100%;
height: 100%;
background-image: url("");
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
background: #6819e8; /* Old browsers */
background: -moz-linear-gradient(left, #6819e8 0%, #7437d0 35%, #615fde 68%, #6980f2 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #6819e8 0%,#7437d0 35%,#615fde 68%,#6980f2 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #6819e8 0%,#7437d0 35%,#615fde 68%,#6980f2 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6819e8', endColorstr='#6980f2',GradientType=1 ); /* IE6-9 */
}
.center-vertically {
display: table-cell;
text-align: center;
vertical-align: middle;
}
I have also uploaded a live version so it is easier to view the problem:
http://aliensix.com/company/

I think what you need to do is make your #particles-js child of .jumbotron.
#particles-js needs to be positioned absolutely relative to the .jumbotron.
HTML
<div class="jumbotron">
<div id="particles-js"></div>
</div>
CSS
.jumbotron {
position: relative;
// Other style rules ...
}

How to update a odometer value with a button click in Javascript?

<style>
body {
font-family: "Helvetica Neue"
}
#wrapper .counter {
display:inline-block;
font-size:2em;
line-height:1.2em;
}
.counter span.digit {
background:#161616;
background: #3F3F3F; /* Old browsers */
background: linear-gradient(bottom, #0A0A0A 0%, #2B2B2B 50%, #3F3F3F 100%);
background: -o-linear-gradient(bottom, #0A0A0A 0%, #2B2B2B 50%, #3F3F3F 100%);
background: -moz-linear-gradient(bottom, #0A0A0A 0%, #2B2B2B 50%, #3F3F3F 100%);
background: -webkit-linear-gradient(bottom, #0A0A0A 0%, #2B2B2B 50%, #3F3F3F 100%);
background: -ms-linear-gradient(bottom, #0A0A0A 0%, #2B2B2B 50%, #3F3F3F 100%);
background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #0A0A0A), color-stop(0.5, #2B2B2B), color-stop(1, #3F3F3F));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#FF0A0A0A', endColorstr='#FF3F3F3F'); /* IE6 & IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#FF0A0A0A', endColorstr='#FF3F3F3F')"; /* IE8 */
zoom:1; -webkit-border-radius:0.1em;
-moz-border-radius:0.1em;
border-radius:0.1em;
background-clip:border;
color:#FFF;
display:inline-block;
float:left;
height:44px;
margin:0 1px;
overflow:hidden;
padding:0;
position:relative;
text-align:center;
}
.counter span.digit span {
line-height:44px;
position:relative;
top:0;
}
.counter span.digit hr {
border-color: transparent;
-webkit-box-shadow: inset 0 2px 1px rgba(0,0,0,0.5);
-moz-box-shadow: inset 0 2px 1px rgba(0,0,0,0.5);
box-shadow: inset 0 2px 1px rgba(0,0,0,0.5);
height: 3px;
margin: -2px 0 0 0;
position: absolute;
top: 50%;
width: 100%;
z-index: 1;
}
.counter span.separator {
display:block;
float:left;
font-family:Georgia, serif;
font-size:0.5em;
position:relative;
top:0.5em;
}
.counter span.separator hr {
display:none;
}
</style>
<div id="sidebar" class="sidebar" style="float:left;">
<div class="textwidget"><p style="text-align:left; color:#000000; padding-left: 10px; padding-right: 10px; bottom-margin: 40px;">Boomerang Giving™ is a national movement of Baby Boomers working to make our communities stronger by reinvesting what we save from senior discounts to charity.</p>
<br>
<br></div>
<div class="textwidget"><p style="color=#ff6600; text-align:center;">Since Nov. 2014:<br></p>
<span class="counter"><span class="digit">
<span title="0">0</span>
<hr>
</span>
<span class="digit">
<span title="0">0</span>
<hr>
</span>
<span class="separator">
<span title=",">,</span>
<hr>
</span>
<span class="digit">
<span title="0">0</span>
<hr>
</span>
<span class="digit">
<span title="0">0</span>
<hr>
</span>
<span class="digit">
<span title="4">4</span>
<hr>
</span>
</span>
<div style="clear:both">
<p style="color=#ff6600; text-align:center; margin-top: 10px; margin-bottom:20px;">Boomers have taken the<br>
BOOMERANG PLEDGE<br></p></div>
</div>
<div class="textwidget"><div class="aligncenter"><style>#wrapper .fusion-button.button-1{border-width:1px;color:#ffffff;border-color:#ffffff;}#wrapper .fusion-button.button-1:hover,.fusion-button.button-1:focus,.fusion-button.button-1:active{border-width:1px;border-color:#ffffff;color:#ffffff;}#wrapper .fusion-button.button-1{background: #f15a22;
background-image: -webkit-gradient( linear, left bottom, left top, from( #ef871f ), to( #f15a22 ) );
background-image: -webkit-linear-gradient( bottom, #ef871f, #f15a22 );
background-image: -moz-linear-gradient( bottom, #ef871f, #f15a22 );
background-image: -o-linear-gradient( bottom, #ef871f, #f15a22 );
background-image: linear-gradient( to top, #ef871f, #f15a22 );}#wrapper .fusion-button.button-1:hover,.button-1:focus,.fusion-button.button-1:active{background: #d17c57;
background-image: -webkit-gradient( linear, left bottom, left top, from( #e8b38f ), to( #d17c57 ) );
background-image: -webkit-linear-gradient( bottom, #e8b38f, #d17c57 );
background-image: -moz-linear-gradient( bottom, #e8b38f, #d17c57 );
background-image: -o-linear-gradient( bottom, #e8b38f, #d17c57 );
background-image: linear-gradient( to top, #e8b38f, #d17c57 );}</style><a class="button xlarge button default fusion-button button-flat button-pill button-xlarge button-default button-1 buttonshadow-1" type="button" target="_self" title="Take the Boomerang Pledge!" href="http://boomeranggiving.org/take-the-boomerang-pledge/"><span class="fusion-button-text">TAKE THE PLEDGE!</span></a></div>
<br>
<br>
</div>
<div class="textwidget"><br>
<h2 style="text-align:center; margin-top:15px; margin-bottom:5px;">Tell Your Friends About<br>BOOMERANG GIVING!</h2></div>
<!-- Simple Share Buttons Plus (v0.4.2) simplesharebuttons.com/plus --><div class="ssbp-wrap"><div class="ssbp-container" data-ssbp-share-text="" data-ssbp-url="http://boomeranggiving.org/" data-ssbp-title="Private: Take the Pledge" data-ssbp-short-url="" style="display: block;"><span class="ssbp-text">Facebook</span><span class="ssbp-total-shares ssbp-total-facebook-shares ssbp-each-share">0</span><span class="ssbp-text">Twitter</span><span class="ssbp-total-shares ssbp-total-twitter-shares ssbp-each-share">4</span><span class="ssbp-text">Linkedin</span><span class="ssbp-total-shares ssbp-total-linkedin-shares ssbp-each-share">0</span><span class="ssbp-text">Email</span></div></div> <div class="textwidget"><br>
<br>
<br>
<br>
<div style="background-color:#363839; border-top: 12px solid #e9eaee; border-bottom: 12px solid #e9eaee; border-left: 2px solid #e9eaee; border-right: 2px solid #e9eaee;">
<p style="text-align:center; line-height: 22px; color:#fff;"><strong>Let's Stay in Touch!</strong></p>
<p style="text-align:center !important; line-height: 22px; color:#fff;">Enter e-mail to stay informed about<br>BOOMERANG GIVING</p>
<!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/classic-081711.css" rel="stylesheet" type="text/css">
<style type="text/css">
#mc_embed_signup{background:none; font: 18px 'PTSansRegular', Arial, Helvetica, sans-serif; width:100%; text-align:center !important;}
/* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<div id="mc_embed_signup">
<form action="//boomeranggiving.us9.list-manage.com/subscribe/post?u=081f420813d884ff7b9270435&id=823e7c4392" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate="novalidate">
<div id="mc_embed_signup_scroll">
<div class="mc-field-group">
<label for="mce-EMAIL">Email Address </label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" aria-required="true">
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;"><input type="text" name="b_081f420813d884ff7b9270435_823e7c4392" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="SUBMIT" name="SUBMIT" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
<script type="text/javascript" src="//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js"></script><script type="text/javascript">(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
<!--End mc_embed_signup-->
<p style="font-size:13px; text-align:center;">*We will not share your e-mail.</p></div>
<br>
<br>
<br>
<br>
<br></div>
</div>
I need the following Javascript odometer to increase by 1 every time a button is clicked. This is part of a charity site and each time someone donates the odometer will update.
The following is the script:
<script>
;(function($){
/*
Function: initCounter
Initializes the scrolling counter using the value currently displayed in the element.
Parameters:
$this - the counter container
e - jQuery Event object
*/
function initCounter($this, e){
$this.find('.digit').each(function(){
var $display = $(this);
var $digit = $display.find('span');
$digit.html([0,1,2,3,4,5,6,7,8,9,0].reverse().join('<br/>'))
$digit.css({
top: '-' + (parseInt($display.height()) * (10 - parseInt($digit.attr('title')))) + 'px'
});
});
animateDigit($this.find('.digit:last'), e);
}
/*
Function: animateDigit
Moves the digit indicated by $this one step. If the end of the counter has been reach, the subsequent digit(s) will also be rotated
Parameters:
$this - digit to be rotated
e - jQuery Event object
*/
function animateDigit($this, e){
var $counter = $this.closest('.counter');
var $display = $this;
var $digit = $display.find('span');
// If we've reached the end of the counter, tick the previous digit
if(parseInt($digit.css('top')) == -1 * parseInt($display.height())){
animateDigit($display.prevAll('.digit:first'), e);
}
$digit.animate({
top: '+=' + $display.height() + 'px'
}, 500, function(){
// Repeat the animation on a semi-random interval
if($display.index('.counter .digit') == $counter.find('.digit').length - 1){
setTimeout(function(){
animateDigit($display, e);
}, Math.max(550, Math.random() * 10000));
}
// If we've reached the end of the counter, loop back to the top
if(parseInt($digit.css('top')) > -1 * parseInt($display.height())){
$digit.css({
top: '-' + (parseInt($display.height()) * 10) + 'px'
});
}
});
}
// Remove comments to animate odometer
$(function(){
initCounter($('.counter'), $.Event('load'));
});
})(jQuery);
</script>
Thank you so much in advance for any help you can give. Again this is my first time, so please go easy on me.

In jquery, binding an event to a click event on a button can be done like so:
HTML:
<button id="mybuttonID">Click me to increment odometer!</button>
JS:
$(document).ready(function() {
// wait for the dom to initialize before binding events
$('body').on('click', '#mybuttonID', animateDigit);
});
Hope this helps!

if you don't have the necessity to store it on db, i think it could help you.
http://jsbin.com/quvulabaro/2/edit?html,css,js,output