Question

我正在尝试为网页编写脚本，以便在单击页面上的任何图像时，P元素，img元素，页脚元素和h2元素的总数将显示在浏览器控制台中。我已经尝试了很长时间，似乎无法正确使用代码。

Answer 1

HTML中有一个属性可以在您单击它时调用JS函数。

JS档案：

function display(){
  var ptags = document.getElementsByTagName('p')
  for(var i=0;i<ptags.length;i++){
   pnumber=i;
  }

  imgtags = document.getElementsByTagName('img')
  for(var i=0;i<imgtags.length;i++){
    imgnumber=i;
  }

  var footertags = document.getElementsByTagName('footer')
  for(var i=0;i<footertags.length;i++){
   footernumber=i;
  }

  var h2tags = document.getElementsByTagName('h2')
  for(var i=0;i<h2tags.length;i++){
   h2number=i;
  }

  console.log("Number of P tags: "+pnumber)
  console.log("Number of IMG tags: "+imgnumber)
  console.log("Number of FOOTER tags: "+footernumber)
  console.log("Number of h2 tags: "+h2number)
}

imgtags.onclick = display()

Answer 2

这是一个可能正在寻找你想要的代码片段。

使用纯JavaScript：

// All target elements you want to display console.
var paragraphs = document.getElementsByTagName('p'),
    images = document.getElementsByTagName('img'),
    h2 = document.getElementsByTagName('h2');

// Adding click event to images.
for (var i = 0; i < images.length; i++) {
  images[i].onclick = function(){
  // Logging everything to the console.
  console.log('Paragraphs', paragraphs);
  console.log('Images', images);
  console.log('h2', h2);
  };
}

div, h2, p {
  font-family: sans-serif;
  text-align: center;
}

.images {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  margin-top: 60px;
}

.images img {
  border: 5px solid #FE4E00;
  border-radius: 50%;
  cursor: pointer;
  transition: all .2s;
  width: 100px;
  height: 100px;
}

.images img:hover {
  border-color: #003B93;
}

<h2>Click images.</h2>
<div class="images">
  <img src="https://robohash.org/rerumassumendalabore.jpg?size=200x200&set=set1" alt="Image one."/>
  <img src="https://robohash.org/odioquiaut.jpg?size=200x200&set=set1" alt="Image two."/>
</div>

<h2>Paragraphs.</h2>
<div>
  <p>P One</p>
  <p>P Two</p>
</div>

<h2>Footer.</h2>
<footer>
  <p>P Three</p>
  <p>P Four</p>
</footer>

使用JQuery：

// All target elements you want to display console.
var paragraphs = $('p'),
    images = $('img'),
    h2 = $('h2');

images.click(function() {
  // Logging everything to the console.
  console.log('Paragraphs', paragraphs);
  console.log('Images', images);
  console.log('h2', h2);
});

div, h2, p {
  font-family: sans-serif;
  text-align: center;
}

.images {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  margin-top: 60px;
}

.images img {
  border: 5px solid #FE4E00;
  border-radius: 50%;
  cursor: pointer;
  transition: all .2s;
  width: 100px;
  height: 100px;
}

.images img:hover {
  border-color: #003B93;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Click images.</h2>
<div class="images">
  <img src="https://robohash.org/rerumassumendalabore.jpg?size=200x200&set=set1" alt="Image one."/>
  <img src="https://robohash.org/odioquiaut.jpg?size=200x200&set=set1" alt="Image two."/>
</div>

<h2>Paragraphs.</h2>
<div>
  <p>P One</p>
  <p>P Two</p>
</div>

<h2>Footer.</h2>
<footer>
  <p>P Three</p>
  <p>P Four</p>
</footer>

您的问题可能会更好地制定，例如，如果您使用任何库，提供已有的代码并解释您尝试过的内容，可以解释一下。

Javascript浏览器控制台

2 个答案: