Мне нужно посчитать изображения с определенным значением «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

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

var curImg;
for(var i = 0; i < imgs .length; i++) {
    curImg = imgs[i];
    if(curImg.src == "yoururl") //replace this if statement
        countImagesFilled++;
    }
}
var inputValue = document.getElementById('valuee');  //find by ID... give input tag an id attribute
inputValue.value=countImagesFilled;
document.forms[0].submit();

Answer 2

Оформить заказ рабочий пример :)

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">

, если вы читаете свойство src объект изображения (img.src), вы получите разрешенный путь, который будет выглядеть примерно так: yourwebsite.com/images/test.png.Но если вы получите его с помощью getAttribute (img.getAttribute('src')), вы получите фактическое значение атрибута src, которое также может быть относительным путем (т. Е. images/test.png)