Javascript 不會運行
[英]The Javascript wont run
問題描述
我正在嘗試開發一個計算折扣價格並顯示在網頁本身上的網頁。 最主要的是用相同的onclick事件觸發這兩個函數，但它不會運行，就我初學者而言，我不知道這些函數是寫錯了還是別的什么。 我需要在一個id="discount"顯示折扣百分比，在另一個id="result"折扣價格。 無法弄清楚我在哪里搞砸了，任何幫助將不勝感激。
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>
1 個解決方案
解決方案1
3 已采納 2017-08-06 23:35:49
只需在函數范圍之外定義您選擇的變量並在引號中使用字符串（" " 或 ' '）
編輯：請閱讀有關范圍的信息。 你應該在你的函數可以訪問它的地方定義你選擇的變量。 同樣，當您在 js 中使用字符串時，您應該將它們包裹在 ' ' 中，請仔細檢查您的代碼，應用它，如果您有任何其他問題，請回到這里。
編輯 2：此外，如果您不想提交任何內容，請不要在按鈕元素中鍵入 =“提交” 。 如果你想在javascript中提交表單，你可以為你的表單設置一個id並在js中獲取元素並使用元素的提交功能。
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“ if”語句將無法運行
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.