2016-05-24 22 views
0

Ich versuche, JavaScript zu lernen, indem ich eine einfache Preisüberprüfung Website mit der Best Buy-Produkte API.Wie kann ich JavaScript manuell testen?

Wie kann ich das Javascript "ausführen"? Mein Formular nimmt eine Produkt-ID-Nummer (die SKU) auf und sendet sie beim Absenden an validateSKU(). Die Funktion processData (data) sucht mit der SKU nach dem Produkt.

Nichts passiert, wenn ich die Seite teste, und jede Hilfe wäre großartig; Vielen Dank!

<!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

Sie Fehler in der Konsole sehen Sie? – ray

+0

es ist nicht der beste Weg, um JavaScript zu lernen, es ist wie "lernen, auf F1-Track zu fahren" –

+0

@ray Keine Fehler angezeigt. Wenn ich auf "Senden" klicke, passiert nur, dass die Seite aktualisiert wird. Wenn ich das Javascript in eine test.js-Datei setze und "var SKU = 1234567" mache und "node test.js" in die Konsole eintippe, läuft das Skript wie vorgesehen. – user5473154

Antwort

0

Verwenden web console zu sehen, was über die console API geschieht und lesen.

Versuchen Sie, validateSKU mit HTML-Element addEventListener-Methode zu binden. Außerdem sollten Sie das Verhalten des Standardformulars verhindern, das zum erneuten Laden der Seite beim Senden führt. Rufen Sie event.preventDefault().

Working example Code:

<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>