Question

嘿，我对此很麻烦

enter image description here

请点击以获取说明。由于某些原因，图片未加载。

这是我当前的代码，老实说，我很困惑，并不真正知道该如何处理。我是javascript的新手，并尝试将其作为即将进行的考试的练习。我真的希望有人可以帮助我解决这个问题。我知道javascript尚未完成，而我目前所拥有的可能是错误的，但是我对在何处使用感到困惑。谢谢

  Function tips() {
                var mealCost=parseFloat(document.getElementById("txtMealCost").value);
                var Great1= document.getElementById("great");
                var Okay2= document.getElementById("okay");
                var Poor3= document.getElementById("poor");
                var totalCost1= mealCost * .20
                if (document.getElementById("great").checked) {
                    
                
                    
                    
                    
                }
            }

  
        <h1>Tip Calculator</h1>
        <hr>
        <span>What was the cost of your meal? </span>
        <input type="text" id="txtMealCost" />
        <hr>
        How would you rate the service?<br>
        Great (20%) <input type="radio" name="radServiceQuality" id="great"> <br>
        Okay (15%) <input type="radio" name="radServiceQuality" id="okay"> <br>
        Poor (10%) <input type="radio" name="radServiceQuality" id="poor"> <br>
    
        <p><input type="button" value="Calculate Tip Amount" onclick="calcTip()">
    
            <div id="output">
            </div>

Answer 1

您可以这样做，

// es6 style function, same as "function(){...}"
tips = () => {
  // Getthe selected radio 
  let selected = document.querySelector(`input[name='radServiceQuality']:checked`);
  // If a radio is selected 
  if (selected) {
    // Cast as number
    var mealCost = +document.getElementById("txtMealCost").value;
    // Format the number as curency
    let totalCost = new Intl.NumberFormat('en-US', {
      style: 'currency',
      currency: 'USD'
    }).format(selected.value * mealCost);
    // Set output string
    document.getElementById('output').innerText = totalCost;
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>IT-130 Exam</title>
</head>

<body>
  <h1>Tip Calculator</h1>
  <hr>
  <span>What was the cost of your meal? </span>
  <input type="text" id="txtMealCost" />
  <hr> How would you rate the service?
  <br> Great (20%) <input type="radio" id='great' name="radServiceQuality" value=".2">
  <br> Okay (15%) <input type="radio" id='okay' name="radServiceQuality" value=".15">
  <br> Poor (10%) <input type="radio" id='poor' name="radServiceQuality" value=".1"> <br>

  <p><input type="button" value="Calculate Tip Amount" onclick="tips()">

    <div id="output"></div>
</body>

</html>

IFF不允许更改HTML，这可以解决问题：

// Helper function to determine percent to apply
getPercent = selectedId => {
  switch (selectedId) {
    case 'great':
      return .2;
    case 'okay':
      return .15;
    case 'poor':
      return .1;
  }
};

// es6 style function, same as "function(){...}"
calcTip = () => {
  // Getthe selected radio 
  let selected = document.querySelector(`input[name='radServiceQuality']:checked`);
  // If a radio is selected 
  if (selected) {
    // set percent
    let percent = getPercent(selected.id);
    // Cast as number
    var mealCost = +document.getElementById("txtMealCost").value;
    // Format the number as curency
    let totalCost = new Intl.NumberFormat('en-US', {
      style: 'currency',
      currency: 'USD'
    }).format(percent * mealCost);
    // Set output string
    document.getElementById('output').innerText = totalCost;
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>IT-130 Exam</title>
</head>

<body>
  <h1>Tip Calculator</h1>
  <hr>
  <span>What was the cost of your meal? </span>
  <input type="text" id="txtMealCost" />
  <hr> How would you rate the service?<br> Great (20%) <input type="radio" name="radServiceQuality" id="great"> <br> Okay (15%) <input type="radio" name="radServiceQuality" id="okay"> <br> Poor (10%) <input type="radio" name="radServiceQuality" id="poor">  <br>

  <p><input type="button" value="Calculate Tip Amount" onclick="calcTip()">

    <div id="output">
    </div>
</body>

</html>

希望这会有所帮助，

Answer 2

提供的要求不够明确。假设您只需要一个简单的输出，则在函数调用中应该执行的操作是

1。找到所选单选按钮的值

document.querySelector('input[name="radServiceQuality"]:checked').value

2a。确定小费比

if (selected_value = 'great') tip_percentage = 0.2;

2b。计算小费

tip = meal_cost * tip_percentage;

3。输出提示

alert(tip);

您应该阅读一些javascript基本教程。并继续使用Google搜索。

无法通过单选按钮的if else语句弄清楚此代码

2 个答案: