温馨提示:本文翻译自stackoverflow.com,查看原文请点击:Javascript & HTML - count number of times button is clicked

Javascript & HTML - 计数单击次数按钮

发布于 2020-03-27 15:51:08

因此,我在库存中每个项目旁边都有一个“添加”按钮,我想弄清楚如何操作该按钮,使其可以用作计数器。我的问题是这些按钮是在javascript文件中声明的,因此HTML文件中没有按钮ID,我可以将其用于buttonClicked()函数,该函数基本上应该用于计算总的“添加”按钮被点击的次数。

例如,我的页面现在看起来像这样:

手提电脑

iMac 2000美元[添加按钮]

戴尔$ 600 [添加按钮]

电脑

Windows PC $ 1300 [添加按钮]

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>

查看更多

查看更多

提问者
Grayish
被浏览
30
Abdelrahman Gobarah 2020-01-31 15:32

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 += `&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());
  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>

发布
问题

分享
好友

手机
浏览

扫码手机浏览