We Keep Coding

How to have a table appear on hover

I'm coding this price calculator and I want to have a table to appear with a tiered pricing when hovering over "info". This is the tiered pricing:
var pricingbackendzr = {4:35,10:32.5,20:30};
var pricingbackendz = {4:20,10:18,20:16};
var pricingapp = {10:7.5,25:7,50:6.5,75:6,1000:5.5};
I tried putting it in a table but when i hovered over it nothing would appear.
//diese funktion wird ausgelöst wenn das html-dokument vollstaendig geladen wird
document.addEventListener("DOMContentLoaded", function(event) {
var updatecolor = document.querySelectorAll('.updatecolor');
document.querySelectorAll(".updatecolor").forEach(updateinputs =>
updateinputs.addEventListener("input", function (){
var percent = calcPercent(this.value,this.min,this.max);
const bg = getComputedStyle(this).getPropertyValue('--background');
const slider = getComputedStyle(this).getPropertyValue('--slider');
var colorchanger = this.getAttribute('rangecolorid');
var sliderselect = document.querySelector('#'+colorchanger);
sliderselect.setAttribute(
'style',
` background:linear-gradient(to right,${slider},${slider} ${percent}%,${bg} ${percent}%) `
)
})
);
});
//funktion damit der Slider sich beim eingeben vom input field bewegt
function updateUser(val, inputtype) {
if (inputtype == 'Appuserrangecolor') {
document.getElementById('AppInput').value = val;
}
if (inputtype == 'AppInput') {
document.getElementById('Appuserrangecolor').value = val;
}
if (inputtype == 'Backendrangecolor') {
document.getElementById('BackendInput').value = val;
}
if (inputtype == 'BackendInput') {
document.getElementById('Backendrangecolor').value = val;
}
calcSum();
}
//Calculates the percentage of the currentval with the base of a min and max value
function calcPercent(curval, min, max){
return ((curval - min) / (max - min))*100;
}
//Rechnung für die Anzahl von Backend und App-Benutzern
function calcSum() {
var preisproapp = document.querySelector('.proapp');
var backendpreissum = document.querySelector('.backendpreissum');
var appstk = document.querySelector('.appanzahl');
var preisprobackend = document.querySelector('.probackend');
var jaehrlich = document.querySelector('.jaehrlichsum');
var summetext = document.querySelector('.summe');
var rabatt = document.querySelector('.rabattsum');
var backendanzahl = document.querySelector(".backenduser").value;
var appanzahl = document.querySelector(".appuser").value;
var paymenttype = document.querySelector("#zahlrythmus").value;
var backendtype = document.querySelector("#backendfunktion").value;
var percent = 1; //Standardvalue for yearly
if(paymenttype == "M"){
percent = 1.2; //standardvalue for monthly
}
//Preisstaffelung für app und backend
apppreis = 7.5;
backendpreis = 35;
//Preisstaffelung Zeiterfassung+Rechnungswesen für Backendpreis
var pricingbackendzr = {4:35,10:32.5,20:30};
var pricingbackendz = {4:20,10:18,20:16};
var pricingapp = {10:7.5,25:7,50:6.5,75:6,1000:5.5};
if(backendtype == "ZR"){
backendpreis = getPrice(pricingbackendzr, percent, backendanzahl);
}else{
backendpreis = getPrice(pricingbackendz, percent, backendanzahl);
}
apppreis = getPrice(pricingapp, percent, appanzahl);
//Rechnungen für gesamtsumme
var mytext = (((backendanzahl * backendpreis + +appanzahl * apppreis) * 1)).toFixed(2);
summetext.textContent = mytext+"€";
//Rechnung für Backendpreissumme
var backendpreissumme = (backendanzahl * backendpreis).toFixed(2);
backendpreissum.textContent = backendpreissumme+"€";
//Rechnung für Apppreissumme
var apppreissumme = (appanzahl * apppreis).toFixed(2);
appstk.textContent = apppreissumme+"€";
//Rechnung für Preis pro Backendbenutzer
var probackend2 = ((backendpreis * backendanzahl) / (backendanzahl)).toFixed(2);
preisprobackend.textContent = probackend2;
//Rechnung für Preis pro App-Benutzer
var proapp2 = appanzahl > 0 ? ((apppreis * appanzahl) / (appanzahl)).toFixed(2) : apppreis.toFixed(2);
preisproapp.textContent = proapp2;
//If Abfrage wenn "Jaehrlich" ausgewaehlt wird
if(paymenttype == "J"){
var jaehrlicherrabatt = ((backendanzahl * backendpreis + +appanzahl * apppreis)*12).toFixed(2);
jaehrlich.textContent = jaehrlicherrabatt+"€";
}
//Rechnung für Ersparnis
var rabattsum = (jaehrlicherrabatt * 0.2).toFixed(2);
rabatt.textContent = "-"+rabattsum+"€"+" (20%)";
}
//Rechnung für Jaehrlich und Monatlich(10% Rabatt für Jaehrlich)
function checkHide(element){
var hidden = document.getElementById('hiddenMonthly');
if (element && hidden) {
element.value === 'M' ? (hidden.style.visibility = 'hidden') : (hidden.style.visibility = 'unset')
}
}
function getPrice(pricemodels, percent, amount){
for ( var key in pricemodels ) {
//If key is higher than the selected amount, return the value
if(parseInt(key) >= parseInt(amount)){
return pricemodels[key] * percent;
}
}
}
html, body {
background-color: rgb(255, 255, 255);
height: 100%;
margin: 0;
}
header{
text-align: center;
font-size: 20px;
}
* {
font:13px/20px PTSansRegular,Arial,Helvetica,sans-serif;
}
input[type=range]{
border-radius: 32px;
height: 10px;
cursor: pointer;
}
*, *::before, *::after {
box-sizing: border-box;
}
.grid-container {
display: grid;
grid-template-columns:600px 250px ;
grid-auto-rows: minmax(150px, auto);
justify-items: stretch;
align-items: stretch;
}
.grid-item-1 {
align-self: start;
justify-self: center;
}
/* Background Styles Only */
/*#import url('https://fonts.googleapis.com/css?family=Raleway');*/
.text-grey{
color:grey;
}
.grid-container {
padding: 60px;
width: 100%;
grid-template-columns: 250px 200px;
}
#Backendrangecolor, #Appuserrangecolor, #BackendInput, #AppInput {
--background: rgb(96,125,139,0.33);
--slider: rgb(17, 166, 7);
background: var(--background);
-webkit-appearance: none;
width: 150px;
}
.grid-item {
font-size: 15px;
padding: 20px;
padding-top: 15px;
background-color: #f8f8f8;
color: #222;
border: 7px solid rgba(96,125,139,0.33);
}
.grid-item:nth-child(odd) {
background-color: #f8f8f8;
}
.target {
display: none;
}
/* Base styling*/
body {
background-color: lightgrey;
max-width: 768px;
margin: 0 auto;
padding: 1em 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
/* Popover styling */
a {
text-decoration: none;
}
.popover__title {
font-size: 24px;
color: rgb(73, 228, 68);
}
.popover__wrapper {
position: relative;
display: inline-block;
}
.popover__content {
opacity: 0;
visibility: hidden;
position: absolute;
left: -150px;
transform: translate(0, 10px);
background-color: #f8f8f8;
padding: 1.5rem;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
width: auto;
}
.popover__content:before {
position: absolute;
z-index: -1;
content: "";
right: calc(50% - 10px);
top: -8px;
border-style: solid;
border-width: 0 10px 10px 10px;
border-color: transparent transparent #f8f8f8 transparent;
transition-duration: 0.3s;
transition-property: transform;
}
.popover__wrapper:hover .popover__content {
z-index: 10;
opacity: 1;
visibility: visible;
transition: all 0.5s cubic-bezier(0.75, -0.02, 0.2, 0.97);
}
.popover__message {
text-align: center;
}
<html>
<head>
<link rel="stylesheet" href="styles.css">
<script src="./app.js"></script>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="grid-container" >
<div style="width: 270px"class="grid-item">
<header>Preiskalkulator</header>
<div class="slidecontainer">
App-Benutzer: <br>
<input id="Appuserrangecolor" value="0" type="range" rangecolorid="Appuserrangecolor" min="0" max="100" oninput="updateUser(this.value, 'Appuserrangecolor');" class='appuser updatecolor'></input>
<input class='updatecolor' style="width: 30px;border-color: var(--form_border_color);" type="text" id="AppInput" value="0" placeholder="1-100" rangecolorid="Appuserrangecolor" min="0" max="100" oninput="this.value = this.value > 100 ? 100 : Math.abs(this.value); updateUser(this.value, 'AppInput');"><br>
Bürosoftware-Benutzer: <br>
<input id="Backendrangecolor" value="1" type="range" rangecolorid="Backendrangecolor" min="1" max="15" oninput="updateUser(this.value, 'Backendrangecolor'); " class='backenduser updatecolor'></input>
<input class='updatecolor' style="width: 30px;border-color: var(--form_border_color);" type="text" id="BackendInput" rangecolorid="Backendrangecolor" value="1" min="1" max="15" placeholder="1-15" oninput="this.value = this.value > 15 ? 15 : Math.abs(this.value,); updateUser(this.value, 'BackendInput');"><br>
</div>
<b > Bürosoftware wählen </b>
<select style="width: 150px;background-color:rgba(96,125,139,0.33)" id = "backendfunktion" onchange = "calcSum()" >
<option value="Z">Zeiterfassung</option>
<option value="ZR"> Zeiterfassung + Rechnungswesen</option>
</select>
<select style="width: 150px;background-color:rgba(96,125,139,0.33)" id = "zahlrythmus" onchange = "calcSum();checkHide(this)" >
<option onclick="('hidden')" value="J">Jährlich</option>
<option value="M">monatlich</option>
</select>
</div>
<div class="grid-item" style="width: 270px">
<table style="width:100%;text-align: right;">
<tr>
<td style="width: 138px" >App-Benutzer<br > <div class='text-grey'>pro <span class="proapp" >7.50</span>€</div></td>
<td style="width: 62px; vertical-align: top;" class='appanzahl'>0.00€</td>
</tr>
<div class="popover__wrapper">
<div class="popover__title" style="font-size:10px;padding:0px;text-align: left;">Info</div>
<div class="popover__content">
<p class="popover__message">Preisstaffelung</p>
</div>
</div>
<tr>
<td>Bürosoftware-Benutzer<br ><div class='text-grey'>pro <span class='probackend'>20.00</span>€</div></td>
<td class='backendpreissum' style="vertical-align: top;">20.00€</td>
</tr>
<tr><td colspan="2"><hr></td></tr>
<tr>
<td >Gesamtpreis mtl.:<br><div class='text-grey'>(zzgl. MwSt)</div></td>
<td class='summe' style="vertical-align: top;">20.00€</td>
</tr>
<table id="hiddenMonthly" style="width:100%;text-align: right;">
<tr>
<td>Jährlich<br></td>
<td class='jaehrlichsum' >240.00€</td>
</tr>
<tr>
<td class='text-grey'>Rabatt<br></td>
<td class='rabattsum'>0.00€</td>
</tr>
</table>
</table>
</div>
</div>
</body>
</html>

first make table disappear from the page by adding display none to it, how i understood its the grid-container which is the table you want to show on hower
so then just simply create class .show or something like inside css that which would contain,then take out from the DOM the both table and info elements
display:block,after addeventlistener to info element
info.addEventListener('mouseover', () => {table.classList.toggle(show)})

How to make button appear when input reaches max value?

So i want the button to appear when the slider reaches 100% in either one of App-Benutzer or Bürosoftware-Benutzer and when its not at 100% i want it to dissappear.
function checkMaxInput(element) {
var hidden = document.getElementById('hiddenMax');
if (hidden) {
this.value == this.max ? (hidden.style.visibility = 'visible') : (hidden.style.visibility = 'hidden')
}
}
I tried to create a function but i guess i didnt do it right yet.
var percent = 1; //Standardvalue for yearly
var percentmonthly = 1.2 //Standardvalue for monthly
//diese funktion wird ausgelöst wenn das html-dokument vollstaendig geladen wird
document.addEventListener("DOMContentLoaded", function (event) {
var updatecolor = document.querySelectorAll('.updatecolor');
//anzeige der farbe im range slider
document.querySelectorAll(".updatecolor").forEach(updateinputs =>
updateinputs.addEventListener("input", function () {
var percent = calcPercent(this.value, this.min, this.max);
const bg = getComputedStyle(this).getPropertyValue('--background');
const slider = getComputedStyle(this).getPropertyValue('--slider');
var colorchanger = this.getAttribute('rangecolorid');
var sliderselect = document.querySelector('#' + colorchanger);
sliderselect.setAttribute(
'style',
` background:linear-gradient(to right,${slider},${slider} ${percent}%,${bg} ${percent}%) `
)
})
);
//Initiale Anzeige der Daten
calcSum();
});
//hides when app-benutzer or bürosoftware-benutzer is at 100%
function checkMaxInput(element) {
var hidden = document.getElementById('hiddenMax');
if (hidden) {
this.value == this.max ? (hidden.style.visibility = 'visible') : (hidden.style.visibility = 'hidden')
}
}
//funktion damit der Slider sich beim eingeben vom input field bewegt
function updateUser(val, inputtype) {
if (inputtype == 'Appuserrangecolor') {
document.getElementById('AppInput').value = val;
}
if (inputtype == 'AppInput') {
document.getElementById('Appuserrangecolor').value = val;
}
if (inputtype == 'Backendrangecolor') {
document.getElementById('BackendInput').value = val;
}
if (inputtype == 'BackendInput') {
document.getElementById('Backendrangecolor').value = val;
}
calcSum();
}
//Calculates the percentage of the currentval with the base of a min and max value
function calcPercent(curval, min, max) {
return ((curval - min) / (max - min)) * 100;
}
//Rechnung für die Anzahl von Backend und App-Benutzern
function calcSum() {
}
//funktion um preisstaffel zu berechnen
function getPrice(pricemodels, percent, amount) {
for (var key in pricemodels) {
//If key is higher than the selected amount, return the value
if (parseInt(key) >= parseInt(amount)) {
return pricemodels[key] * percent;
}
}
}
html, body {
background-color: rgb(255, 255, 255);
height: 100%;
margin: 0;
}
header{
text-align: center;
font-size: 20px;
}
body, table, select {
font-size: 12px;
}
input[type=range]{
border-radius: 32px;
height: 10px;
cursor: pointer;
}
*, *::before, *::after {
box-sizing: border-box;
}
.grid-container {
display: grid;
grid-template-columns:600px 250px ;
grid-auto-rows: minmax(150px, auto);
justify-items: stretch;
align-items: stretch;
}
.grid-item-1 {
align-self: start;
justify-self: center;
}
.text-grey{
color:grey;
}
.grid-container {
padding: 60px;
width: 100%;
grid-template-columns: 250px 200px;
}
#Backendrangecolor, #Appuserrangecolor, #BackendInput, #AppInput {
--background: rgb(96,125,139,0.33);
--slider: #00ba7a;
background: var(--background);
-webkit-appearance: none;
width: 150px;
}
#Backendrangecolor, #Appuserrangecolor :-moz-range-thumb {
background: purple;
}
.grid-item {
padding: 20px;
padding-top: 15px;
background-color: #f8f8f8;
color: #222;
border: 7px solid rgba(96,125,139,0.33);
}
.grid-item:nth-child(odd) {
background-color: #f8f8f8;
}
.target {
display: none;
}
/* Base styling*/
body {
background-color: #f8f8f8;
max-width: 768px;
margin: 0 auto;
padding: 1em 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
a {
text-decoration: none;
}
}
.price-container .text {
width: 80px;
display: inline-block;
text-align: right;
}
.price-container .value {
width: 30px;
display: inline-block;
text-align: left;
}
.button {
text-align: center;
width: 75px;
height: auto;
font-size:8px;
color:#f8f8f8 ;
background-color: rgba(255,167,55,1);
border: rgba(255,167,55,1);
}
<html>
<head>
<link rel="stylesheet" href="styles.css">
<script src="./app.js"></script>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="grid-container">
<div style="width: 270px"class="grid-item">
<header>Preiskalkulator</header>
<div class="slidecontainer">
App-Benutzer: <br>
<input id="Appuserrangecolor" value="0" type="range" rangecolorid="Appuserrangecolor" min="0" max="100" oninput="updateUser(this.value, 'Appuserrangecolor');" class='appuser updatecolor'></input>
<input class='updatecolor' style="width: 30px;border-color: var(--form_border_color);" type="text" id="AppInput" value="0" placeholder="1-100" rangecolorid="Appuserrangecolor" min="0" max="100" oninput="this.value = this.value > 100 ? 100 : Math.abs(this.value); updateUser(this.value, 'AppInput');"><br>
Bürosoftware-Benutzer: <br>
<input id="Backendrangecolor" value="1" type="range" rangecolorid="Backendrangecolor" min="1" max="15" oninput="updateUser(this.value, 'Backendrangecolor'); " class='backenduser updatecolor'></input>
<input class='updatecolor' style="width: 30px;border-color: var(--form_border_color);" type="text" id="BackendInput" rangecolorid="Backendrangecolor" value="1" min="1" max="15" placeholder="1-15" oninput="this.value = this.value > 15 ? 15 : Math.abs(this.value,); updateUser(this.value, 'BackendInput');"><br>
</div>
<div class="grid-item" style="width: 270px">
<div id="hiddenMax"class="button" style="margin-left: auto;margin-right: auto;margin-top: 10px;">
<button class="button" ><a class="button" target="blank" href="https://solutions.stressfrei.de/kontakt/">Größeres Packet auf Anfrage</a></button>
</div>
</div>
</div>
</body>
</html>

