javascript - 我需要计算网页中具有特定值 "src"的图像并填充输入字段并使用脚本自动提交页面

Question

假设任何带有表单并具有一组图像的网页。我需要在页面加载和提交时填充输入文本值。

var imgs = document.getElementsByTagName('img');
var countImagesFilled = 0;

var curImg;
for(var i = 0; i < imgs .length; i++) {
  curImg = imgs[i];
if(curImg.getAttribute('src')=='abc.png'){++countImagesFilled;}
}
var inputValue = document.getElementsByName('valuee');
inputValue[0].value=countImagesFilled;
document.forms[0].submit();

Answer 1

看看这个 working example :)

window.onload = ()=>{
  // get our form
  let imageForm = document.getElementById('image-form');
  // something to inform us that the form has been submitted
  imageForm.addEventListener('submit', function(){
    console.log(`form data: ${$(this).serialize()}`);
  });
  
  // get all the img elements
  let images = document.querySelectorAll('img');
  // get the input field where we'll be putting the total image count
  let field = document.getElementById('image-count');
  // the number of images that match our criteria
  let imageCount = 0;
  // count the number of img elements that have 'test.png' as their source
  for(let i = 0; i < images.length; i++){
    if(images[i].getAttribute('src') === 'test.png'){
      imageCount++;
    }
  }
  
  // set the image count (imageCount) as the value of the text field
  field.value = imageCount;
  
  // submit the form
  imageForm.dispatchEvent(new Event('submit'));
};

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>

<form id="image-form" name="imageCount">
  <img src="test.png" class="img-1">
  <img src="test.png" class="img-1">
  <img src="test.png" class="img-1">
  <img src="test.png" class="img-1">
  <img src="test.png" class="img-1">
  <img src="test.png" class="img-1">
  <img src="test.png" class="img-1">
  <img src="exclude.png" class="img-2">
  <img src="exclude.png" class="img-2">
  <img src="exclude.png" class="img-2">
  <img src="exclude.png" class="img-2">
  <img src="exclude.png" class="img-2">
  <input type="text" id="image-count" name="imageWithSourceCount">
</form>

还有一件事，考虑到以下 HTML:

<img src="images/test.png" class="img-1">

如果您读取图像对象 (img.src) 的 src 属性，您将获得解析路径，类似于 yourwebsite.com/images/test.png。但是，如果您使用 getAttribute (img.getAttribute('src')) 检索它，您将获得 src 属性的实际值这也可能是相对路径(即 images/test.png)