count number of times button is clicked

Question

Warm tip: This article is reproduced from stackoverflow.com, please click

button html javascript onchange onclick

count number of times button is clicked

发布于 2020-03-27 15:41:07

So I have a 'add' button that is beside every item in an inventory and I'm trying to figure out how I could manipulate that button so that it works as a counter. My issue is these buttons were declared in a javascript file, so there's no button id from the HTML file that I can use for my buttonClicked() function which is basically supposed to count the number of times any 'add' button was clicked in total.

So for example my page looks like this right now:

Laptops

iMac $2000 [ADD BUTTON]

Dell $600 [ADD BUTTON]

Computers

Windows PC $1300 [ADD BUTTON]

If I were to click the button beside the iMac and the button beside the Windows PC, then the buttonClicked() function should print "You clicked the button 2 times." I'm just having trouble trying to access the button variables that were defined in the javascript file in the line 'newContent += <input type=button value="Add" onclick="add(this)"/>'and not the HTML file. That button defined in the HTML file is a select button that is different from the one I'm trying to access. Any help would be appreciated.

let count;

function init() {
  count = 0;
  let button = document.getElementById("but");
  button.onclick = buttonClicked;
}


function buttonClicked() {
  count++;
  let div = document.getElementById("list");
  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 += `&nbsp; <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())
}


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 store</option>
      <option value="Electronics">Electronics</option>
    </select>
    <input type=button id="but" value="Select" onclick="showOptions(); buttonClicked()" />
  </form>

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

Questioner

Grayish

Viewed

31

Chinese

Original

count number of times button is clicked

Related issues