Hello everyone, there is such code:

var inner = document.querySelector('.inner'), itemDiv = document.querySelectorAll('.box-style'); inner.addEventListener('click', function(e) { var target = e.target; if(target.tagName == 'LABEL') { itemDiv.forEach(function(item){ item.classList.remove('active'); }); var targetDiv = document.querySelector(target.getAttribute('data-target')); targetDiv.classList.add('active'); } }); 
 @charset "UTF-8"; /* --------------------------------------------- Assets --------------------------------------------- */ /* --------------------------------------------- Colors --------------------------------------------- */ /* --------------------------------------------- Fonts --------------------------------------------- */ /* --------------------------------------------- Stylings --------------------------------------------- */ html, body { height: 100%; } body { padding: 0; margin: 0; width: 100%; /*display: -webkit-box;*/ /*display: -moz-box;*/ /*display: box;*/ /*display: -webkit-flex;*/ /*display: -moz-flex;*/ /*display: -ms-flexbox;*/ /*display: flex;*/ /*-webkit-box-pack: center;*/ /*-moz-box-pack: center;*/ /*box-pack: center;*/ /*-webkit-justify-content: center;*/ /*-moz-justify-content: center;*/ /*-ms-justify-content: center;*/ /*-o-justify-content: center;*/ /*justify-content: center;*/ /*-ms-flex-pack: center;*/ /*-webkit-box-align: start;*/ /*-moz-box-align: start;*/ /*box-align: start;*/ /*-webkit-align-items: flex-start;*/ /*-moz-align-items: flex-start;*/ /*-ms-align-items: flex-start;*/ /*-o-align-items: flex-start;*/ /*align-items: flex-start;*/ /*-ms-flex-align: start;*/ background-color: #CCCC33; font-family: "Roboto Condensed", sans-serif; } .body-wrap{ height: 100%; width: 100%; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-content: stretch; -ms-flex-line-pack: stretch; align-content: stretch; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } /*@media (min-height: 580px) {*/ /*!*body {*!*/ /*!*-webkit-box-align: center;*!*/ /*!*-moz-box-align: center;*!*/ /*!*box-align: center;*!*/ /*!*-webkit-align-items: center;*!*/ /*!*-moz-align-items: center;*!*/ /*!*-ms-align-items: center;*!*/ /*!*-o-align-items: center;*!*/ /*!*align-items: center;*!*/ /*!*-ms-flex-align: center;*!*/ /*!*}*!*/ /*}*/ .container { width: 100%; max-width: 580px; padding-right: 20px; padding-left: 20px; -webkit-order: 0; -ms-flex-order: 0; order: 0; -webkit-flex: 0 1 auto; -ms-flex: 0 1 auto; flex: 0 1 auto; -webkit-align-self: auto; -ms-flex-item-align: auto; align-self: auto; } .invoice { background-color: #ffffff; border-radius: 10px; box-shadow: 0 14px 28px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.13); margin: 50px 0; padding: 50px 30px 30px; } .invoice header { margin-bottom: 30px; } .invoice header section { position: relative; width: 100%; padding-top: 120px; } .invoice header section:nth-of-type(1) h1 { /* float: left; */ text-align: center; text-transform: uppercase; font-weight: 600; letter-spacing: 2px; color: #344760; font-size: 25px; margin-top: 20px; margin-bottom: 5px; } .invoice header section:nth-of-type(1) span { float: right; color: #b7bcc3; font-size: 14px; margin-top: 10px; letter-spacing: 2px; } .invoice header section:nth-of-type(1) .logo img { position: absolute; right: 0; left: 0; top: -35px; margin: 0 auto; content: ""; height: 140px; } .invoice header section:nth-of-type(2) { float: right; } .invoice header section:nth-of-type(2) span { font-size: 21px; color: #b7bcc3; letter-spacing: 1px; } .invoice header section:nth-of-type(2) span:before { content: "#"; } .invoice main { border-left-width: 0px; border-right-width: 0px; padding-top: 0; padding-bottom: 0; } .invoice footer { text-align: right; margin-top: 30px; } .invoice footer button { display: inline-block; padding-right: 0; padding-left: 0; background: none; border: none; font-size: 19px; font-family: inherit; font-weight: bold; text-decoration: none; text-transform: uppercase; position: relative; letter-spacing: 1px; cursor: pointer; outline: none; color: #CCCC33; } .invoice footer button:focus { border: none; outline: none; } .invoice footer button:-moz-focus-inner { border: none; outline: none; } .invoice footer button:after { content: ""; width: 0%; height: 4px; position: absolute; right: 0; bottom: -10px; background-color: inherit; -webkit-transition: width 0.2s ease-in-out; -moz-transition: width 0.2s ease-in-out; transition: width 0.2s ease-in-out; } .invoice footer button:hover:after { width: 100%; } .invoice footer button:after { background-color: #CCCC33; } .invoice footer button:disabled { color: #b7bcc3; cursor: not-allowed; } .invoice footer button:disabled:hover:after { display: none; } .invoice footer button:disabled:after { background-color: #b7bcc3; } .inner h2 { text-transform: uppercase; font-weight: 600; letter-spacing: 2px; color: #344760; font-size: 20px; margin-left: 5px; } .inner input[type=text] { border: none; padding-top: 5px; padding-bottom: 5px; font-size: 16px; line-height: 24px; outline: none; color: #344760; width: 100%; box-shadow: 0 1px 0 0 #b7bcc3; transition: border-color .3s, box-shadow .3s; } .inner input[type=text]:focus { border: none; outline: none; box-shadow: 0 1px 0 0 #CCCC33; } .inner input[type=text]::-moz-focus-inner { border: none; outline: none; border-color: #CCCC33; } .inner textarea { width: 100%; text-align: left; resize: none; margin-top: 20px; font-size: 16px; border: none; outline: none; color: #344760; box-shadow: 0 1px 0 0 #b7bcc3; transition: border-color .3s, box-shadow .3s; padding: 10px 10px 20px 5px; min-height: 130px; } .inner textarea:focus { border: none; outline: none; box-shadow: 0 1px 0 0 #CCCC33; } .item { box-sizing: border-box; width: 50%; vertical-align: top; padding-right: 35px; display: inline-block; margin-right: -4px; text-align: center; } .item label { display: inline-block; cursor: pointer; position: relative; padding-left: 25px; } .item label:before { content: ""; display: inline-block; width: 16px; height: 16px; border-radius: 50%; margin-right: 10px; border: 1px solid #CCCC33; position: absolute; left: 0; top: 0; bottom: 1px; } .item input[type=radio] { display: none; } .item input[type=radio]:checked + label:before { content: "\2022"; color: #CCCC33; font-size: 48px; text-align: center; background-color: #fff; line-height: 19px; } .item input[type=radio]:checked + label > span { border-bottom: 1px solid green; } .box-style { margin-top: 30px; display: none; } .box-style p { line-height: 21px; } .box-style span { width: 50%; display: inline-block; padding: 0 5px; margin-right: -4px; box-sizing: border-box; } .active { display: block; } 
 <body> <div class="body-wrap"> <div class="container"> <form class="invoice"> <header> <section> <h1 class="invoice-title">Выберите способ оплаты</h1> </section> </header> <main> <section class="inner"> <div class="item"> <input id="sub1" name="form" type="radio" value=""> <label for="sub1" data-target=".form-one"><span>Оплата услуг по договору</span></label> </div> <div class="item"> <input id="sub2" name="form" type="radio"> <label for="sub2" data-target=".form-two"><span>Оплата Госпошлины</span></label> </div> <div class="box-style form-one"> <span><input type="text" placeholder="Ваше имя:"></span> <span><input type="text" placeholder="Ваше фамилия:"></span> <textarea name="form" placeholder="Напишите ваше сообщение"></textarea> </div> <div class="box-style form-two"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti corrupti cupiditate maxime eos eveniet, ipsa ex nisi vero recusandae dolorum modi eius totam soluta, dolorem! Numquam eos commodi unde nam?</p> </div> </section> </main> <footer> <button type="submit" id="payment_button" disabled="">Оплатить онлайн</button> </footer> </form> </div> </div> </body>

The logic of this, depending on the selected radiobutton, show the corresponding block.

I did it here through delegation, that is, the handler hung on the parent. Here in the label there is a data target with the block to be shown. But inside the label there is also a span, and now nothing happens by clicking on it, I understand the reason, but I don’t understand how to do it right.

Can you please tell me how to do it so that clicking the corresponding blocks also appear on the label inside the label. I know one way, but it will just duplicate the same code. I hope I have clearly explained my problem, otherwise it’s not always good at me)

    1 answer 1

    You have a problem in that you search for an element by the label tag, and when you click on a span , it no longer perceives it as a label . You just need to click on the element itself.

     var label = document.querySelectorAll('label'), itemDiv = document.querySelectorAll('.box-style'); label.forEach(function(checked) { checked.addEventListener("click", function(event) { itemDiv.forEach(function(item){ item.classList.remove('active'); }); var targetDiv = document.querySelector(this.getAttribute('data-target')); targetDiv.classList.add('active'); }); }); 
     @charset "UTF-8"; /* --------------------------------------------- Assets --------------------------------------------- */ /* --------------------------------------------- Colors --------------------------------------------- */ /* --------------------------------------------- Fonts --------------------------------------------- */ /* --------------------------------------------- Stylings --------------------------------------------- */ html, body { height: 100%; } body { padding: 0; margin: 0; width: 100%; /*display: -webkit-box;*/ /*display: -moz-box;*/ /*display: box;*/ /*display: -webkit-flex;*/ /*display: -moz-flex;*/ /*display: -ms-flexbox;*/ /*display: flex;*/ /*-webkit-box-pack: center;*/ /*-moz-box-pack: center;*/ /*box-pack: center;*/ /*-webkit-justify-content: center;*/ /*-moz-justify-content: center;*/ /*-ms-justify-content: center;*/ /*-o-justify-content: center;*/ /*justify-content: center;*/ /*-ms-flex-pack: center;*/ /*-webkit-box-align: start;*/ /*-moz-box-align: start;*/ /*box-align: start;*/ /*-webkit-align-items: flex-start;*/ /*-moz-align-items: flex-start;*/ /*-ms-align-items: flex-start;*/ /*-o-align-items: flex-start;*/ /*align-items: flex-start;*/ /*-ms-flex-align: start;*/ background-color: #CCCC33; font-family: "Roboto Condensed", sans-serif; } .body-wrap{ height: 100%; width: 100%; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-content: stretch; -ms-flex-line-pack: stretch; align-content: stretch; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } /*@media (min-height: 580px) {*/ /*!*body {*!*/ /*!*-webkit-box-align: center;*!*/ /*!*-moz-box-align: center;*!*/ /*!*box-align: center;*!*/ /*!*-webkit-align-items: center;*!*/ /*!*-moz-align-items: center;*!*/ /*!*-ms-align-items: center;*!*/ /*!*-o-align-items: center;*!*/ /*!*align-items: center;*!*/ /*!*-ms-flex-align: center;*!*/ /*!*}*!*/ /*}*/ .container { width: 100%; max-width: 580px; padding-right: 20px; padding-left: 20px; -webkit-order: 0; -ms-flex-order: 0; order: 0; -webkit-flex: 0 1 auto; -ms-flex: 0 1 auto; flex: 0 1 auto; -webkit-align-self: auto; -ms-flex-item-align: auto; align-self: auto; } .invoice { background-color: #ffffff; border-radius: 10px; box-shadow: 0 14px 28px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.13); margin: 50px 0; padding: 50px 30px 30px; } .invoice header { margin-bottom: 30px; } .invoice header section { position: relative; width: 100%; padding-top: 120px; } .invoice header section:nth-of-type(1) h1 { /* float: left; */ text-align: center; text-transform: uppercase; font-weight: 600; letter-spacing: 2px; color: #344760; font-size: 25px; margin-top: 20px; margin-bottom: 5px; } .invoice header section:nth-of-type(1) span { float: right; color: #b7bcc3; font-size: 14px; margin-top: 10px; letter-spacing: 2px; } .invoice header section:nth-of-type(1) .logo img { position: absolute; right: 0; left: 0; top: -35px; margin: 0 auto; content: ""; height: 140px; } .invoice header section:nth-of-type(2) { float: right; } .invoice header section:nth-of-type(2) span { font-size: 21px; color: #b7bcc3; letter-spacing: 1px; } .invoice header section:nth-of-type(2) span:before { content: "#"; } .invoice main { border-left-width: 0px; border-right-width: 0px; padding-top: 0; padding-bottom: 0; } .invoice footer { text-align: right; margin-top: 30px; } .invoice footer button { display: inline-block; padding-right: 0; padding-left: 0; background: none; border: none; font-size: 19px; font-family: inherit; font-weight: bold; text-decoration: none; text-transform: uppercase; position: relative; letter-spacing: 1px; cursor: pointer; outline: none; color: #CCCC33; } .invoice footer button:focus { border: none; outline: none; } .invoice footer button:-moz-focus-inner { border: none; outline: none; } .invoice footer button:after { content: ""; width: 0%; height: 4px; position: absolute; right: 0; bottom: -10px; background-color: inherit; -webkit-transition: width 0.2s ease-in-out; -moz-transition: width 0.2s ease-in-out; transition: width 0.2s ease-in-out; } .invoice footer button:hover:after { width: 100%; } .invoice footer button:after { background-color: #CCCC33; } .invoice footer button:disabled { color: #b7bcc3; cursor: not-allowed; } .invoice footer button:disabled:hover:after { display: none; } .invoice footer button:disabled:after { background-color: #b7bcc3; } .inner h2 { text-transform: uppercase; font-weight: 600; letter-spacing: 2px; color: #344760; font-size: 20px; margin-left: 5px; } .inner input[type=text] { border: none; padding-top: 5px; padding-bottom: 5px; font-size: 16px; line-height: 24px; outline: none; color: #344760; width: 100%; box-shadow: 0 1px 0 0 #b7bcc3; transition: border-color .3s, box-shadow .3s; } .inner input[type=text]:focus { border: none; outline: none; box-shadow: 0 1px 0 0 #CCCC33; } .inner input[type=text]::-moz-focus-inner { border: none; outline: none; border-color: #CCCC33; } .inner textarea { width: 100%; text-align: left; resize: none; margin-top: 20px; font-size: 16px; border: none; outline: none; color: #344760; box-shadow: 0 1px 0 0 #b7bcc3; transition: border-color .3s, box-shadow .3s; padding: 10px 10px 20px 5px; min-height: 130px; } .inner textarea:focus { border: none; outline: none; box-shadow: 0 1px 0 0 #CCCC33; } .item { box-sizing: border-box; width: 50%; vertical-align: top; padding-right: 35px; display: inline-block; margin-right: -4px; text-align: center; } .item label { display: inline-block; cursor: pointer; position: relative; padding-left: 25px; } .item label:before { content: ""; display: inline-block; width: 16px; height: 16px; border-radius: 50%; margin-right: 10px; border: 1px solid #CCCC33; position: absolute; left: 0; top: 0; bottom: 1px; } .item input[type=radio] { display: none; } .item input[type=radio]:checked + label:before { content: "\2022"; color: #CCCC33; font-size: 48px; text-align: center; background-color: #fff; line-height: 19px; } .item input[type=radio]:checked + label > span { border-bottom: 1px solid green; } .box-style { margin-top: 30px; display: none; } .box-style p { line-height: 21px; } .box-style span { width: 50%; display: inline-block; padding: 0 5px; margin-right: -4px; box-sizing: border-box; } .active { display: block; } 
     <div class="body-wrap"> <div class="container"> <form class="invoice"> <header> <section> <h1 class="invoice-title">Выберите способ оплаты</h1> </section> </header> <main> <section class="inner"> <div class="item"> <input id="sub1" name="form" type="radio" value=""> <label for="sub1" data-target=".form-one"><span>Оплата услуг по договору</span></label> </div> <div class="item"> <input id="sub2" name="form" type="radio"> <label for="sub2" data-target=".form-two"><span>Оплата Госпошлины</span></label> </div> <div class="box-style form-one"> <span><input type="text" placeholder="Ваше имя:"></span> <span><input type="text" placeholder="Ваше фамилия:"></span> <textarea name="form" placeholder="Напишите ваше сообщение"></textarea> </div> <div class="box-style form-two"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti corrupti cupiditate maxime eos eveniet, ipsa ex nisi vero recusandae dolorum modi eius totam soluta, dolorem! Numquam eos commodi unde nam?</p> </div> </section> </main> <footer> <button type="submit" id="payment_button" disabled="">Оплатить онлайн</button> </footer> </form> </div> </div>

    • I understand, thank you very much for your help. - Lorax