时间戳

首页 > 解决方案 > JavaScript：多次按下按钮时如何使输出替换先前输出的条目

javascript - JavaScript：多次按下按钮时如何使输出替换先前输出的条目

问题描述

我的任务是为我学校的期末 JavaScript 项目创建一个披萨菜单。除了订单按钮出现问题外，我已经完成了所有工作。

单击时，订单按钮会编译添加项目的列表（连同它们的值）并将它们打印到前端供用户查看。每当再次单击该按钮时，都会创建一个新输出并将其“堆叠”在原始条目下方。这可以持续下去，具体取决于重新单击按钮的次数。

我的问题，有没有办法让我的按钮上的任何新点击替换视觉输出，而不是添加到“收据”？我希望我是清楚的。

https://github.com/yugenaugur/Tech-Academy-Pizza-Menu-Project

将结果堆叠在先前的输出下方，而不是完全替换屏幕上的值。

非常感谢任何和所有的帮助，这个一直让我发疯。

标签： javascripthtmlcsstwitter-bootstrap

解决方案

注意：您需要获取一个元素，并在每次点击时覆盖内容。不附加。

let items = ['pizza', 'bread', 'coke'];

const getLineItem = (item) => `<p>${item}</p>`;

document.querySelector('.summary').addEventListener('click', function() {
    let target = document.querySelector('.receipt');
    let lines = '';
    items.forEach(item => {
      lines += getLineItem(item);
    });
    target.innerHTML = lines;
});
<div class="receipt"></div>
<button class="summary">Summary</button>

推荐阅读