2017-08-06 13 views
0

私は、割引価格を計算し、ウェブページ自体に表示するウェブページを開発しようとしています。主なことは、両方の関数を同じ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>

+0

、ボタンをクリックしてください開発ツールのコンソールをチェック - エラー 'にReferenceError参照してください。 - あなたが定義されていない変数' selected'を使用するためです選択はdefined'ではありません。ヒント: 'summer'と' newyear'も定義されていません –

+0

私はそれをスクリプトで定義しました。 varを使って定義した場合、値を ""内に入れる必要がありますか? –

+0

おそらく 'calculate'にありますが、最初に呼び出される' display_sale'ではなく、 'claculate'の定義はdisplay_saleで利用できません –

答えて

3

だけ関数スコープの外にあなたの選択変数を定義し、引用マークで文字列を使用する(」 "または '「)

編集:スコープについてお読みください。あなたの関数がそれにアクセスすることができます選択変数のどこかを定義する必要があります。また、jsで文字列を使用する場合は、 ''で囲む必要があります。コードを再確認して適用してから、他の問題があればここに戻ってください。

編集2:何も送信したくない場合は、タイプ= "submit"をボタン要素に入れないでください。 javascriptでフォームを送信する場合は、フォームのIDを設定してjsで要素を取得し、要素のsubmit関数を使用できます。

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>

+0

htmlフォーム検証機能を適用したときにすぐにクリックアンドポインダーで実行された理由は何ですか? –

+0

更新スニペットは –

+0

を@javadご確認くださいまた、同様にあなたのJSコード、およびHTMLを修正する更新の答えをチェックし@ShivamSrivastava – Javad

関連する問題