Question

在这里，我试图根据座位选择来计算车票价格为此，我确实在互联网上进行了搜索，然后发现堆栈中有一些相关的内容，但它不起作用

以下是html的一些小问题，它帮助我摆脱了无法通过选择价值计算出利率的问题

这是我的js

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<script type="text/javascript">
    $('#quantity').change(function(){
      var qty = $('#quantity').val();
      var price = $('#productPrice').val();
      var total = price * qty;
      $("#totalprice").val(total);
    });
    </script>

    <div class="pricesection">
            <input type="hidden" id="productPrice" value="340"/>
        Quantity: 
        <select id="quantity">
            <option value="1" selected>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>
            <option value="10">10</option>
        </select>
    Total: $
    <input type="text" id="totalprice" value="340"/>

Answer 1

您可能尚未发布的其他代码中有冲突（我关闭了div，但没有其他内容）。这是一个有效的示例，可以帮助您进行故障排除。

$('#quantity').change(function() {
  var qty = $('#quantity').val();
  var price = $('#productPrice').val();
  var total = price * qty;
  $('#totalprice').val(total);
});

<div class="pricesection">
  <input type="hidden" id="productPrice" value="340" />
  Quantity:
  <select id="quantity">
    <option value="1" selected>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>
    <option value="10">10</option>
  </select>
  Total: $
  <input type="text" id="totalprice" value="340" />
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

使用parseInt（）将字符串转换为数字

  var qty =parseInt($('#quantity').val());
  var price = parseInt($('#productPrice').val());
  var total = price * qty;
  $("#totalprice").val(total);

Answer 3

您的代码没有问题，但是顺序是正确的。脚本代码在您文章中位于文档内部元素上方的位置。 WEB中的运行顺序是逐行的，因此当您的脚本要求$（“＃quantity”）时，它将得到一个undefined作为答案。您需要做的就是将脚本移动到文档元素之后。

另一个解决方案是创建脚本文件，并将其与DOM元素的后初始化一起使用-诸如此类：

$(document).ready(function() { /* code here */ })

您可以在此处了解更多信息：window.onload vs document.onload

请注意，当script标签位于元素初始化之后，以下代码是完美的：

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

    <div class="pricesection">
            <input type="hidden" id="productPrice" value="340"/>
        Quantity: 
        <select id="quantity">
            <option value="1" selected>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>
            <option value="10">10</option>
        </select>
    Total: $
    <input type="text" id="totalprice" value="340"/>
    
    <script type="text/javascript">
    $('#quantity').change(function(){
      var qty = $('#quantity').val();
      var price = $('#productPrice').val();
      var total = price * qty;
      $("#totalprice").val(total);
    });
    </script>

尝试使用javascript和html5计算费率运行时间

3 个答案: