Нажмите кнопку, добавьте текст и номер в 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

Вы пробовали console.log() в каждой строке вашего JavaScript, чтобы проверить, что строка возвращает ожидаемые результаты? –

Адрес 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, прежде чем добавлять объекты к нему.
Я подозреваю, что вы намерены передать listCart функции отображения, чтобы вы могли получить доступ к объектам внутри него для отображения.
Вам не хватало логики, которая добавляет значения в div. Вам необходимо выполнить итерацию по массиву и получить доступ к свойствам объекта.

источник

2016-06-24 15:15:40

Большое вам спасибо за помощь. Я узнал что-то новое и запомню его в следующий раз. – GreenWood

-1

Прежде всего, если вы откроете инструменты Dev, вы увидите сообщение об ошибке - Uncaught ReferenceError: listCart is not defined. Поэтому первое, что вам нужно сделать, это создать listCart массив, например: var listCart = [];

Затем вы должны изменить вашу displayListCart функцию, чтобы отобразить новый DIV для каждого элемента в listCart, как это:

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

The code example

источник

2016-06-24 14:57:19

Спасибо за помощь. Я все еще новичок в js, поэтому мне нужно многому научиться. – GreenWood

Нажмите кнопку, добавьте текст и номер в div. Не работает

ответ

Смежные вопросы