Task: There are three steps in the form, after selecting one of the elements, the selected step, and the next one appears. By clicking on an item you need to send its id to the registration object, how to do it?

const request = new XMLHttpRequest(); var steps = document.querySelectorAll('.master-change, .service-change, .date-block'); // Π‘ΠΊΡ€Ρ‹Π²Π°Π΅ΠΌ всС шаги ΠΏΡ€ΠΈ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ΅ страницы window.onload = function() { steps.forEach((element, index) => { if (index > 0) { element.classList.add('hide'); } }); }; //ΠŸΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ ΠΏΠΎ шагам var choiseElement = document.querySelectorAll('.master-list, .service-list'); // Π’Ρ‹Π±ΠΈΡ€Π°Π΅ΠΌ элСмСнты с ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… ΠΎΡ‚Π»Π°Π²Π»ΠΈΠ²Π°Π΅ΠΌ ΠΊΠ»ΠΈΠΊ choiseElement.forEach((element, index) => { element.addEventListener('click', function() { nextStep(element, index); // Π’Π΅ΡˆΠ°Π΅ΠΌ событиС Π½Π° ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΈΠ· Π½ΠΈΡ… }, false); }); var registration = { masterName: '', serviceType: '', time: '' }; function nextStep(el, index) { steps[index].classList.toggle('hide'); // ПослС ΠΊΠ»ΠΈΠΊΠ° элСмСнт исчСзаСт steps[index + 1].classList.toggle('hide'); // А ΠΈΠ΄ΡƒΡ‰ΠΈΠΉ Π·Π° Π½ΠΈΠΌ появляСтся } const submit = document.querySelector('.btn-submit'); submit.addEventListener('click', function() { event.preventDefault(); // ΠžΡ‚ΠΌΠ΅Π½ΡΠ΅ΠΌ дСйствиС ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ request.open('GET', './scripts/info.json', true); request.setRequestHeader('Content-type', './scripts/info.json; charset=UTF-8'); request.onreadystatechange = function() { if (request.readyState == 4 && request.status == 200) { // alert(request.responseText); } else { console.log(request.status + ' ' + request.statusText); } } request.send(); console.log(registration); }); 
 .hide { display: none; } 
 <main class="pageBody"> <div class="index"> <div class="container"> <div class="form-block"> <form class="form-order" name="form-order"> <div class="from-order__step from-order__step-1 master-change"> <div class="master-list"> <div class="master-list__item" id="master_1"><img class="master-list__photo" src="http://via.placeholder.com/64x64" width="64px" height="64px" alt="Master photo"> <div class="master-name" id="master_1" href="#">Master name</div> </div> <div class="master-list__item" id="master_2"><img class="master-list__photo" src="http://via.placeholder.com/64x64" width="64px" height="64px" alt="Master photo"> <div class="master-name" id="master_2" href="#">Master name</div> </div> <div class="master-list__item" id="master_3"><img class="master-list__photo" src="http://via.placeholder.com/64x64" width="64x" height="64px" alt="Master photo"> <div class="master-name" id="master_3" href="#">Master name</div> </div> </div> </div> <div class="from-order__step from-order__step-2 service-change hide"> <div class="service-list"> <div class="service-list__item" id="service_1"> <h3 class="service__item__name">Service name </h3> <p class="service__item__description">Service description Service description Service description Service description</p><span class="service__price">999 rub</span><span class="service__time">14:44</span> </div> <div class="service-list__item" id="service_2"> <h3 class="service__item__name">Service name </h3> <p class="service__item__description">Service description Service description Service description Service description</p><span class="service__price">999 rub</span><span class="service__time">14:44</span> </div> <div class="service-list__item" id="service_3"> <h3 class="service__item__name">Service name </h3> <p class="service__item__description">Service description Service description Service description Service description</p><span class="service__price">999 rub</span><span class="service__time">14:44</span> </div> </div> </div> <div class="from-order__step from-order__step-3 date-block hide"> <div class="date-block__calendar"> <div class="date-block__time"> <select class="date-block__time"> <option>10:00</option> <option>11:00</option> <option>12:00</option> <option>13:00</option> <option>14:00</option> <option>15:00</option> <option>16:00</option> <option>17:00</option> <option>18:00</option> <option>19:00</option> <option>20:00</option> </select> </div> <button class="btn btn-submit" type="submit">ΠžΡ‚ΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ</button> </div> </div> </form> </div> </div> </div> </main>

  • ΠΎΡ‚ΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ Π΅Π³ΠΎ id Π² ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ registration what does it mean? just take the ID of the element and stuff it into the object? - Rostyslav Kuzmovych
  • You need to get the following registration {masterName: masterID, serviceType: serviceID} - meshoot
  • where to get? - Rostyslav Kuzmovych
  • Get from the element that was clicked, in with .master-list__item for example - meshoot
  • Even I can not understand what you need, on when you click on an element, it is very easy to get an id, something like this: element.id - Rostyslav Kuzmovych

0