Question

我正在用原始javascript编写程序。单击元素时，我希望这会触发一个函数，该函数将元素的价格加到总数中。请参阅下面的代码。

JS

function loadJSONDoc()
{
  var answer;
  var xmlhttp;
  xmlhttp=new XMLHttpRequest();

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    answer = JSON.parse(xmlhttp.responseText)
    var items = answer[0].prices[0];

    for(var index in items) {

      var node = document.getElementById("orderList");
      var p = document.createElement('p');
      var price = items[index];
      p.setAttribute("class", price)
      var textnode = document.createTextNode(index + " price = " + price);
      p.appendChild(textnode);
      node.appendChild(p);
      };
    }

var total = 0;
var update = document.getElementsByTagName("p");
update.onclick = function(){
  ///code here to update total based on element id
}

在返回JSON对象并且我的html页面已更新后，它看起来像这样：

HTML

  <!DOCTYPE html>
    <html>
     <head>
      <meta charset="UTF-8">
     </head>
     <body>
      <ul id="orderList">
         <p class="4.75">Cafe Latte price = 4.75</p>
         <p class="4.75">Flat White price = 4.75</p>
         <p class="3.85">Cappucinoprice = 3.85</p>
     </ul>
     <script src="js/getData.js"></script>
     </body>
    </html>

我可以使用以下代码定位一个元素，但是我正在寻找一种解决方案，如果我点击任何元素，我的函数将会触发，这将反过来更新总数基于此元素类的值。我希望这是有道理的。

var update = document.getElementsByTagName("p")[0];
    update.onclick = function(){
     ///code here to update total based on element id
    }

谢谢，保罗

Answer 1

您需要绑定document.getElementsByTagName("p")中的每个项目。你只是为第一个做这件事。例如：

var update = document.getElementsByTagName("p");
for( var i = 0; i < update.length; ++i ) {
    update[i].onclick = function() { 
       //code here to update total based on element id
    }
}

注意：您可以在函数中执行this.className来访问onclick元素类的值。

单击p元素时javascript触发事件

1 个答案: