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>
Чтоб js
загрузился после того, как всё загрузилось, можно обернуть его в
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);
});
});
Вообще, как минимум, чтоб не плодить столько айдишников, надо бы просто сделать обертку, в которой будет и textarea и див. И при нажатии фокусе текстарии, брать див в той же обертке, что и textarea. Тогда значительно проще будет
что-то типа:
// 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
еще проще :)