只有陣列的最后一個元素起作用

我目前正試圖在一個食譜的成分部分添加一個函式，該函式將根據份量來計算數值（這是為一個烹飪網站準備的）。 我的問題是只有陣列的最后一項在做這件事。其他的都沒有改變它們的值。

我的JS看起來像這樣：

。

var refresh = document. getElementById("refresh-portion")。
var zutatendata = document.getElementsByClassName("zutaten-data") 。

for (var i = 0; i < zutatendata.length; i  )
  {
  var array = [zutatendata[i]]; console.log（zutatendata[i]）。

  array.forEach（function(elem) 
    {
    var initial = elem.innerHTML;

    refresh.onclick = function() 
      {
      var input = document.getElementById("custom-portion").value。
      var result = initial * Number（input）。

      if (result.toString(). length > 5) result = result.toFixed（1）。
 
      elem.innerHTML = result   " "/span>;
      }
    })
  }

< link rel="styleheet" href="https: //cdnjs. cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" >/span>

<p id="portions"/span>>
  贈與 
  < input type="text" value="1" id="custom-portion">  
  <button id="refresh-portion">
    <i class="fas fa-sync"/span>> </i>>
  </button>  
  部分內容
</p>/span>

<div class="grid">/span>
  <div class=" item"> M?hren</div>。
  <div class=" item">
    <p class="zutaten-data">/span>0. 33</p>/span>kg
  </div>kg
  <div class=" item"> Kartoffeln</div>。
  <div class=" item">
    <p class="zutaten-data"/span>> 2</p>Stück
  </div>
  <div class=" item"> Brühe</div>。
  <div class=" item">
    <p class="zutaten-data"/span>> 1</p> l
  </div>l
  <div class=" item"> Butter</div>/span>
  <div class=" item">
    <p class="zutaten-data"/span>> 5</p>/span>kg
  </div>kg
</div>/span>
</div>/span>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" class="snippet-box-edit snippet-box-result" frameborder="0"></iframe>

如果你能告訴我為什么其他的值沒有被乘以，那就太好了。

uj5u.com熱心網友回復：

清理了你的html，并將dafault值添加為資料屬性。

還洗掉了重繪 按鈕，因為值在變化時被更新。

輸入的最小值是0，所以你不會得到奇怪的值。

。

const portion = document. querySelector("#portion")。

portion.addEventListener("change", (e) =>/span>{
  const amounts = document.querySelectorAll(".imount")
    .forEach(amount => amount。 textContent = Number( amount.dataset.default) * e.target.value）。)
});

#portions {
  display: flex;
  height: 2rem;
  padding: 0 1rem;
  align-items: center;
}

#portions> * {
  margin: 0 1rem;
}

. ingredients {
  display: flex;
  flex-direction: column;
  padding: 0 2rem;
}

.item {
  display: flex;
  justify-content: space-between;
}

.金額 {
  text-align: right;
}

<div id="portions"> /span>
  <span>Für</span>/span>
  < input id="partition" type="number" value="1" min="0" />。 
  <p>Portionen</p> 
</div>/span>

<ul class=" ingredients">
  <li class=" item">
    <div class="title"/span>> Mohren</div>/span>
    <div class="金額" data-default="0。 33">0.33</div>/span>
    <span class="單位"> kg</span>/span>
  </li>/span>
  <li class="item">/span>
    <div class="title"/span>> Kartoffeln</div>>
    <div class="金額" data-default="2"/span>> 2</div>
    <span class="unit"/span>> Stück</span>。
  </li>/span>
  <li class="item">/span>
    <div class="title"/span>> Bruhe</div>>
    <div class="金額" data-default="1"/span>> 1</div>
    <span class="unit"/span>> l</span>/span>
  </li>/span>
  <li class="item">/span>
    <div class="title"/span>> Butter</div>/span>
    <div class=" amount" data-default="5" /span>> 5公斤</div> 
    <span class="單位"> kg</span>/span>
  </li>/span>
</ul>/span>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" class="snippet-box-edit snippet-box-result" frameborder="0"></iframe>

uj5u.com熱心網友回復：

我想你正在尋找這樣的東西？

。
const
 customPortion = document.querySelector('#custom-portion')
, refreshBt = document.getElementById('refresh-portion')
, zutatendata = document.querySelectorAll(' .zutaten-data' )
, portionTxt = document.querySelector('#refresh-portion').nextSibling。
, gFract = (()=>)
  {              
  let fractions = [3,6,7,8,9] 。 map(x=>({t: x,f:1/x})
                                      //允許建立有用的分數。
  return (str) => //ex 2.33 => {value: 2, tenths: 3}
    { //其中3是1的除法
    let // (0.33 == 1/3) 
      value = Number(str.trim())
    , intVal = Math.floor(value)
    , decim = value - intVal
    , delta = 10 。
    , tenths = 0 。
      ;
    for (let ref of fraction) 
      {
      let d = Math.abs(ref.f - decim)
      if (d < delta)
        {
        delta = d
        tenths = ref.t 
        }
      }
    if (delta < 0.01) value = intVal
    else tenths = 0.
    return ({ value, tenths })
  } }
)()
, setTenths = el => 
    {  分數減去0
    let 
      n = Number(el.textContent)
    , i = Math.floor(n)
    , d = n - i
      ;
    if (d===0) el.textContent = i 
    // el.textContent = i 
    // el.dataset.tenths = d==0 ? '' : d.toFixed(2).slice(-3).
    };

