Hello, I have such a script and it is necessary for him to do so that when you click on the textarea, the style changes to display: block;

<textarea id="divid-1"></textarea> <div style="display:none;" id="otvbl-1"> text </div>

At the same time, it is also necessary to transfer a digit from id, because there will be many such blocks and each will have its own assigned number, in this script the number assignment is 1

    2 answers 2

     var textareas = document.querySelectorAll('textarea'); textareas.forEach(function(item) { item.addEventListener("focus", function() { var idNum = this.id.split('-')[1]; document.querySelector('#otvbl-' + idNum).style.display = 'block'; }, true); }); 
     <textarea id="divid-1"></textarea> <div style="display:none;" id="otvbl-1"> text </div> <br/> <textarea id="divid-2"></textarea> <div style="display:none;" id="otvbl-2"> text2 </div> <br/> <textarea id="divid-3"></textarea> <div style="display:none;" id="otvbl-3"> text3 </div>

    So that js loaded after everything has been loaded, you can wrap it in DOMContentLoaded :

     document.addEventListener("DOMContentLoaded", function(event) { var textareas = document.querySelectorAll('textarea'); textareas.forEach(function(item) { item.addEventListener("focus", function() { var idNum = this.id.split('-')[1]; document.querySelector('#otvbl-' + idNum).style.display = 'block'; }, true); }); });

    In general, at least, in order not to produce as many IDs, you just need to make a wrapper, in which there will be both a textarea and a div. And when you press the focus of textiles, take a div in the same wrapper as textarea. Then it will be much easier

    something like:

     // document.addEventListener("DOMContentLoaded", function(event) { var textareas = document.querySelectorAll('textarea'); textareas.forEach(function(item) { item.addEventListener("focus", function() { // this.closest('.wrap').querySelector('textarea+div').style.display = 'block'; this.closest('.wrap').children[1].style.display = 'block'; }, true); }); // }); 
     .wrap > div { display: none; } 
     <div class="wrap"> <textarea></textarea> <div> text </div> </div> <div class="wrap"> <textarea></textarea> <div> text2 </div> </div> <div class="wrap"> <textarea></textarea> <div> text3 </div> </div>

    C Jquery even easier :)

    • Here in the second case, if the style I have is recorded separately in another file and simply through include (); connected. Will he change this style? - Sasha Osipov
    • @ Sasha Osipov in which case? When does it change with focus or right at the beginning? or what exactly is meant? You can prescribe the css style and instead of block/none assign a style to the element. Usually everything is done this way - Alexey Shimansky
    • what js library need to be connected? Can you please link - Sasha Osipov
    • @ SashaOsipov jquery.com ...... do not, but you can. It is sometimes more convenient with her - Aleksey Shimansky
    • I can not understand anything, I connected on this link code.jquery.com/jquery-3.0.0.min.js but it still does not work. - Sasha Osipov

    The first part of the question can be solved as follows:

     textarea:focus + div{ display: block; }