javascript - html js css 数学函数

Question

我正在构建一个页面，其中有一个包含 8 个按钮和 9 个单选类型输入的网格。我给每个按钮一个值，并创建了一个在 div 上打印该值的函数（如果您想将商品退还给商店，这就像税收一样）。现在我正在尝试创建第二部分。它包括：您必须选择 3 件事：1- 物品的类别（8 个按钮网格），2- 物品包装的长度/宽度/高度和 3- 物品的重量（最后一个2都是单选按钮）。在我打印第一部分中提到的东西的同一个 div 中，我还有 2 个其他地方我必须打印 2 个其他值。问题是，例如对于正确的，我有一个 excel 文件，其中包含我必须做的所有数学运算才能获得正确的结果（有 sa 每个按钮的基本值（以美分为单位）和每个长度/宽度/高度“组合”的值。事实是按钮的值不能超过一个，所以我在网上红了你可以使用例如“数据值”，我试过了，但我认为使用它的sintax是不同的，因为它不起作用，所以我尝试了其他方法，我会告诉你，因为我教过它会起作用。（我采用了与第 1 部分相同的功能，并添加了一些内容以使我完成另一个功能。我会让您看到该功能的基本版本以及我正常尝试的那个）。所以我尝试了其他方法，我会告诉你，因为我教过它会起作用。（我采用了与第 1 部分相同的功能，并添加了一些内容以使我完成另一个功能。我会让您看到该功能的基本版本以及我正常尝试的那个）。所以我尝试了其他方法，我会告诉你，因为我教过它会起作用。（我采用了与第 1 部分相同的功能，并添加了一些内容以使我完成另一个功能。我会让您看到该功能的基本版本以及我正常尝试的那个）。

/*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>

标签： javascripthtmlcssmath

Answer 1

很明显，按钮和单选输入影响不同的事物（按钮影响price，单选输入影响vol）。这些需要分开到不同的事件中，每个事件的结果存储在不同的变量中。数值也需要用于计算。这是一个解决这些问题的简单示例：

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>