// init : 為每個zutatendata添加def屬性。
zutatendata.forEach( zd => 
  { 
  zd.def = gFract（zd.textContent）。
  setTenths(zd)
  })
customPortion.value = '1'。
portionTxt.textContent = ' portion'。

customPortion.oninput = () => //只對整數值進行輸入控制。
  {
  let portions = parseInt(customPortion.value. replace(D/g,''/span>), 10) || 1)
  if (portions < 0) portions = 1.
  customPortion.value = portions
  portionTxt.textContent = (portions > 1) ? ' portionen' : ' portion'.
  }
refreshBt.onclick = () => 
  {
  zutatendata.forEach(zd=>)
    {
    let val = zd.def.value * customPortion.valueAsNumber. 
    if (zd.def.tenths > 0) val  = customPortion。 valueAsNumber / zd.def.tenths。
    zd.textContent = val.toFixed(2)
    setTenths(zd)
    })
  }

：root{
  --nice_bg : #cbdbf0af;
}
* {
  font-family : Arial, Helvetica, sans-serif;
  font-size : 20px;
  }
#portions input {
  width : 4em;
  padding : .1em .4em;
  text-align : right;
  box-sizing : border-box;
  direction : rtl;
  border : none;
  background : var（--nice_bg）。
  }
#portions button {
  cursor : 指標。
  background : transparent;
  color : 綠色。
  border : none;
  padding : .2em .4em;
  }
#portions button：hover {
  background : var（--nice_bg）。
  }
.grid {
  display: grid;
  grid-template-columns: 8em 8em;
}
.grid div {
  margin-top : .2em;
  height : 1.8em;
  line-height : 1.8em;
  background : var（--nice_bg）。
  padding-left : .3em;
}
div.item > p { 
  display : inline-block; 
  padding : 0 .1em;
  margin : 0;
  font-weight : bold;
  width : 4em;
  text-align : right;
}
/*.
.zutaten-data::after {
  內容 : attr(data-tenths);
  顯示 : inline-block;
  寬度 : 1.7em;
  text-align : left;
}
*/

< link rel="styleheet" href="https: //cdnjs. cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" >/span>

<p id="portions"/span>>
  贈與 
  < input type="number"/span> value="1" id="custom-proportion" min="1"/span> step="1"/span> >  
  <button id="refresh-portion"> 
    <i class="fas fa-sync"/span>> </i>>
  </button>  
  部分內容
</p>/span>
<div class="grid">/span>
  <div class=" item"> M?hren</div>。
  <div class=" item">
    <p class="zutaten-data">/span>0. 33</p>/span>kg
  </div>kg
  <div class=" item"> Kartoffeln</div>。
  <div class=" item">
    <p class="zutaten-data"/span>> 2</p>Stück
  </div>
  <div class=" item"> Brühe</div>。
  <div class=" item">
    <p class="zutaten-data"/span>> 1</p> l
  </div>l
  <div class=" item"> Butter</div>/span>
  <div class=" item">
    <p class="zutaten-data"/span>> 5</p>/span>kg
  </div>kg
</div>/span>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" class="snippet-box-edit snippet-box-result" frameborder="0"></iframe>

uj5u.com熱心網友回復：

你需要在點擊時翻閱這些專案。請記住，如果沒有在陣列或物件中的某個地方初步存盤這些值，將使這個函式正常作業，只是一個。因為你是以html的形式讀取數值，因此，例如第1項將是2 -> 0.66，但如果你再次點擊，它將變成0.66*2，這是不正確的。

var refresh = document. getElementById("refresh-portion")。


refresh.onclick = function（） {
  var input = document.getElementById("custom-portion").value。

  var zutatendata = document.getElementsByClassName("zutaten-data") 。

  for (var i = 0; i < zutatendata.length; i  ) {
    var array = [zutatendata[i]]。

    console.log（zutatendata[i]）。

    array.forEach(function(elem) {
      var initial = elem.innerHTML;
      var result = initial * Number（input）。

      if (result.toString().length > 5) {
        result = result.toFixed（1）。
      }

      elem.innerHTML = result   " "/span>;
    });
  }

};

你可以在一個物件中存盤基礎值，然后用這些值乘以輸入值。

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/318878.html

標籤：

上一篇：C#中的通用部分方法？

下一篇：將文本在Flex列中水平居中