You can rewrite checkMaxInput first
Since updateUser will sync range input and text input
We can simply pick just two input that represent App-Benutzer and Bürosoftware-Benutzer as condition
If slider reachs 100% means that App-Benutzer's value will be 100 and Bürosoftware-Benutzer's value will be 15
So, we can rewrite checkMaxInput like below:
function checkMaxInput() {
var hidden = document.getElementById("hiddenMax");
if (
document.getElementById("AppInput").value === "100" ||
document.getElementById("BackendInput").value === "15"
) {
hidden.style.visibility = "visible";
} else {
hidden.style.visibility = "hidden";
}
}
Then, you can call it after updateUser finished task to sync input's value
For example
function updateUser(val, inputtype) {
if (inputtype == "Appuserrangecolor") {
document.getElementById("AppInput").value = val;
}
if (inputtype == "AppInput") {
document.getElementById("Appuserrangecolor").value = val;
}
if (inputtype == "Backendrangecolor") {
document.getElementById("BackendInput").value = val;
}
if (inputtype == "BackendInput") {
document.getElementById("Backendrangecolor").value = val;
}
calcSum();
checkMaxInput();
}
Finally, if you want the button was hidden initially
You have to add these two line in your DOMContentLoaded's callback function
var hidden = document.getElementById("hiddenMax");
hidden.style.visibility = "hidden";
Or simply write style visibility: hidden; at #hiddenMax in HTML

