私は、割引価格を計算し、ウェブページ自体に表示するウェブページを開発しようとしています。主なことは、両方の関数を同じonclickイベントで起動することですが、実行しないでください。初心者であれば、関数が間違って記述されているかどうかわかりません。私は1つのid = "discount"に割引率を表示し、別のid = "result"に割引価格を表示する必要があります。私がどこを台無しにしているのか理解できませんでした。JavaScriptを実行しない
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%";
}
}
<!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>
、ボタンをクリックしてください開発ツールのコンソールをチェック - エラー 'にReferenceError参照してください。 - あなたが定義されていない変数' selected'を使用するためです選択はdefined'ではありません。ヒント: 'summer'と' newyear'も定義されていません –
私はそれをスクリプトで定義しました。 varを使って定義した場合、値を ""内に入れる必要がありますか? –
おそらく 'calculate'にありますが、最初に呼び出される' display_sale'ではなく、 'claculate'の定義はdisplay_saleで利用できません –