Question

我正在尝试开发一个计算折扣价格并在网页上显示的网页。最重要的是用相同的onclick事件激活这两个函数，但是它不会运行，就我初学者而言，我不知道函数是否写错了或其他东西。我需要在一个id =＆＃34;折扣＆＃34;中显示折扣百分比。和另一个id =＆＃34;结果＆＃34;的折扣价格。无法弄清楚我陷入困境的地方，任何帮助都会受到赞赏。

＆＃13;

function calculate() {
  var product_name = document.getElementById('name').value;
  var product_price = document.getElementById('price').value;
  var select = document.getElementById("sale");
  var selected = select.options[select.selectedIndex].value;
  if (selected == summer) {
    var discount_price = product_price - (product_price * 0.10);
  } else if (selected == newyear) {
    var discount_price = product_price - (product_price * 0.05);
  } else {
    var discount_price = product_price - (product_price * 0.15);
  }
  // body...
}

function display_sale() {
  if (selected == summer) {
    document.getElementById('discount').innerHTML = "The discount is 10%";
  } else if (selected == newyear) {
    document.getElementById('discount').innerHTML = "The discount is 5%";
  } else {
    document.getElementById('discount').innerHTML = "The discount is 15%";
  }
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <div class="container">
    <form>
    <h1>DISCOUNT PRICE</h1>
    <table>
        <tr>
            <td>Product Name</td>
            <td colspan="2"><input type="text" name="name" id="name" pattern="[a-zA-Z\s]+" required="required"></td>
        </tr>
        <tr>
            <td>Product Price</td>
            <td colspan="2"><input type="text" name="price" id="price" pattern="([1-9][0-9]*(\.[0-9]*[1-9])?|0\.[0-9]*[1-9])" required="required"></td>
        </tr>
        <tr>
            <td>Season</td>
            <td colspan="2"><select id="sale">
                  <option value="summer">SUMMER SALE</option>
                  <option value="newyear">NEW YEAR SALE</option>
                  <option value="clearance">CLEARANCE SALE</option>
                </select>
            </td>
        </tr>
    </table><br/>
    <div  style="margin-left: 40%">
    <button type="submit" onclick="calculate();"> GET DISCOUNT PRICE</button>
    </div>
    <div id="discount">

    </div>
    <div id="result">

    </div>
</div>
</form>
</body>

</html>

＆＃13;

Answer 1

只需在函数范围内定义选定的变量，并在引号中使用字符串（“”或“）

编辑：请阅读有关范围的信息。您应该在您的函数可以访问它的某个地方定义选定的变量。当你在js中使用字符串时，你应该将它们包装在''中，请仔细检查你的代码，应用它，如果你有任何其他问题，请回到这里。

编辑2：如果您不想提交任何内容，请不要在您的按钮元素中 type =“submit”。如果你想在javascript中提交表单，你可以为表单设置一个id，并在js中获取元素并使用元素的submit函数。

var selected;
function calculate() {
  var product_name = document.getElementById('name').value;
  var product_price = document.getElementById('price').value;
  var select = document.getElementById("sale");
  selected = select.options[select.selectedIndex].value;
  if (selected == 'summer') {
    var discount_price = product_price - (product_price * 0.10);
  } else if (selected == 'newyear') {
    var discount_price = product_price - (product_price * 0.05);
  } else {
    var discount_price = product_price - (product_price * 0.15);
  }
  // body...
}

function display_sale() {
  if (selected == 'summer') {
    document.getElementById('discount').innerHTML = "The discount is 10%";
  } else if (selected == 'newyear') {
    document.getElementById('discount').innerHTML = "The discount is 5%";
  } else {
    document.getElementById('discount').innerHTML = "The discount is 15%";
  }
}

<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <div class="container">
    <h1 style="margin-left: 35%"><em>DISCOUNT PRICE</em></h1>
    <table>
      <tr>
        <td>Product Name</td>
        <td colspan="2"><input type="text" name="name" id="name"></td>
      </tr>
      <tr>
        <td>Product Price</td>
        <td colspan="2"><input type="text" name="price" id="price"></td>
      </tr>
      <tr>
        <td>Season</td>
        <td colspan="2">
          <select id="sale">
            <option value="summer">SUMMER SALE</option>
            <option value="newyear">NEW YEAR SALE</option>
            <option value="clearance">CLEARANCE SALE</option>
          </select>
        </td>
      </tr>
    </table><br/>
    <div style="margin-left: 40%">
      <button type="submit" onclick="display_sale(); calculate();"> GET DISCOUNT PRICE</button>
    </div>
    <p id="discount"></p>
    <p id="result"></p>
  </div>
</body>

</html>

javascript无法运行

1 个答案: