you don't put initial value for count let count = 0;
and have to call buttonClicked() on every Add button click
let count = 0;
function init() {
count = 0;
let button = document.getElementById("but");
button.onclick = buttonClicked;
}
function buttonClicked() {
count++;
let div = document.getElementById("coutner");
div.innerHTML = "You clicked the button " + count + " times.";
}
function showOptions(el) {
let userPicked = el.value;
var div = document.getElementById("div");
if (userPicked != 'none') {
var newContent = (electronics.store);
newContent += '<div>';
Object.keys(electronics.inventory).forEach(key => {
newContent += key;
newContent += '<div>';
var items = Object.values(electronics.inventory[key]);
items.forEach(item => {
newContent += '<div>';
newContent += ` <span class="brand"> ${item.brand} </span> <span class="price">$${item.cost}</span>`;
newContent += `<input type=button value="Add" onclick="add(this)"/>`
newContent += '</div>';
});
newContent += '</div>';
});
newContent += '</div>';
div.innerHTML = newContent;
}
}
function add(add) {
console.clear();
console.log(add.closest('div').textContent.trim());
buttonClicked();
}
let electronics = {
store: "Mike's Computers",
inventory: {
"Laptops": {
0: {
brand: "iMac",
cost: 2000
},
1: {
brand: "Dell",
cost: 600
}
},
"Computers": {
2: {
brand: "Windows PC",
cost: 1300
}
}
}
};<div>
<h1>Welcome</h1>
</div><br />
<div class="dropdown">
<form>
<select name="list" id="list" accesskey="target" onchange="showOptions(this); buttonClicked(this)">
<option value="none">Select a restaurant</option>
<option value="Electronics">Electronics</option>
</select>
<input type=button id="but" value="Select" onclick="showOptions(); buttonClicked()" />
<div><mark id="coutner"></mark></div>
</form>
</div>
<div id="div"></div>