Question

我的代码专注于烹饪（香蕉面包食谱）。根据人数的不同，有时我会制作两种香蕉面包，而不是一种。因此，我使用选择工具通过更改每种成分的数量来解决这一问题。但是，我的问题是JavaScript将分数转换为小数。我想将数字保留为零，因为这是大多数烹饪的完成方式。

理想示例
如果选择1，则表示2杯面粉， 1/2 茶匙盐。
如果选择2，则表示4杯面粉，1茶匙盐。
如果选择3，则表示6杯面粉， 1½茶匙盐。

实际发生的情况：
如果选择1，则表示2杯面粉， 0.5 茶匙盐。
如果选择2，则表示4杯面粉，1茶匙盐。
如果选择3，则表示6杯面粉， 1.5 茶匙盐。

代码：

<body>
<script>

   // Step 1: Find the element we want the event on

     var button = document.getElementById("button");

   // Step 2: Define the event listener function

     var onButtonClick = function() {
        var selection = document.getElementById("quantity").value;
        const breadsQuantity = parseInt(selection, 10);

        document.getElementById('amount').innerHTML = breadsQuantity * 2;
        document.getElementById('amount2').innerHTML = breadsQuantity * 0.5;
                                    }

   // Step 3: Attach event listener to element

         button.addEventListener("click", onButtonClick);

</script>

<!-- HTML SNIPPIT -->

<label>How many Banana Bread's are you making? </label>

    <select id="quantity">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
    </select><br><br>

    <button id="button" type="button">
        Let's get started!
    </button>

    <p>
        Step 1: Add
        <span id="amount">2</span> cups flour and
        <span id="amount2">&frac12;</span>
        tsp salt into a large, dry bowl.
    </p>
 </body>

Answer 1

JavaScript不会将分数“转换”为小数。定义他们是同一回事。您想要的是这些值的另一种表示形式。

使用Unicode符号来实现您的目标：

例如，用½代替0.5：

<span>Sugar: &#189; cup</span>

从这里：

http://unicodefractions.com

这是一个快速的实现，展示了如何完成此操作：

var button = document.getElementById("button");
var onButtonClick = function() {
  var selection = document.getElementById("quantity").value;
  const breadsQuantity = parseInt(selection, 10);
  document.getElementById('amount').innerHTML = breadsQuantity * 2;
  document.getElementById('amount2').innerHTML = getFraction(breadsQuantity * 0.5);
}
button.addEventListener("click", onButtonClick);


function getFraction(measure) {
  const measures = {
    half: "&frac12;",
    onethird: "&‌#8531;",
    twothird: "&‌#8532;",
    quarter: "&frac14;",
    threequarter: "&frac34;"
  };
  let out = '';
  if (measure > 1) {
    out = parseInt(measure);
    measure = measure - out;
  }
  switch (measure) {
    case (1 / 2):
      out += measures.half;
      break;
    case (1 / 3):
      out += measures.onethird;
      break;
    case (2 / 3):
      out += measures.twothird;
      break;
    case (1 / 4):
      out += measures.quarter;
      break;
    case (3 / 4):
      out += measures.threequarter;
      break;
    default:
      out += measure;
  }
  return out;
}

<label>How many Banana Bread's are you making? </label>

<select id="quantity">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
</select><br><br>

<button id="button" type="button">
        Let's get started!
    </button>

<p>
  Step 1: Add
  <span id="amount">2</span> cups flour and
  <span id="amount2">&frac12;</span> tsp salt into a large, dry bowl.
</p>

请注意输入值必须四舍五入，才能正确使用计算值。

我可以阻止javascript将HTML分数更改为小数吗？

1 个答案: