JS函数返回NaN答案

【问题标题】：JS Function return NaNJS函数返回NaN
【发布时间】：2021-08-06 12:26:12
【问题描述】：

我刚刚在这个网站上提出了一个问题，并收到了关于如何做我想做的事情的完美答案（9 个按钮网格，9 个单选类型网格，如果我点击一个按钮，我将在他的 div 上值，如果我还单击一个单选按钮，我还会有另一个基于计算的值。）问题是这个函数不适用于所有按钮，但只适用于第一个，所以我尝试按顺序修改它使其与所有按钮一起使用，更改 if 中的值并更改变量以进行计算。事实是新部分运行良好，但之前工作的原始部分现在给我 NaN 作为计算结果。我不知道如何解决这个 NaN 或如何修改原始代码，也许我做的方式是错误的，我可以用更简单的方式来做。

/*
original function

var price;
        var stockT;
        var stock;
        var vol;

        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 == '4960') {
                stock = 0.00002;
                vol = this.value;
                stockT = stock * vol;
                } else {
                vol = 1;
                }

                if (price == '1,56' && this.value == '9900') {
                stock = 0.00002;
                vol = this.value;
                stockT = stock * vol;
                } else {
                vol = 1;
                }

                if (price == '1,56' && this.value == '14875') {
                stock = 0.00002;
                vol = this.value;
                stockT = stock * vol;
                } else {
                vol = 1;
                }

                if (price == '1,56' && this.value == '24800') {
                stock = 0.00002;
                vol = this.value;
                stockT = stock * vol;
                } else {
                vol = 1;
                }

                if (price == '1,56' && this.value == '35000') {
                stock = 0.00002;
                vol = this.value;
                stockT = stock * vol;
                } else {
                vol = 1;
                }

                if (price == '1,56' && this.value == '49200') {
                stock = 0.00002;
                vol = this.value;
                stockT = stock * vol;
                } else {
                vol = 1;
                }

                if (price == '1,56' && this.value == '74925') {
                stock = 0.00002;
                vol = this.value;
                stockT = stock * vol;
                } else {
                vol = 1;
                }

                if (price == '1,56' && this.value == '100000') {
                stock = 0.00002;
                vol = this.value;
                stockT = stock * vol;
                } else {
                vol = 1;
                }

                if (price == '1,56' && this.value == '150000') {
                stock = 0.00002;
                vol = this.value;
                stockT = stock * vol;
                } else {
                vol = 1;
                }

                document.querySelectorAll('.tabcosti .white')[2].innerText = Math.round((stockT + Number.EPSILON) *100) / 100;
            };
            })*/




/*my try on making it work with all buttons*/

var price;
        var stockT;
        var stock;
        var vol;

        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 == '4960') {
                stock = 0.00002;
                vol = this.value;
                stockT = stock * vol;
                } else {
                vol = 1;
                }

                if (price == '1,56' && this.value == '9900') {
                stock = 0.00002;
                vol = this.value;
                stockT = stock * vol;
                } else {
                vol = 1;
                }

                if (price == '1,56' && this.value == '14875') {
                stock = 0.00002;
                vol = this.value;
                stockT = stock * vol;
                } else {
                vol = 1;
                }

                if (price == '1,56' && this.value == '24800') {
                stock = 0.00002;
                vol = this.value;
                stockT = stock * vol;
                } else {
                vol = 1;
                }

                if (price == '1,56' && this.value == '35000') {
                stock = 0.00002;
                vol = this.value;
                stockT = stock * vol;
                } else {
                vol = 1;
                }

                if (price == '1,56' && this.value == '49200') {
                stock = 0.00002;
                vol = this.value;
                stockT = stock * vol;
                } else {
                vol = 1;
                }

                if (price == '1,56' && this.value == '74925') {
                stock = 0.00002;
                vol = this.value;
                stockT = stock * vol;
                } else {
                vol = 1;
                }

                if (price == '1,56' && this.value == '100000') {
                stock = 0.00002;
                vol = this.value;
                stockT = stock * vol;
                } else {
                vol = 1;
                }

                if (price == '1,56' && this.value == '150000') {
                stock = 0.00002;
                vol = this.value;
                stockT = stock * vol;
                } else {
                vol = 1;
                }

                document.querySelectorAll('.tabcosti .white')[2].innerText = Math.round((stockT + Number.EPSILON) *100) / 100;
            };

            input.onchange = function() {
                if (price == '1,04' && this.value == '4960') {
                stock = 0.000015;
                vol = this.value;
                stockT = stock * vol;
                } else {
                vol = 1;
                }

                if (price == '1,04' && this.value == '9900') {
                stock = 0.000015;
                vol = this.value;
                stockT = stock * vol;
                } else {
                vol = 1;
                }

                if (price == '1,04' && this.value == '14875') {
                stock = 0.000015;
                vol = this.value;
                stockT = stock * vol;
                } else {
                vol = 1;
                }

                if (price == '1,04' && this.value == '24800') {
                stock = 0.000015;
                vol = this.value;
                stockT = stock * vol;
                } else {
                vol = 1;
                }

                if (price == '1,04' && this.value == '35000') {
                stock = 0.000015;
                vol = this.value;
                stockT = stock * vol;
                } else {
                vol = 1;
                }

                if (price == '1,04' && this.value == '49200') {
                stock = 0.000015;
                vol = this.value;
                stockT = stock * vol;
                } else {
                vol = 1;
                }

                if (price == '1,04' && this.value == '74925') {
                stock = 0.000015;
                vol = this.value;
                stockT = stock * vol;
                } else {
                vol = 1;
                }

                if (price == '1,04' && this.value == '100000') {
                stock = 0.000015;
                vol = this.value;
                stockT = stock * vol;
                } else {
                vol = 1;
                }

                if (price == '1,04' && this.value == '150000') {
                stock = 0.000015;
                vol = this.value;
                stockT = stock * vol;
                } else {
                vol = 1;
                }

                document.querySelectorAll('.tabcosti .white')[2].innerText = Math.round((stockT + Number.EPSILON) *100) / 100;
            };
            })

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>

我知道你看不到计算公式，这是因为我有一个excel文件中的所有数据，但函数已经有了它，我使用的数字都在这个文件中

【问题讨论】：

顺便说一句，你为什么用字符串来表示数值？
因为我很笨，忘记改了:')

标签： javascript html css math nan

【解决方案1】：

我解决了我的问题。这太愚蠢了。我只需要你的地方“};”这与其他按钮功能的最后一起。

【讨论】：