I am new, but I try to practice in the course of self-study. Tell me, please, I have two textarea and two buttons that only visually refer to these windows. How can I make active the current window when I click on the button that is above it? thank

  • You need to think of a way that you can logically, and not only visually, connect buttons and testarea elements. This can be special / pair classes assigned to a button and textarea , data- attributes, common parent. - Igor

3 answers 3

 // Π²Ρ‹Π±ΠΈΡ€Π°Π΅ΠΌ всС ΠΊΠ½ΠΎΠΏΠΊΠΈ со станицы const buttons = document.querySelectorAll('button[data-target]'); for (const button of buttons) { // Π²Ρ‹Π±ΠΈΡ€Π°Π΅ΠΌ сСлСктор, ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΉ тСкстовому полю const target = button.dataset.target; // Ссли Ρ‚Π°ΠΊΠΎΠΉ сСлСктор ΠΎΠΏΡ€Π΅Π΄Π΅Π»Ρ‘Π½... if (target) { // Π½Π°Ρ…ΠΎΠ΄ΠΈΠΌ тСкстовоС ΠΏΠΎΠ»Π΅ для этой ΠΊΠ½ΠΎΠΏΠΊΠΈ const textarea = document.querySelector(target); // Ссли ΠΏΠΎΠ»Π΅ нашлось if (textarea) { // вСшаСм Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ события "ΠΊΠ»ΠΈΠΊ" button.addEventListener('click', event => { // ΠΏΠΎ ΠΊΠ»ΠΈΠΊΡƒ мСняСм Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ свойства "Π²Ρ‹ΠΊΠ»ΡŽΡ‡Π½ΠΎ" Π½Π° ΠΏΡ€ΠΎΡ‚ΠΈΠ²ΠΎΠΏΠΎΠ»ΠΎΠΆΠ½ΠΎΠ΅ textarea.disabled = !textarea.disabled; // Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ я Π½Π΅ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ понял, Ρ‡Ρ‚ΠΎ ΠΈΠΌΠ΅Π½Π½ΠΎ Π½ΡƒΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ с // этим ΠΏΠΎΠ»Π΅ΠΌ, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ Π²Ρ‹ ΠΈΠΌΠ΅Π»ΠΈ Π² Π²ΠΈΠ΄Ρƒ, Ρ‡Ρ‚ΠΎ Π½ΡƒΠΆΠ½ΠΎ навСсти фокус. textarea.focus(); }); } } } 
 <textarea disabled="disabled" id="ta1"></textarea> <button data-target="#ta1">Toggle</button> <br> <textarea id="ta2"></textarea> <button data-target="#ta2">Toggle</button> 

     <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <textarea class="area_1">1</textarea> <input type="button" class="button_1" placeholder="1"> <textarea class="area_2">2</textarea> <input type="button" class="button_2" placeholder="2"> <script> $(document).on('click','.button_1',function(){ if($('.area_1').hasClass('opened')){ $('.area_1').removeClass('opened'); } else{ $('.area_1').addClass('opened'); $('.area_1').focus(); } }); $(document).on('click','.button_2',function(){ if($('.area_2').hasClass('opened')){ $('.area_2').removeClass('opened'); } else{ $('.area_2').addClass('opened'); $('.area_2').focus(); } }); </script>

    Demo: https://jsfiddle.net/ede9k5un/

       const textarea = document.querySelectorAll('textarea'); [...document.querySelectorAll('button')].forEach((s, i, arr) => { s.addEventListener('click', function() { for (let i = 0; i < textarea.length; i++) { textarea[i].removeAttribute('disabled') } textarea[i].setAttribute('disabled', 'disabled') }) }) 
       <textarea disabled></textarea> <button>Toggle</button> <textarea></textarea> <button>Toggle</button>

      • i and i - to confuse Katya? - Igor
      • @Igor, this is me on purpose ... There will be something to think about ... - Air