ボタンをクリックし、テキストと数字をdivに追加します。うまくいきません

この注文リストを作成するには、本当に助けが必要です。ボタンをクリックすると、addToList内のテキストがdivに追加され、ページに表示されます。それは、javascriptでデータ（名前、価格）を追加する必要があります。しかし、正しく動作するようにすることはできません。ボタンをクリックし、テキストと数字をdivに追加します。うまくいきません

<html> 
<body> 
    <div id="myList"> 

    </div> 

    <button onclick="addToList('donut', '25,-')">add</button> 
</body> 
</html> 




    <style> 
    #myList { 
     border: 1px solid black; 
     margin-bottom: 10px; 
    } 
    </style> 





    <script> 
    function displayListCart() { 
     var myList = document.getElementById("myList"); 
    }; 



    function addToList(name,price) { 
     var itemOrder = {}; 
     //itemOrder with data 
     itemOrder.Name=name; 
     itemOrder.Price=price; 
     //Add newly created product to our shopping cart 
     listCart.push(itemOrder); 
     displayListCart(); 
    } 
    </script>

出典

2016-06-24 GreenWood

JavaScriptの各行でconsole.log（）を試して、結果が期待通りの結果を返すことを確認しましたか？ –

ここにはFiddle Demoがあります。

私は、JavaScript関数のインライン呼び出しのファンではないので、それは懸念の分離に違反しているので、イベントのバインド方法を変更しました。これはあなたの問題の一部ではありませんが、私はこのアプローチを使用しています：

HTML：

<div id="myList"> 
</div> 

<button id="btn" data-name="donut" data-price="25,-">add</button>

注：私のように値を追加した

ボタンのデータ属性。あなたは JavaScriptからそれらにアクセスすることができます。

はJavaScript：

function displayListCart(listCart) { 
    var myList = document.getElementById("myList"); 
    for (i = 0; i < listCart.length; i++) { 
    myList.innerHTML = myList.innerHTML + listCart[i].Name + " : " + listCart[i].Price; 
    } 
}; 


function addToList(name, price) { 
    var itemOrder = {}; 
    //itemOrder with data 
    itemOrder.Name = name; 
    //debugging -- check to make sure this returns what you expect 
    console.log(itemOrder.Name); 
    itemOrder.Price = price; 
    //debugging -- check to make sure this returns what you expect 
    console.log(itemOrder.Price); 
    //Add newly created product to our shopping cart 
    //declare listCart before you use it 
    var listCart = []; 
    listCart.push(itemOrder); 
    //pass listCart to the display function 
    displayListCart(listCart); 
} 

function getValues() { 
    addToList(myBtn.getAttribute('data-name'), myBtn.getAttribute('data-price')); 
} 
var myBtn = document.getElementById("btn"); 

myBtn.addEventListener("click", getValues, false);

注：

あなたはそれにオブジェクトを追加する前にlistCartを宣言する必要があります。
私はdisplay関数にlistCartを渡して、その中のオブジェクトにアクセスして表示するつもりだと思っています。
divに値を追加するロジックがありませんでした。配列を繰り返し処理し、オブジェクトのプロパティにアクセスする必要があります。

出典

2016-06-24 15:15:40

ありがとうございました。私は新しいことを学び、次回はそれを覚えています。 – GreenWood

-1

まず、Dev Toolsを開くと、エラー番号Uncaught ReferenceError: listCart is not definedが表示されます。そして、あなたはこのように、listCart内のすべての項目の新しいdiv要素を表示するために、あなたのdisplayListCart機能を変更する必要がありvar listCart = [];

：

function displayListCart() { 
    var myList = document.getElementById("myList"), 
     myListContent = ""; 
    listCart.forEach(function(cart) { 
     myListContent += "<div>" + cart.Name + ": " + cart.Price + "<div>";    
    }); 
    myList.innerHTML = myListContent; 
};

だから、最初にやるべきことは、このようなlistCart配列を作成していますThe code example

出典

2016-06-24 14:57:19

助けてくれてありがとう。私はまだjsの新しいので、多くのことを学ぶ必要があります。 – GreenWood

ボタンをクリックし、テキストと数字をdivに追加します。うまくいきません

答えて

関連する問題