Question

背景
我的代码专注于烹饪（香蕉面包食谱）。根据人数的不同，有时我会制作两种香蕉面包，而不是一种。但是，当我编写食谱代码时，HTML中的所有成分都对应一个香蕉面包。因此，当我煮两根香蕉面包时，我不小心使用了一根香蕉面包所用的配料量。我想创建一个下拉菜单来更改配料数量。

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

代码

// 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 n1 = document.getElementById("n1");
  var selection = document.getElementById("quantity").value;

  if(selection === 'a')
  {
    document.getElementById('n1').value = n1;
  }

  if(selection === 'b')
  {
    document.getElementById('n1').value = n1*2;
  }

  if(selection === 'c')
  {
    document.getElementById('n1').value = n1*3;
  }

  // Step 3: Attach event listener to element
  button.addEventListener("click", onButtonClick);
}

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


<!-- Selection -->
<select id="quantity">
  <option value="a">1</option>
  <option value="b">2</option>
  <option value="c">3</option>
</select><br><br>


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


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

Answer 1

在此部分，您必须将1/2的ID更改为其他值。在我的示例中，我将ID更改为amount2。

 Step 1: Add 2 cups flour and ½ tsp salt into a large, dry bowl. 

document.getElementById("button").addEventListener("click", onButtonClick);

function onButtonClick(){
  document.getElementById("amount").innerText = 2;
  document.getElementById("amount2").innerText = 1/2;
  var n1 = document.getElementById("amount").innerText;
  var n2 = document.getElementById("amount2").innerText;
  var selection = document.getElementById("quantity").value;

  if (selection === 'a') {
    document.getElementById('amount').innerText = n1;
    document.getElementById('amount2').innerText = n2;
  }

  if (selection === 'b') {
    document.getElementById('amount').innerText = n1*2;
    document.getElementById('amount2').innerText = n2*2;
  }

  if (selection === 'c') {
    document.getElementById('amount').innerText = n1*3;
    document.getElementById('amount2').innerText = n2*3
  }
}

这应该适合您根据从下拉列表中选择的数量在正确的杯子面粉和一茶匙盐之间进行切换所需的内容。我不知道有一种简单的方法可以在您的显示器上显示出一小撮盐，因此在此示例中，使用时将小数点后移至小数点。

Answer 2

尝试一下：

	<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">1</span>
		/ 2 tsp salt into a large, dry bowl.
	</p>

	<script>
	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 = breadsQuantity;
	}

    button.addEventListener("click", onButtonClick);

</script>

如何更改配方中的成分以与用户输入相对应？

2 个答案: