根据用户 html-select 输出一个字符串

Question

我有一个表单，用户可以在其中输入从 1 到 10 的数量，还有一个只读文本字段，我需要在其中输出包含计算价格的字符串。也可能是另一个容器之王，但由于位置在格式化单元格内，我不想使用 div。如前所述，购买过程中的任何内容都包含在 post 值（也有验证码）到 php 文件的表单中。就我而言，这是我的代码：

function calculatePrice() {
  var form = document.getElementById('buy_form');
  var num_pieces = parseInt(form.elements.number_select.value);
  var price_for_1 = 9.90; //I know, hardcoded is worst, I'll take it from the DB later on
  var totalprice = price_for_1 * num_pieces;
  document.getElementById("total_price").innerHTML = "Total price: \u20AC " + totalprice;
}

<form method="post" id="buy_form" action="buy.php">

<select name="numberselect" id="number_select" onChange="calculatePrice()">
<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>
<option value="10">10</option>
</select>

<input type=text class="totalprice" id="total_price" style="border: none" readonly>

//a captcha image
//a captcha input field
//a submit button

</form>

该函数根本不在只读文本字段中输出任何内容。我错过了什么？

Answer 1

document.getElementById("total_price").innerHTML

应该是，

document.getElementById("total_price").value

function calculatePrice() {
        var form = document.getElementById('buy_form');
        var num_pieces = parseInt(form.elements.number_select.value);
        var price_for_1 = 9.90; //I know, hardcoded is worst, I'll take it from the DB later on
        var totalprice = price_for_1 * num_pieces;
        document.getElementById("total_price").value = "Total price: \u20AC " + totalprice;
    }

<form method="post" id="buy_form" action="buy.php">

    <select name="numberselect" id="number_select" onChange="calculatePrice()">
        <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>
    </select>

    <input type=text class="totalprice" id="total_price" style="border: none" readonly>
</form>

Answer 2

实际问题是

 document.getElementById("total_price").innerHTML

innerHTML 永远不会起作用，因为 innerHTML 会在 javascript

中获取的元素上添加 HTML 元素

应该用，

document.getElementById("total_price").value

所以函数看起来像这样

function calculatePrice() { 
  var form = document.getElementById('buy_form');
  var num_pieces = parseInt(form.elements.number_select.value);
  var price_for_1 = 9.90; //I know, hardcoded is worst, I'll take it from the DB later on
  var totalprice = price_for_1 * num_pieces;
  document.getElementById("total_price").value = "Total price: \u20AC " + totalprice;
}

希望这会有所帮助

Answer 3

在您的 JavaScript 代码中进行以下更改：

function calculatePrice() {
  var form = document.getElementById('buy_form');
  var num_pieces = parseInt(form.elements.number_select.value);
  var price_for_1 = 9.90; //I know, hardcoded is worst, I'll take it from the DB later on
  var totalprice = price_for_1 * num_pieces;
  document.getElementById("total_price").value = "Total price: \u20AC " + totalprice;
}

window.calculatePrice = calculatePrice;

将 innerHTML 更改为值。
将函数添加到 window 对象。

Answer 4

这可能是您遗漏的小东西。如果这是原生HTML和JS，事件是onchange，而不是onChange

试试这个！

根据用户 html-select 输出一个字符串

output a string depending on a user html-select

javascript

html-select