Hi,
I'm having issues with the JS of the below custom quantity selector component not working on one of my site pages. The code works fine on Code Pen but as soon as I put into the relevant page using the Code module, the buttons don't have any affect on the QTY number. Looks like the JS is not speaking to the component.
Any help would be great!
I put all of the code below in the code module on the specific page I want it to appear on (not the index file).
I've put the CSS in <style> tags and JS in <script> tags but no joy.
Code below:
<form>
<fieldset>
<input type="button" value="-" class="decrease" />
<input type="text" id="three-max" value="0" disabled />
<input type="button" value="+" class="increase" />
</fieldset>
</form>
* {
margin: 0;
padding: 0;
text-align: center;
}
body {
background-color: #F4F3F3;
font: normal 14px/100% Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
color: #444;
}
form {
background-color: #fff;
width: 300px;
padding: 10px;
margin: 20px auto;
-webkit-box-shadow: 0 0 5px rgba(170, 169, 169, .3);
box-shadow: 0 0 5px rgba(170, 169, 169, .3);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
legend {
padding-bottom: 14px;
text-align: left;
}
fieldset {
margin-bottom: 14px;
padding-bottom: 14px;
}
fieldset, input[type="button"] {
border: 0;
}
input[type="button"] {
background-color: #ED5A48;
color: #fff;
cursor: pointer;
width: 24px;
height: 24px;
}
input[type="text"] {
border: 1px solid #F4F3F3;
height: 22px;
width: 50px;
}
$(function () {
set_($('#three-max'), 2); //return 3 maximum digites
function set_(_this, max) {
var block = _this.parent();
block.find(".increase").click(function () {
var currentVal = parseInt(_this.val());
if (currentVal != NaN && (currentVal + 1) <= max) {
_this.val(currentVal + 1);
}
});
block.find(".decrease").click(function () {
var currentVal = parseInt(_this.val());
if (currentVal != NaN && currentVal != 0) {
_this.val(currentVal - 1);
}
});
}
});