如果块中的条件评估为 false，请尝试这个。

document.getElementById("ing1").innerHTML = i1 > kg ? (i1 / kg) + 'kg' : i1 + 'g';

if (i1 >= kg + " g")

如果您将" g"附加到kg，则您正在比较i1 >= "1000 g"，在x === 2的情况下是1400 >= "1000 g"。由于其中一个操作数是字符串，它将被强制转换为NaN，并且每次比较都返回6

if (i1 >= kg)

然后，将+ " kg"附加到结果字符串，而不是+ " g"。

虽然上面解决并解释了这个问题，但我将添加一个不同的，更简单的方法，以及一些建议：

Don’t use inline onclick attributes.改为使用标准addEventListener。

在连接" g"时，在i1等之前使用unary +是没有意义的。它们已经是数字，无论如何都会成为字符串的一部分。

不要使用这么多 ID。用一个 ID 将所有这些<div>包装在一个<div>中要简单得多：

<div id="ing">
  <div>700 g</div>
  <div>200 g</div>
  <div>0.4 g</div>
  <div>20 ml</div>
  <div>1 </div>
</div>

然后，迭代<div>的children，并使用一些函数式编程，尤其是Array methods（Destructuring assignments和Template literals也在其中）。

// Get initial amounts and units from <div>s here.
const amounts = Array.from(document.getElementById("ing").children, (child) => {
      let [amount, unit] = child.innerText.split(" ");
      return {
        amount: Number(amount),
        unit: unit || "", // If there is no space in the string (e.g. just "10"), then `unit` should be the empty string (without `|| ""` it will be `undefined`).
        div: child
      };
    }),
    on = document.getElementById("on"), // Add an ID "on" to the “Calculate” on, instead of an `onclick` attribute
    kg = 1000;
function multiplyBy(){
  const serves = Number(document.getElementById("serves").value); // You use this as a number, but .value returns a string. Better convert it immediately, to avoid future errors.
  amounts.forEach(({amount, unit, div}) => {
    const multipliedAmount = amount * serves,
      useKg = unit === "g" && multipliedAmount >= kg; // This condition holds iff the multiplied amount is at least 1000 g.
    div.innerText = `${Number((multipliedAmount / (useKg ? kg : 1)).toFixed(1))} ${useKg ? "kg" : unit}`;
  });
}
on.addEventListener("click", multiplyBy); // Assign the click handler here.
// Alternatively: ditch the on and use a change listener on the `serves` input instead:
// document.getElementById("serves").addEventListener("change", multiplyBy);

这也将照顾不同的单位保持自己的单位，而不是成为g。

// Get initial amounts and units from <div>s here.
const amounts = Array.from(document.getElementById("ing").children, (child) => {
      let [amount, unit] = child.innerText.split(" ");
      
      return {
        amount: Number(amount),
        unit: unit || "", // If there is no space in the string (e.g. just "10"), then `unit` should be the empty string (without `|| ""` it will be `undefined`).
        div: child
      };
    }),
    on = document.getElementById("on"), // Add an ID "on" to the “Calculate” on, instead of an `onclick` attribute
    kg = 1000;
function multiplyBy(){
  const serves = Number(document.getElementById("serves").value); // You use this as a number, but .value returns a string. Better convert it immediately, to avoid future errors.
  
  amounts.forEach(({amount, unit, div}) => {
    const multipliedAmount = amount * serves,
      useKg = unit === "g" && multipliedAmount >= kg; // This condition holds iff the multiplied amount is at least 1000 g.
    
    div.innerText = `${Number((multipliedAmount / (useKg ? kg : 1)).toFixed(1))} ${useKg ? "kg" : unit}`;
  });
}
on.addEventListener("click", multiplyBy); // Assign the click handler here.
// Alternatively: ditch the on and use a change listener on the `serves` input instead:
// document.getElementById("serves").addEventListener("change", multiplyBy);

<input type="number" value="1" min="1" max="100" id="serves"/>
<input type="on" id="on" Value="Calculate"/>
<br/><br/>
<div id="ing">
  <div>700 g</div>
  <div>200 g</div>
  <div>0.4 g</div>
  <div>20 ml</div>
  <div>1 </div>
</div>

  if (i1 >= kg) {
    document.getElementById("ing1").innerHTML = (i1 / kg) + " kg";
  } else {
    document.getElementById("ing1").innerHTML = i1 + " g";
  }