JS函数返回NaN

Posted 2023-03-11

【中文标题】JS函数返回NaN

【英文标题】：JS Function return 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文件中的所有数据，但函数已经有了它，我使用的数字都在这个文件中

【问题讨论】：

顺便说一句，你为什么用字符串来表示数值？

因为我很笨，忘记改了:')

【参考方案1】：

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