html js css 数学 function

Question

I am building a page where i have a grid of 8 buttons and 9 radio type input. I gave every button a value and created a function that print on a div the value (it's like a tax if you want to give back an item to the store, something like that). Now i'm trying to create the second part. It consist in: You have to choose 3 thing: 1- the category of the item (the 8 button grid), 2- the lenght/widht/height if the package for the item and 3- the weight of the item (the last 2 are both radio type button). In the same div where i print the thing i tlked about in the first part, i have 2 other places where I have to print 2 other value. The problem is that, for example for the right one, i have a excel file with all the math i have to do to gain the right result (there's a base value in cent for every button and a value for every lenght/widht/height "combination". the fact is that i cannot have more than one value for button, so I red online that you can use for example "data-value" and I tryed but i think the sintax to use it is different cause it didn't work, so I tried something else and i'm gonna show you cause i taught it was gonna work. ( I took the same function I used for part 1 and added something to make me complete also the other one. I'm gonna let u see the base version of the function commented and the one I tried normally).

 /*document.querySelectorAll('input[type=radio], button').forEach(function(input) { input.onclick = function() { var price; var stockT; var stock; var vol; if (this.value == '1,56') { price = '1,56'; } else if (this.value == '1,04'){ price = '1,04'; } else if (this.value == '1,30'){ price = '1,30'; } else if (this.value == '1,17'){ price = '1,17'; } if (this.value == '1,56' && this.value == '4960') { stock = '0,00002'; vol = '4960'; stockT = stock * vol; } document.querySelectorAll('.tabcosti.white')[1].innerText = price; document.querySelectorAll('.tabcosti.white')[2].innerText = stockT; }; })*/ document.querySelectorAll('input[type=radio], button').forEach(function(input) { input.onclick = function() { var price; var stockT; var stock; var vol; if (this.value == '1,56') { price = '1,56'; } else if (this.value == '1,04'){ price = '1,04'; } else if (this.value == '1,30'){ price = '1,30'; } else if (this.value == '1,17'){ price = '1,17'; } if (this.value == '1,56' && this.value == '4960') { stock = '0,00002'; vol = '4960'; stockT = stock * vol; } document.querySelectorAll('.tabcosti.white')[1].innerText = price; document.querySelectorAll('.tabcosti.white')[2].innerText = vol; }; })

 body { font-family: "Open Sans", sans-serif; }.flex-col { display: flex; flex-direction: column; }.flex-row { display: flex; flex-direction: row; }.justify { justify-content: center; }.align { align-items: center; }.evenly { justify-content: space-evenly; }.between { justify-content: space-between; }.border { border: 1px solid black; }.m-0 { margin: 0; }.spacer { display: flex; flex-direction: column; flex-grow: 1; }.grow { flex-grow: 1; }.orange { color: orange; }.bold { font-weight: bold; }.bg { background-color: whitesmoke; }.tabtitle { font-weight: bold; }.tariffe { font-size: small; }.intro { text-align: center; }.tartitle { font-size: medium; } div h2 { font-size: xx-large; }.cont { display: block; position: relative; padding-left: 35px; margin-bottom: 12px; margin-top: 12px; cursor: pointer; }.cont2 { display: block; position: relative; padding-left: 35px; margin-bottom: 12px; margin-top: 12px; cursor: pointer; }.m-7 { margin-top: 7px; }.m-14 { margin: 14px; padding: 0px; } div input { border-radius: 3px; border: solid 1px black; } div input:focus { outline: none; }.richiedi { text-align: center; padding: 5px 50px; }.tabcosti { background-color: darkorange; border: solid darkorange 1px; }.border { border: solid darkorange 1px; }.black { color: black; }.white { color: white; }.m-left-50 { margin-left: 200px; }.x-small { font-size: x-small; }.tabcosti2 { border-top: 0px; border: solid darkorange 1px; }.margin-left { margin-left: 20px; }.info { width: 215px; height: 20px; }.info2 { width: 75px; height: 20px; margin: 10px; }.small { font-size: small; }.unbtn { border: 0px; width: 20vw; height: 30px; background-color: whitesmoke; }.unbtn:focus { outline: none; background-color: darkorange; color: white; }.hide { display: none; }.btn { background-color: whitesmoke; border-radius: 3px; border: none; text-decoration: none; flex-grow: 1; margin: 10px; width: 184px; height: 40px; }.btn2{ background-color: darkorange; color: white; border: none; text-decoration: none; flex-grow: 1; margin: 10px; width: 184px; height: 40px; }

 <div id="button-container" class="justify evenly flex-row"> <div class="flex-col"> <div class="flex-row"> <button id="sel" class="btn bottoneCategoria" value="1,56">Abbigliamento e Scarpe</button> </div> <div class="flex-row"> <button id="sel2" class="btn bottoneCategoria" value="1,04">Pet & Food</button> </div> </div> <div class="flex-col"> <div class="flex-row"> <button id="sel3" class="btn bottoneCategoria" value="1,30">Sport e Tempo libero</button> </div> <div class="flex-row"> <button id="sel4" class="btn bottoneCategoria" value="1,04">Elettronica e Informatica</button> </div> </div> <div class="flex-col"> <div class="flex-row"> <button id="sel5" class="btn bottoneCategoria" value="1,04">Casa e Cucina</button> </div> <div class="flex-row"> <button id="sel6" class="btn bottoneCategoria" value="1,30">Auto e Moto</button> </div> </div> <div class="flex-col"> <div class="flex-row"> <button id="sel7" class="btn bottoneCategoria" value="1,17">Food & Beverage</button> </div> <div class="flex-row"> <button id="sel8" class="btn bottoneCategoria" value="1,30">Belleza e Salute</button> </div> </div> </div> <div id="radio" class="justify m-30 evenly flex-row bg"> <div class="flex-col"> <div class="align flex-row"> <input class="cont" type="radio" value="4960"> 31x16x10 </div> <div class="align flex-row"> <input class="cont" type="radio" value="9900"> 33x20x15 </div> <div class="align flex-row"> <input class="cont" type="radio" value="14875"> 35x25x17 </div> </div> <div class="flex-col"> <div class="align flex-row"> <input class="cont" type="radio" value="24800"> 40x31x20 </div> <div class="align flex-row"> <input class="cont" type="radio" value="35000"> 40x35x25 </div> <div class="align flex-row"> <input class="cont" type="radio" value="49200"> 41x40x30 </div> </div> <div class="flex-col"> <div class="align flex-row"> <input class="cont" type="radio" value="74925"> 45x45x37 </div> <div class="align flex-row"> <input class="cont" type="radio" value="100000"> 50x50x40 </div> <div class="align flex-row"> <input class="cont" type="radio" value="150000"> 60x50x50 </div> </div> </div> <div id="radio2" class="flex-row bg m-7 justify evenly"> <div class="flex-col"> <div class="align flex-row"> <input class="cont" type="radio" value="1" name="Peso"> 0-1 kg </div> <div class="align flex-row"> <input class="cont" type="radio" value="2" name="Peso"> 1-2 kg </div> <div class="align flex-row"> <input class="cont" type="radio" value="3" name="Peso"> 2-3 kg </div> </div> <div class="flex-col"> <div class="align flex-row"> <input class="cont" type="radio" value="4" name="Peso"> 3-5 kg </div> <div class="align flex-row"> <input class="cont" type="radio" value="7" name="Peso"> 5-7 kg </div> <div class="align flex-row"> <input class="cont" type="radio" value="10" name="Peso"> 7-10 kg </div> </div> <div class="flex-col"> <div class="align flex-row"> <input class="cont" type="radio" value="15" name="Peso"> 10-15 kg </div> <div class="align flex-row"> <input class="cont" type="radio" value="20" name="Peso"> 15-20 kg </div> <div class="align flex-row"> <input class="cont" type="radio" value="30" name="Peso"> 20-30 kg </div> </div> </div> <div class="justify evenly flex-row"> <div class="flex-col"> <p>TARIFFA DI GESTIONE</p> </div> <div class="flex-col"> <p>TARIFFA DI RESO</p> </div> <div class="flex-col"> <p>TARIFFA DI STOCCAGGIO</p> </div> </div> <div class="tabcosti evenly justify flex-row"> <div class="flex-col"> <p id="reso">€ <span class="white"></span></p> </div> <div class="flex-col"> <p>€ <span class="white"></span></p> </div> <div class="flex-col"> <p>€ <span class="white"></span> <span class="x-small">al mese</span></p> </div> </div>

Answer 1

It's clear that the buttons and radio inputs affect different things (buttons affect price , radio inputs affect vol ). These need to be separated to different events, with the results of each stored in different variables. Numeric values also need to be used for calculations. Here is a simple example that resolves these:

 var price; var stockT; var stock; var vol; var coso; document.querySelectorAll('button').forEach(function(input) { input.onclick = function() { price = this.value; document.querySelectorAll('.tabcosti.white')[1].innerText = price; }; }) document.querySelectorAll('input[type=radio]').forEach(function(input) { input.onchange = function() { if (price == '1,56' && this.value == '31x16x10') { coso = 0.00002; vol = 4960; stockT = coso * vol; } else { //other vol calculations go here so it is not undefined vol = 1; } document.querySelectorAll('.tabcosti.white')[2].innerText = vol; }; })

 body { font-family: "Open Sans", sans-serif; }.flex-col { display: flex; flex-direction: column; }.flex-row { display: flex; flex-direction: row; }.justify { justify-content: center; }.align { align-items: center; }.evenly { justify-content: space-evenly; }.between { justify-content: space-between; }.border { border: 1px solid black; }.m-0 { margin: 0; }.spacer { display: flex; flex-direction: column; flex-grow: 1; }.grow { flex-grow: 1; }.orange { color: orange; }.bold { font-weight: bold; }.bg { background-color: whitesmoke; }.tabtitle { font-weight: bold; }.tariffe { font-size: small; }.intro { text-align: center; }.tartitle { font-size: medium; } div h2 { font-size: xx-large; }.cont { display: block; position: relative; padding-left: 35px; margin-bottom: 12px; margin-top: 12px; cursor: pointer; }.cont2 { display: block; position: relative; padding-left: 35px; margin-bottom: 12px; margin-top: 12px; cursor: pointer; }.m-7 { margin-top: 7px; }.m-14 { margin: 14px; padding: 0px; } div input { border-radius: 3px; border: solid 1px black; } div input:focus { outline: none; }.richiedi { text-align: center; padding: 5px 50px; }.tabcosti { background-color: darkorange; border: solid darkorange 1px; }.border { border: solid darkorange 1px; }.black { color: black; }.white { color: white; }.m-left-50 { margin-left: 200px; }.x-small { font-size: x-small; }.tabcosti2 { border-top: 0px; border: solid darkorange 1px; }.margin-left { margin-left: 20px; }.info { width: 215px; height: 20px; }.info2 { width: 75px; height: 20px; margin: 10px; }.small { font-size: small; }.unbtn { border: 0px; width: 20vw; height: 30px; background-color: whitesmoke; }.unbtn:focus { outline: none; background-color: darkorange; color: white; }.hide { display: none; }.btn { background-color: whitesmoke; border-radius: 3px; border: none; text-decoration: none; flex-grow: 1; margin: 10px; width: 184px; height: 40px; }.btn2 { background-color: darkorange; color: white; border: none; text-decoration: none; flex-grow: 1; margin: 10px; width: 184px; height: 40px; }

 <div id="button-container" class="justify evenly flex-row"> <div class="flex-col"> <div class="flex-row"> <button id="sel" class="btn bottoneCategoria" value="1,56">Abbigliamento e Scarpe</button> </div> <div class="flex-row"> <button id="sel2" class="btn bottoneCategoria" value="1,04">Pet & Food</button> </div> </div> <div class="flex-col"> <div class="flex-row"> <button id="sel3" class="btn bottoneCategoria" value="1,30">Sport e Tempo libero</button> </div> <div class="flex-row"> <button id="sel4" class="btn bottoneCategoria" value="1,04">Elettronica e Informatica</button> </div> </div> <div class="flex-col"> <div class="flex-row"> <button id="sel5" class="btn bottoneCategoria" value="1,04">Casa e Cucina</button> </div> <div class="flex-row"> <button id="sel6" class="btn bottoneCategoria" value="1,30">Auto e Moto</button> </div> </div> <div class="flex-col"> <div class="flex-row"> <button id="sel7" class="btn bottoneCategoria" value="1,17">Food & Beverage</button> </div> <div class="flex-row"> <button id="sel8" class="btn bottoneCategoria" value="1,30">Belleza e Salute</button> </div> </div> </div> <div id="radio" class="justify m-30 evenly flex-row bg"> <div class="flex-col"> <div class="align flex-row"> <input class="cont" type="radio" value="31x16x10"> 31x16x10 </div> <div class="align flex-row"> <input class="cont" type="radio" value="33x20x15"> 33x20x15 </div> <div class="align flex-row"> <input class="cont" type="radio" value="35x25x17"> 35x25x17 </div> </div> <div class="flex-col"> <div class="align flex-row"> <input class="cont" type="radio" value="40x31x20"> 40x31x20 </div> <div class="align flex-row"> <input class="cont" type="radio" value="40x35x25"> 40x35x25 </div> <div class="align flex-row"> <input class="cont" type="radio" value="41x40x30"> 41x40x30 </div> </div> <div class="flex-col"> <div class="align flex-row"> <input class="cont" type="radio" value="45x45x37"> 45x45x37 </div> <div class="align flex-row"> <input class="cont" type="radio" value="50x50x40"> 50x50x40 </div> <div class="align flex-row"> <input class="cont" type="radio" value="60x50x50"> 60x50x50 </div> </div> </div> <div id="radio2" class="flex-row bg m-7 justify evenly"> <div class="flex-col"> <div class="align flex-row"> <input class="cont" type="radio" value="0-1 kg" name="Peso"> 0-1 kg </div> <div class="align flex-row"> <input class="cont" type="radio" value="1-2 kg" name="Peso"> 1-2 kg </div> <div class="align flex-row"> <input class="cont" type="radio" value="2-3 kg" name="Peso"> 2-3 kg </div> </div> <div class="flex-col"> <div class="align flex-row"> <input class="cont" type="radio" value="3-5 kg" name="Peso"> 3-5 kg </div> <div class="align flex-row"> <input class="cont" type="radio" value="5-7 kg" name="Peso"> 5-7 kg </div> <div class="align flex-row"> <input class="cont" type="radio" value="7-10 kg" name="Peso"> 7-10 kg </div> </div> <div class="flex-col"> <div class="align flex-row"> <input class="cont" type="radio" value="10-15 kg" name="Peso"> 10-15 kg </div> <div class="align flex-row"> <input class="cont" type="radio" value="15-20 kg" name="Peso"> 15-20 kg </div> <div class="align flex-row"> <input class="cont" type="radio" value="20-30 kg" name="Peso"> 20-30 kg </div> </div> </div> <div class="justify evenly flex-row"> <div class="flex-col"> <p>TARIFFA DI GESTIONE</p> </div> <div class="flex-col"> <p>TARIFFA DI RESO</p> </div> <div class="flex-col"> <p>TARIFFA DI STOCCAGGIO</p> </div> </div> <div class="tabcosti evenly justify flex-row"> <div class="flex-col"> <p id="reso">€ <span class="white"></span></p> </div> <div class="flex-col"> <p>€ <span class="white"></span></p> </div> <div class="flex-col"> <p>€ <span class="white"></span> <span class="x-small">al mese</span></p> </div> </div>