我有一个表单,用户输入1到10的数量,以及一个只读文本字段,我需要输出一个计算价格的字符串。也可能是容器的另一个王者,但由于位置在格式化的单元格内,我宁愿不使用div。如上所述,任何内容都在一个表单中,用于将值(也有验证码)发布到购买过程的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>
该函数不会在只读文本字段中输出任何内容。我错过了什么?
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>
实际问题是
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;
}
希望这会有所帮助
在您的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;
这可能是你想念的小事。如果这是本机HTML和JS,则事件是onchange,而不是onChange
试试这个!