单击p元素时的javascript触发事件

javascript triggering event when p element is clicked

本文关键字：事件 javascript 元素 单击      更新时间：2023-09-26

我正在用原始javascript编写一个程序。当点击<p>元素时，我希望它能触发一个函数，将元素的价格添加到总数中。请参阅下面的代码。

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>

通过使用以下代码，我可以针对一个<p>元素，但我正在寻找一种解决方案，如果我单击ANY <p>元素，我的函数将触发该解决方案，它将根据该<p>元素的类的值更新总数。我希望这是有道理的。

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

谢谢，Paul

您需要在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
    }
}

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

相关文章：