Wrote a test emulation script. On the first element, everything works, on the second - no. How to write to work for any number of identical fields?

let func = { jsRandomFunction() { let random = document.getElementsByClassName('js-random'); let stateOfProcess = document.getElementsByClassName('form__field-blank'); let image = document.getElementsByClassName('form__field-image'); random[0].onclick = () => { document.querySelectorAll('.form__field').forEach(function(wrapper) { let random_boolean = Math.random() >= 0.5; console.log(random_boolean); if (random_boolean >= 0.5) { stateOfProcess[0].classList.add('checked'); stateOfProcess[0].classList.remove('canceled'); stateOfProcess[0].innerHTML = "<span>Проверено</span> "; image[0].style.display = 'none'; image[0].classList.add('form__field-ok'); image[0].classList.remove('form__field-upload'); } else { stateOfProcess[0].classList.add('canceled'); stateOfProcess[0].classList.remove('checked'); stateOfProcess[0].innerHTML = "<span>Отклонено</span> "; image[0].style.display = 'none'; image[0].classList.add('form__field-upload'); image[0].classList.remove('form__field-ok'); } }); } } }; $(function () { app.init(); }); 
 .form__field { display: flex; align-items: center; margin: 30px 0px; } .form__field-image { margin-right: 20px; background-color: #fff; width: 40px; height: 40px; } .form__field-upload { background-image: url("../images/upload.svg"); background-position: center; background-repeat: no-repeat; display: block !important; } .form__field-wrapper { display: flex; flex-direction: column; font-family: sans-serif; } .form__field-text { visibility: hidden; } .form__field-span { color: rgba(33, 33, 33, 0.6); font-size: 12px; padding: 5px 0px; } .form__field-blank { margin-left: 15px; } .form__field-ok { background-image: url("../images/ok.svg"); background-position: center; background-repeat: no-repeat; display: block !important; } .upload { margin: 0; cursor: pointer; } .upload:hover { text-decoration: underline; } .checked { color: #00FF00; } .canceled { color: #FF0000; } 
 <div class="form"> <div class="form__field"> <div class="form__field-image form__field-upload"></div> <div class="form__field-wrapper"> <label class="upload js-random" for="upload">Загрузите скан страницы с фотографией</label> <input id="upload" class="form__field-text"> <span class="form__field-span">Размер файла не более 5Мб</span> </div> <div class="form__field-blank"></div> </div> <div class="form__field"> <div class="form__field-image form__field-upload"></div> <div class="form__field-wrapper"> <label class="upload js-random" for="upload2">Страница с пропиской</label> <input id="upload2" class="form__field-text"> <span class="form__field-span">Размер файла не более 5Мб</span> </div> <div class="form__field-blank"></div> </div>

    1 answer 1

      let random = document.getElementsByClassName('js-random'); console.log(random); let stateOfProcess = document.getElementsByClassName('form__field-blank'); let image = document.getElementsByClassName('form__field-image'); for(var i = 0 ; i < random.length;i++){ random[i].onclick = () => { document.querySelectorAll('.form__field').forEach(function(wrapper) { let random_boolean = Math.random() >= 0.5; console.log(random_boolean); if (random_boolean >= 0.5) { stateOfProcess[0].classList.add('checked'); stateOfProcess[0].classList.remove('canceled'); stateOfProcess[0].innerHTML = "<span>Проверено</span> "; image[0].style.display = 'none'; image[0].classList.add('form__field-ok'); image[0].classList.remove('form__field-upload'); } else { stateOfProcess[0].classList.add('canceled'); stateOfProcess[0].classList.remove('checked'); stateOfProcess[0].innerHTML = "<span>Отклонено</span> "; image[0].style.display = 'none'; image[0].classList.add('form__field-upload'); image[0].classList.remove('form__field-ok'); } }); } } 
     .form__field { display: flex; align-items: center; margin: 30px 0px; } .form__field-image { margin-right: 20px; background-color: #fff; width: 40px; height: 40px; } .form__field-upload { background-image: url("../images/upload.svg"); background-position: center; background-repeat: no-repeat; display: block !important; } .form__field-wrapper { display: flex; flex-direction: column; font-family: sans-serif; } .form__field-text { visibility: hidden; } .form__field-span { color: rgba(33, 33, 33, 0.6); font-size: 12px; padding: 5px 0px; } .form__field-blank { margin-left: 15px; } .form__field-ok { background-image: url("../images/ok.svg"); background-position: center; background-repeat: no-repeat; display: block !important; } .upload { margin: 0; cursor: pointer; } .upload:hover { text-decoration: underline; } .checked { color: #00FF00; } .canceled { color: #FF0000; } 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="form"> <div class="form__field"> <div class="form__field-image form__field-upload"></div> <div class="form__field-wrapper"> <label class="upload js-random" for="upload">Загрузите скан страницы с фотографией</label> <input id="upload" class="form__field-text"> <span class="form__field-span">Размер файла не более 5Мб</span> </div> <div class="form__field-blank"></div> </div> <div class="form__field"> <div class="form__field-image form__field-upload"></div> <div class="form__field-wrapper"> <label class="upload js-random" for="upload2">Страница с пропиской</label> <input id="upload2" class="form__field-text"> <span class="form__field-span">Размер файла не более 5Мб</span> </div> <div class="form__field-blank"></div> </div>