2016-05-24 14 views
0

私はBest Buy製品APIを使用して簡単な価格確認ウェブサイトを作成することによってJavaScriptを学びたいと考えています。JavaScriptを手動でテストするにはどうすればよいですか?

どうすればjavascriptを実行できますか?私のフォームは、プロダクトID番号(SKU)を受け取り、サブミット時にvalidateSKU()に送信します。関数processData(data)は、SKUを使用して製品を検索します。

私がサイトをテストしても何も起こっていません。どんな助けでも大丈夫です。ありがとう!

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>Learn JavaScript</title> 
 
</head> 
 

 
<body> 
 
    <form id="bestBuyForm" name="bestBuyForm" onsubmit="validateSKU()"> 
 
    <input id="SKU" name="SKU" required="" type="text"> 
 
    <label for="SKU">SKU</label> 
 

 
    <input id="email" name="email" type="email"> 
 
    <label for="email">Email</label> 
 

 
    <input class="button" id="submit" name="submit" type="submit"> 
 
    </form> 
 
    <script> 
 
    function validateSKU() { 
 
     var SKU = document.forms["bestBuyForm"]["SKU"].value; 
 
     var bby = require('bestbuy')('process.env.BBY_API_KEY'); 
 
     var search = bby.products('sku=' + SKU); 
 
     search.then(processData); 
 
    } 
 

 
    function processData(data) { 
 
     if (!data.total) { 
 
     console.log('No products found'); 
 
     } else { 
 
     var product = data.products[0]; 
 
     console.log('Name:', product.name); 
 
     console.log('Price:', product.salePrice); 
 
     } 
 
    } 
 
    </script> 
 
</body> 
 

 
</html>

+0

コンソールですべてのエラーを参照していますか? – ray

+0

それはjavascriptを学ぶ最も良い方法ではない、そのような "F1トラックを運転することを学ぶ" –

+0

@rayエラーは表示されません。送信をクリックすると、ページが更新されるだけです。私がjavascriptをtest.jsファイルに入れ、 "var SKU = 1234567"とし、コンソールに "node test.js"と入力すると、スクリプトは意図したとおりに実行されます。 – user5473154

答えて

0

使用web consoleconsole APIについて起こると読まないかを確認します。

validateSKUをHTML要素addEventListenerメソッドでバインドしてください。また、送信時にページの再読み込みを引き起こすデフォルトのフォーム動作を防止する必要があります。 event.preventDefault()に電話してください。

Working exampleコード:

<html> 
    <form id="someForm"> 
     ... 
     <button type="submit">Submit</submit> 
    </form> 
    <script> 
    function validateSKU(event) { 
     console.log('IT works'); 
     event.preventDefault(); 
     // ...here your code 
    } 

    var form = document.getElementById('someForm'); 

    form.addEventListener('submit', validateSKU, false); 
    </script> 
</html> 
関連する問題