I suggest to use a pure function to check if the element needs to be shown or not, something like this
function checkMaxInput(element) {
var attrs = element.attributes;
return element.value == attrs.max.nodeValue;
}
function updateUser(element, inputtype) {
var hidden = document.getElementById('hiddenMax');
checkMaxInput(element) ?
hidden.style.visibility = 'visible' :
hidden.style.visibility = 'hidden';
}
see a simplified example here https://jsbin.com/cucemujiyo/1/edit?html,css,js,output

How to get plus minus to update button text

I have been trying to get a plus minus button integrated into my number input. I have been able to update the field between the buttons with the new value however am trying to get that value to populate a second area (specifically a button) If I select the number input and click up or down arrows both the input and the button text are successfully updating, I am just stuck on mingling the two together.
How do I get the button to load the value of the number field after clicking the plus and minus buttons?
var adultModal = document.getElementById("adultModal");
var adultBtn = document.getElementById("guests");
var adultSpan = document.getElementsByClassName("adultClose")[0];
adultBtn.onclick = function() {
adultModal.style.display = "block";
}
adultSpan.onclick = function() {
adultModal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == adultModal) {
adultModal.style.display = "none";
}
}
// NUMBER FIELD PLUS / MINUS SCRIPT
function incrementValue(e) {
e.preventDefault();
var fieldName = $(e.target).data('field');
var parent = $(e.target).closest('div');
var currentVal = parseInt(parent.find('input[name=' + fieldName + ']').val(), 10);
if (!isNaN(currentVal)) {
parent.find('input[name=' + fieldName + ']').val(currentVal + 1);
} else {
parent.find('input[name=' + fieldName + ']').val(0);
}
}
function decrementValue(e) {
e.preventDefault();
var fieldName = $(e.target).data('field');
var parent = $(e.target).closest('div');
var currentVal = parseInt(parent.find('input[name=' + fieldName + ']').val(), 10);
if (!isNaN(currentVal) && currentVal > 0) {
parent.find('input[name=' + fieldName + ']').val(currentVal - 1);
} else {
parent.find('input[name=' + fieldName + ']').val(0);
}
}
$('.input-group').on('click', '.button-plus', function(e) {
incrementValue(e);
});
$('.input-group').on('click', '.button-minus', function(e) {
decrementValue(e);
});
function updateGuests() {
let adultNumb = document.getElementById("adultQuantity");
let produceAdult = document.getElementById('adultValue');
produceAdult.innerHTML = adultNumb.value;
let childNumb = document.getElementById("childQuantity");
let produceChild = document.getElementById('childValue');
produceChild.innerHTML = childNumb.value;
}
/* The Modal (background) */
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
padding-top: 100px;
/* Location of the box */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 5px 20px;
border: 1px solid #888;
width: 280px;
position: relative;
}
/* The Close Button */
.adultClose,
.childClose {
color: #aaaaaa;
position: absolute;
right: 5px;
top: 0px;
font-size: 22px;
font-weight: bold;
cursor: pointer;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
/* INPUT NUMBER PLUS/MINUS BUTTONS */
input,
textarea {
border: 1px solid #eeeeee;
box-sizing: border-box;
margin: 0;
outline: none;
padding: 10px;
}
input[type="button"] {
-webkit-appearance: button;
cursor: pointer;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
.input-group {
clear: both;
margin: 15px 0;
position: relative;
}
.input-group input[type='button'] {
background-color: #eeeeee;
min-width: 38px;
width: auto;
transition: all 300ms ease;
}
.input-group .button-minus,
.input-group .button-plus {
font-weight: bold;
height: 38px;
padding: 0;
width: 38px;
position: relative;
}
.input-group .quantity-field {
position: relative;
height: 38px;
left: -6px;
text-align: center;
width: 62px;
display: inline-block;
font-size: 13px;
margin: 0 0 5px;
resize: vertical;
}
.button-plus {
left: -13px;
}
input[type="number"] {
-moz-appearance: textfield;
-webkit-appearance: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3>Guests</h3>
<button id="guests" type="button" class="adults">
<span class="bw-toggle__value"><span id="adultValue">2</span> Adults <span class="bw-divide">/</span> <span id="childValue">0</span> Children</span>
</button>
<!-- Adult Modal -->
<div id="adultModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="adultClose">×</span>
<div class="input-group">
ADULTS
<input type="button" value="-" class="button-minus" data-field="quantity">
<input type="number" step="1" max="" value="2" name="quantity" class="quantity-field" id="adultQuantity" onchange="updateGuests()">
<input type="button" value="+" class="button-plus" data-field="quantity">
</div>
<div class="input-group">
CHILDREN
<input type="button" value="-" class="button-minus" data-field="quantity">
<input type="number" step="1" max="" value="0" name="quantity" class="quantity-field" id="childQuantity" onchange="updateGuests()">
<input type="button" value="+" class="button-plus" data-field="quantity">
</div>
</div>
</div>

Just call updateGuests() in your increment and decrement functions. You were 99% there.
I'd encourage you to move away from jQuery. You're halfway there with this code anyway, and it's a crutch against robust learning of JavaScript. These operations are simple enough that you just don't need it. See https://youmightnotneedjquery.com.
var adultModal = document.getElementById("adultModal");
var adultBtn = document.getElementById("guests");
var adultSpan = document.getElementsByClassName("adultClose")[0];
adultBtn.onclick = function() {
adultModal.style.display = "block";
}
adultSpan.onclick = function() {
adultModal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == adultModal) {
adultModal.style.display = "none";
}
}
// NUMBER FIELD PLUS / MINUS SCRIPT
function incrementValue(e) {
e.preventDefault();
var fieldName = $(e.target).data('field');
var parent = $(e.target).closest('div');
var currentVal = parseInt(parent.find('input[name=' + fieldName + ']').val(), 10);
if (!isNaN(currentVal)) {
parent.find('input[name=' + fieldName + ']').val(currentVal + 1);
} else {
parent.find('input[name=' + fieldName + ']').val(0);
}
updateGuests();
}
function decrementValue(e) {
e.preventDefault();
var fieldName = $(e.target).data('field');
var parent = $(e.target).closest('div');
var currentVal = parseInt(parent.find('input[name=' + fieldName + ']').val(), 10);
if (!isNaN(currentVal) && currentVal > 0) {
parent.find('input[name=' + fieldName + ']').val(currentVal - 1);
} else {
parent.find('input[name=' + fieldName + ']').val(0);
}
updateGuests();
}
$('.input-group').on('click', '.button-plus', function(e) {
incrementValue(e);
});
$('.input-group').on('click', '.button-minus', function(e) {
decrementValue(e);
});
function updateGuests() {
let adultNumb = document.getElementById("adultQuantity");
let produceAdult = document.getElementById('adultValue');
produceAdult.innerHTML = adultNumb.value;
let childNumb = document.getElementById("childQuantity");
let produceChild = document.getElementById('childValue');
produceChild.innerHTML = childNumb.value;
}
/* The Modal (background) */
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
padding-top: 100px;
/* Location of the box */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 5px 20px;
border: 1px solid #888;
width: 280px;
position: relative;
}
/* The Close Button */
.adultClose,
.childClose {
color: #aaaaaa;
position: absolute;
right: 5px;
top: 0px;
font-size: 22px;
font-weight: bold;
cursor: pointer;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
/* INPUT NUMBER PLUS/MINUS BUTTONS */
input,
textarea {
border: 1px solid #eeeeee;
box-sizing: border-box;
margin: 0;
outline: none;
padding: 10px;
}
input[type="button"] {
-webkit-appearance: button;
cursor: pointer;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
.input-group {
clear: both;
margin: 15px 0;
position: relative;
}
.input-group input[type='button'] {
background-color: #eeeeee;
min-width: 38px;
width: auto;
transition: all 300ms ease;
}
.input-group .button-minus,
.input-group .button-plus {
font-weight: bold;
height: 38px;
padding: 0;
width: 38px;
position: relative;
}
.input-group .quantity-field {
position: relative;
height: 38px;
left: -6px;
text-align: center;
width: 62px;
display: inline-block;
font-size: 13px;
margin: 0 0 5px;
resize: vertical;
}
.button-plus {
left: -13px;
}
input[type="number"] {
-moz-appearance: textfield;
-webkit-appearance: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3>Guests</h3>
<button id="guests" type="button" class="adults">
<span class="bw-toggle__value"><span id="adultValue">2</span> Adults <span class="bw-divide">/</span> <span id="childValue">0</span> Children</span>
</button>
<!-- Adult Modal -->
<div id="adultModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="adultClose">×</span>
<div class="input-group">
ADULTS
<input type="button" value="-" class="button-minus" data-field="quantity">
<input type="number" step="1" max="" value="2" name="quantity" class="quantity-field" id="adultQuantity" onchange="updateGuests()">
<input type="button" value="+" class="button-plus" data-field="quantity">
</div>
<div class="input-group">
CHILDREN
<input type="button" value="-" class="button-minus" data-field="quantity">
<input type="number" step="1" max="" value="0" name="quantity" class="quantity-field" id="childQuantity" onchange="updateGuests()">
<input type="button" value="+" class="button-plus" data-field="quantity">
</div>
</div>
</div>

Disable NVDA from reading 'clickable' for series highchart

How can I prevent NVDA screen reader from reading 'clickable' for series Highcharts? The series values are wrapped inside a "tspan" tag and don't have any click event associated with it. Thanks for the help in advance.
Adding a 2nd screenshot (I'll attach a fiddle once I figure it out) in response to Graham Ritchie's comment.
window.EJ = window.EJ || {},
EJ.features = EJ.features || {};
EJ.events = {};
(function(q) {
'use strict';
var topics = {},
subUid = -1;
q.subscribe = function(topic, func) {
if (!topics[topic]) {
topics[topic] = [];
}
var token = (++subUid).toString();
topics[topic].push({
token: token,
func: func
});
return token;
};
q.publish = function(topic, args) {
if (!topics[topic]) {
return false;
}
setTimeout(function() {
var subscribers = topics[topic],
len = subscribers ? subscribers.length : 0;
while (len--) {
subscribers[len].func(topic, args);
}
}, 0);
return true;
};
q.unsubscribe = function(token) {
for (var m in topics) {
if (topics[m]) {
for (var i = 0, j = topics[m].length; i < j; i++) {
if (topics[m][i].token === token) {
topics[m].splice(i, 1);
return token;
}
}
}
}
return false;
};
}(EJ.events));
/**
* Features loader
* Iterates over all data-features attributes in the DOM and will execute EJ.features.featureName.init()
*/
EJ.features = {
init: function() {
var features = $('[data-features]');
if (!features.length) return false;
for (var i = 0, n = features.length; i < n; i++) {
var $el = $(features[i]),
func = $el.data('features');
if (this[func] && typeof this[func].init === 'function') {
this[func].init($el);
}
}
}
};
EJ.features.careerFitTool = (function(quiz) {
quiz.init = function(el) {
if (!el) {
throw new Error('You must supply the constructor an element instance to operate on.');
}
var currQuestionIndex = -1,
$start = el.find('.quiz-start'),
$finish = el.find('.quiz-finish'),
$startOver = el.find('.quiz-startOver'),
$previousQuestion = el.find('.previous-question'),
$nextQuestion = el.find('.next-question'),
$stateDefault = el.find('.state-default'),
$stateActive = el.find('.state-quiz'),
$questions = el.find('.question-field'),
$progressIndicator = el.find('.progress-indicator'),
numOfQuestions = $questions.length
$answers = el.find('.answer');
var faPct = 0;
var boaPct = 0;
var hqPct = 0;
$previousQuestion.on('click', function() {
changeQuestion('prev');
});
$nextQuestion.on('click', function() {
changeQuestion('next');
});
$start.on('click', function() {
changeState('default', 'quiz');
});
$finish.on('click', function() {
changeState('quiz', 'finished');
});
$startOver.on('click', function() {
changeState('finished', 'default');
currQuestionIndex = -1;
$(el).find('form')[0].reset();
focusLetsGetStarted();
});
$answers.on('change', function() {
$nextQuestion.removeClass('disabled')
.attr('disabled', false);
})
/**
* Change state of quiz.
* #param {string} currState Current state (default/quiz/finished)
* #param {string} nextState Desired next state (default/quiz/finished)
*/
function changeState(currState, nextState) {
el.find('.state-' + currState).hide();
el.find('.state-' + nextState).show();
if (currState === 'default') {
$previousQuestion.hide();
$($questions[++currQuestionIndex]).show();
$($progressIndicator[currQuestionIndex]).addClass('active');
}
}
function computeJobFitPercents() {
var faAmount = 0;
var boaAmount = 0;
var hqAmount = 0;
var totalOptionAmount = 0;
var faPercent = 0;
var boaPercent = 0;
var hqPercent = 0;
for (var i = 1; i <= 45; i++) {
var radios = document.getElementsByName('group' + i);
for (var j = 0; j < radios.length; j++) {
var radio = radios[j];
var radioString = radio.value;
if (radioString.indexOf("Financial Advisor") >= 0 && radio.checked) {
faAmount++;
}
if (radioString.indexOf("Branch Office Administrator") >= 0 && radio.checked) {
boaAmount++;
}
if (radioString.indexOf("Headquarters") >= 0 && radio.checked) {
hqAmount++;
}
}
totalOptionAmount = faAmount + boaAmount + hqAmount;
faPercent = parseFloat(((faAmount / totalOptionAmount) * 100).toFixed());
boaPercent = parseFloat(((boaAmount / totalOptionAmount) * 100).toFixed());
hqPercent = parseFloat(((hqAmount / totalOptionAmount) * 100).toFixed());
var totalPercent = faPercent + boaPercent + hqPercent;
}
generatePieChart(faPercent, boaPercent, hqPercent);
// Populate the variables required to display the result
faPct = faPercent;
boaPct = boaPercent;
hqPct = hqPercent;
}
/**
* This function generates pie chart for the given inputs.
* It generates a job fir graph for the questions answered by the user.
*/
function generatePieChart(faPrcnt, boaPrcnt, hqPrcnt) {
Highcharts.setOptions({
colors: ['#F3BD06', '#f6d050 ', '#fae49b']
});
// Build the chart
$('#pieChartContainer').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
width: 230
},
credits: {
enabled: false
},
title: {
text: null
},
scrollbar : {
enabled : false
},
tooltip: {
enabled: false,
pointFormat: '<b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: false,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true,
borderWidth: 0,
point: {
events: {
mouseOver: function() {
//pieChart.tooltip.hide();
}
}
}
}
},
exporting: {
enabled: false
},
legend: {
layout: 'vertical',
floating: false,
borderRadius: 0,
borderWidth: 0,
align: 'center',
verticalAlign: 'bottom',
labelFormatter: function() {
return this.y + '%' + ' ' + '-' + this.name;
}
},
series: [{
type: 'pie',
name: 'Career Chart',
point: {
events: {
legendItemClick: function() {
return false;
}
}
},
data: [
['Financial Advisor', faPrcnt],
['Branch Office Administrator', boaPrcnt], {
name: 'Headquarters',
y: hqPrcnt,
sliced: false,
selected: false
}
]
}]
});
}
/**
* Go to previous or next question
* #param {string} direction 'next' or 'prev'
* #return {boolean} are we on first or last question?
*/
function changeQuestion(direction) {
//Call function to compute the job fit percent as per the answers selected by the user
//computeJobFitPercents();
var questionAnswers;
var isAnswered;
$($questions[currQuestionIndex]).hide();
$progressIndicator.removeClass('active');
if (direction === 'next') {
currQuestionIndex++;
} else {
currQuestionIndex--;
}
$($progressIndicator[currQuestionIndex]).addClass('active');
questionAnswers = $($questions[currQuestionIndex]).find('.answer');
for (var i = 0, j = questionAnswers.length; i < j; i++) {
if ($(questionAnswers[i]).prop('checked') === true) {
isAnswered = true;
}
}
if (isAnswered) {
$nextQuestion.removeClass('disabled')
.attr('disabled', false);
} else {
$nextQuestion.addClass('disabled')
.attr('disabled', true);
}
if (currQuestionIndex === -1) {
$($questions[currQuestionIndex]).hide();
changeState('quiz', 'default');
} else if (currQuestionIndex === numOfQuestions) {
//Call function to compute the job fit percent as per the answers selected by the user
computeJobFitPercents();
$($questions[currQuestionIndex]).hide();
changeState('quiz', 'finished');
//Determine the result
$('#faOutcome').hide();
$('#faResultLink').hide();
$('#boaOutcome').hide();
$('#boaResultLink').hide()
$('#hqOutcome').hide();
$('#hqResultLink').hide();
if (faPct >= boaPct) {
if (faPct >= hqPct) {
$('#faOutcome').show();
$('#faResultLink').show();
} else {
$('#hqOutcome').show();
$('#hqResultLink').show();
}
} else if (boaPct >= hqPct) {
$('#boaOutcome').show();
$('#boaResultLink').show();
} else {
$('#hqOutcome').show();
$('#hqResultLink').show();
}
} else {
$($questions[currQuestionIndex]).show();
if (currQuestionIndex === 0) {
$previousQuestion.hide();
} else {
$previousQuestion.show();
}
}
return currQuestionIndex === numOfQuestions || currQuestionIndex === 0;
}
}
return quiz;
}(EJ.features.careerFitTool || {}));
EJ.initialize = function() {
EJ.features.init();
};
$(function() {
EJ.initialize();
$('.comp-registrationForm.modal').modal('show');
});
/* Enter Your Custom CSS Here */
input[type="checkbox"],input[type="radio"] {
box-sizing: border-box;
padding: 0;
margin: 4px 0 0;
margin-top: 1px \9;
/* IE8-9 */
line-height: normal;
position: relative;
opacity: 1;
left: 0;
}
input[type="file"]:focus,input[type="radio"]:focus,input[type="checkbox"]:focus {
outline: thin dotted #333 !important;
outline-offset: -2px !important;
outline-color: #000 !important;
}
.radio,.checkbox {
display: block;
min-height: 20px;
margin-top: 10px;
margin-bottom: 10px;
padding-left: 20px;
vertical-align: middle;
}
.radio label,.checkbox label {
display: inline;
margin-bottom: 0;
font-weight: 400;
cursor: pointer;
}
.radio input[type="radio"],.radio-inline input[type="radio"],.checkbox input[type="checkbox"],.checkbox-inline input[type="checkbox"] {
float: left;
margin-left: -20px;
}
.radio + .radio,.checkbox + .checkbox {
margin-top: -5px;
}
.radio-inline,.checkbox-inline {
display: inline-block;
padding-left: 20px;
margin-bottom: 0;
vertical-align: middle;
font-weight: 400;
cursor: pointer;
}
.radio-inline + .radio-inline,.checkbox-inline + .checkbox-inline {
margin-top: 0;
margin-left: 10px;
}
input[type="radio"][disabled],fieldset[disabled] input[type="radio"],input[type="checkbox"][disabled],fieldset[disabled] input[type="checkbox"],.radio[disabled],fieldset[disabled] .radio,.radio-inline[disabled],fieldset[disabled] .radio-inline,.checkbox[disabled],fieldset[disabled] .checkbox,.checkbox-inline[disabled],fieldset[disabled] .checkbox-inline {
cursor: not-allowed;
}
/*
# Button Primary
*/
.button,.button-cta,.button-cta-floating,.button-previous,.button-download,.button-expand,.button-arrow-only {
color: #fff;
background-color: #f8512e;
border-color: #f96141;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.2),inset 0 1px 1px rgba(255,255,255,0.15);
box-shadow: 0 1px 2px rgba(0,0,0,0.2),inset 0 1px 1px rgba(255,255,255,0.15);
-webkit-transition: background-color .25s ease-out;
transition: background-color .25s ease-out;
font-family: "Proxima Nova-Semibold",Helvetica,Arial,sans-serif;
font-weight: 400;
font-size: 15px;
line-height: 1;
padding: 8px 12px;
text-shadow: 0 1px 1px rgba(0,0,0,0.2);
}
.pull-right {
float: right !important;
}
.hide {
display: none !important;
}
.hidden {
display: none !important;
visibility: hidden !important;
}
/* start .comp-careerFitTool */
.comp-careerFitTool {
background: #9b9998;
padding-bottom: 15px;
position: relative;
}
.comp-careerFitTool:before,.comp-careerFitTool:after {
content: " ";
/* 1 */
display: table;
/* 2 */
}
.comp-careerFitTool:after {
clear: both;
}
#media screen and (min-width: 470px) {
.comp-careerFitTool {
padding-bottom: 35px;
}
}
.career-tool-intro {
color: #fff;
font-size: 20px;
padding: 20px;
}
#media screen and (min-width: 960px) {
.career-tool-intro h3 {
font-size: 32px;
}
}
.career-tool-intro p {
margin: 0;
}
#media screen and (min-width: 470px) {
.career-tool-intro {
padding: 25px;
}
}
.career-tool-info {
background: #fff;
border: 1px solid #9b9998;
color: #5b5955;
padding: 20px;
}
.career-tool-info:before,.career-tool-info:after {
content: " ";
/* 1 */
display: table;
/* 2 */
}
.career-tool-info:after {
clear: both;
}
.career-tool-info input[type="radio"],.career-tool-info input[type="checkbox"] {
margin-right: 5px;
vertical-align: top;
}
.career-tool-info label {
font-family: "Proxima Nova-Semibold",Helvetica,Arial,sans-serif;
font-weight: 400;
font-size: 18px;
}
#media screen and (min-width: 730px) and (max-width: 959px) {
.career-tool-info .questions-intro {
font-size: 20px;
}
}
#media screen and (min-width: 960px) {
.career-tool-info .questions-intro {
font-size: 24px;
}
}
.career-tool-info .questions {
margin-bottom: 16px;
}
.career-tool-info .question {
font-family: "Proxima Nova-Semibold",Helvetica,Arial,sans-serif;
font-weight: 400;
}
#media screen and (min-width: 730px) and (max-width: 959px) {
.career-tool-info .question {
font-size: 20px;
}
}
#media screen and (min-width: 960px) {
.career-tool-info .question {
font-size: 28px;
}
}
.career-tool-info .question-field,.career-tool-info .question-changer,.career-tool-info .question-progress {
padding-left: 50px;
}
.career-tool-info .question-field {
position: relative;
}
.career-tool-info .question-number {
font-family: "Proxima Nova-Bold",Helvetica,Arial,sans-serif;
font-weight: 400;
height: 31px;
width: 31px;
background: transparent url(https://cdn-static.findly.com/wp-content/uploads/sites/936/2020/05/question-number.png) no-repeat 0 0;
color: #fff;
display: block;
left: 2px;
line-height: 33px;
position: absolute;
text-align: center;
top: 4px;
}
.career-tool-info .question-changer {
margin-bottom: 18px;
}
.career-tool-info .state,.career-tool-info .question-field {
display: none;
}
.career-tool-info .state-default {
display: block;
}
#media screen and (min-width: 1190px) {
.career-tool-info .state-default .inner-wrap,.career-tool-info .state-finished .inner-wrap {
font-size: 24px;
}
.career-tool-info .state-quiz {
font-size: 20px;
}
}
.career-tool-info .state .inner-wrap {
float: left;
}
#media screen and (min-width: 730px) {
.career-tool-info .state .inner-wrap {
width: 60%;
}
}
#media screen and (min-width: 1190px) {
.career-tool-info .state .inner-wrap {
padding-top: 35px;
padding-right: 25px;
}
}
#media screen and (min-width: 730px) {
.career-tool-info .state .inner-wrap-right {
float: right;
width: 40%;
}
}
#media screen and (max-width: 729px) {
.career-tool-info .state img.pull-right {
display: none;
}
}
#media screen and (min-width: 730px) {
.career-tool-info .state img.pull-right {
margin-bottom: -25px;
margin-right: -25px;
margin-top: -25px;
width: 40%;
}
}
.career-tool-info .quiz-startOver {
text-decoration: underline;
}
#media screen and (min-width: 730px) {
.career-tool-info .pie-chart,.career-tool-info .legend {
float: left;
padding: 0 1%;
width: 48%;
}
}
.career-tool-info .pie-chart img {
display: block;
height: auto;
max-width: 100%;
}
#media screen and (max-width: 729px) {
.career-tool-info .pie-chart {
display: none;
}
}
#media screen and (min-width: 730px) {
.career-tool-info .legend {
margin-top: 20px;
}
}
.career-tool-info .opportunity {
margin-bottom: 18px;
}
.career-tool-info .opportunity:before,.career-tool-info .opportunity:after {
content: " ";
/* 1 */
display: table;
/* 2 */
}
.career-tool-info .opportunity:after {
clear: both;
}
#media screen and (min-width: 470px) {
.career-tool-info {
padding: 25px;
}
}
#media screen and (min-width: 730px) {
.career-tool-info .score,.career-tool-info .position {
float: left;
}
.career-tool-info .score {
width: 40%;
}
.career-tool-info .position {
width: 60%;
}
.career-tool-info .key {
height: 20px;
width: 20px;
background: #fbc81b;
display: block;
float: left;
margin-right: 15px;
}
.career-tool-info .key2 {
background: #9b9998;
}
.career-tool-info .key3 {
background: #3f3f3f;
}
}
.progress-indicator {
height: 18px;
width: 18px;
display: inline-block;
*display: inline;
*zoom: 1;
background: transparent url(https://cdn-static.findly.com/wp-content/uploads/sites/936/2020/05/progress-indicator.png) no-repeat 0 0;
}
.progress-indicator.active {
background-image: url(https://cdn-static.findly.com/wp-content/uploads/sites/936/2020/05/progress-indicator-active.png);
}
/* /end .comp-careerFitTool */
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://careers.edwardjones.com/images/highcharts.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
</head>
<body>
<section class="comp-careerFitTool l-spacer" data-features="careerFitTool">
<div class="career-tool-intro">
<h2>Test highcharts after 3 questions</h2>
<p>Find the Right Opportunity for You.</p>
</div>
<div class="career-tool-info">
<form action="">
<div class="state state-default">
<div class="inner-wrap">
<h3>Unsure of what role may be right for you?</h3>
<p>Take a short quiz to see where your interests fit best at Edward Jones.</p>
<p><a class="button-cta quiz-start" href="javascript:;">Let's get started</a></p>
</div>
<img src="https://cdn-static.findly.com/wp-content/uploads/sites/936/2020/05/career-fit-tool.png" alt="Career fit tool" class="pull-right">
</div>
<div class="state state-quiz">
<div class="questions">
<fieldset id="questionDiv1" aria-live="assertive" class="question-field">
<legend>
<span aria-label="question number 1 of 8" class="question-number">1</span>
<p class="questions-intro">Please select the option below that best applies to you.</p>
<p class="question">The type of role that interests me more:</p>
</legend>
<div>
<p><label for="question100"> <input type="radio" id="question100" name="group1" class="answer" value="Financial Advisor">Entrepreneurial/Business Development</label></p>
<p><label for="question200"> <input type="radio" id="question200" name="group1" class="answer" value="Branch Office Administrator">Support someone building their business</label></p>
</div>
</fieldset>
<fieldset id="questionDiv2" aria-live="assertive" class="question-field">
<legend>
<img src="https://cdn-static.findly.com/wp-content/uploads/sites/936/2020/05/career-fit-tool.png" alt="career fit tool" class="pull-right">
<span aria-label="question number 2 of 8" class="question-number">2</span>
<p class="questions-intro">Please select the option below that best applies to you.</p>
<p class="question">How I would like to be compensated for my work:</p>
</legend>
<div>
<p><label for="question101"> <input type="radio" id="question101" name="group2" class="answer" value="Financial Advisor">Commissions</label></p>
<p><label for="question201"> <input type="radio" id="question201" name="group2" class="answer" value="Branch Office Administrator,Headquarters">Salary or hourly</label></p>
</div>
</fieldset>
<fieldset id="questionDiv3" aria-live="assertive" class="question-field">
<legend>
<span aria-label="question number 3 of 8" class="question-number">3</span>
<p class="questions-intro">Please select the option below that best applies to you.</p>
<p class="question">My preferred work style:</p>
</legend>
<div>
<p><label for="question102"> <input type="radio" id="question102" name="group3" class="answer" value="Financial Advisor,Branch Office Administrator">Work autonomously</label></p>
<p><label for="question202"> <input type="radio" id="question202" name="group3" class="answer" value="Headquarters">Work collaboratively on a team</label></p>
</div>
</fieldset>
</div>
<p aria-live="assertive" class="question-changer">
<a aria-label="go to previous question" class="button-previous previous-question" href="javascript:;">Previous</a>
<a aria-label="go to next question" class="button-cta next-question disabled" href="javascript:;">Next</a>
</p>
<p class="question-progress">
<span aria-live="assertive" class="progress-indicator"></span>
<span aria-live="assertive" class="progress-indicator"></span>
<span aria-live="assertive" class="progress-indicator"></span>
</p>
</div>
<div aria-live="assertive" class="state state-finished">
<div class="inner-wrap">
<h3>You're Finished</h3>
<p>Based on your responses, we recommend you explore career opportunities as a</p>
<p id="faOutcome">Financial Advisor</p>
<p id="boaOutcome">Branch Office Administrator</p>
<p id="hqOutcome">Headquarters Professional</p>
</div>
<div class="inner-wrap-right">
<div id="pieChartContainer" tabindex="0"></div>
</div>
<p id="faResultLink">Discover more about this opportunity here </p>
<p id="boaResultLink">Discover more about this opportunity here </p>
<p id="hqResultLink">Discover more about this opportunity here </p>
<p><a class="quiz-startOver" href="javascript:;">Start Over</a></p>
</div>
</form>
</div>
</section>
</body>
</html>

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.