Как обратиться к ID элемента через функцию-шаблон по 'onclick' на другом элементе?

Question

В данном примере есть два дива, стоящих рядом. Как по клику на одном диве поменять свойства второго? Явным образом указывать ID нельзя, т.к. таких объектов много. Я подумал, что как бы легче указывать ID в атрибуте "onclick" - в условиях функции, чем копировать эту функцию много раз или писать массив.

function funcOne(x) {
  document.getElementById(`"${x}"`).style.background = "red";
}

.main {
  padding: 10px;
  background: #FFF;
  cursor: pointer;
}
.part {
  text-align: center;
  width: 50px;
  height: 20px;
  margin-bottom: 5px;
  background: #ccc;
}

<div class="main">
  <div id="part-1" class="part">1</div>
  <div id="part-2" class="part" onclick="funcOne(part-1)">2</div>
</div>

Answer 1

Я подумал, что как бы легче указывать ID в атрибуте "onclick" - в условиях функции

там есть this

<input id='a'
onfocus='console.log(this.id + " in focus")'
onblur='console.log(this.id + " blured")'
>

<input id='b'
onfocus='console.log(this.id + " in focus")'
onblur='console.log(this.id + " blured")'
>

<input id='c'
onfocus='console.log(this.id + " in focus")'
onblur='console.log(this.id + " blured")'

в нём есть ссылка на родительский объект, а оттуда уже и на всех "своих" ровесников можно глянуть. this.parentElement.childNodes как то так...

Я хочу, чтоб когда щелкнули по текстэреа, включился чекед на чекбоксе.

чтоб сама функция брала ID из onclick как-то, потому что не всегда они рядом стоят

<input type='checkbox' id='w'>
<label for='w'>
<textarea>
как на счет этого?
</textarea>
</label><br>

<input type='checkbox' id='x'>
<label for='x' contenteditable='true'>
или этого?
</label><br>

<div>ладно, ладно... я серьёзен)</div>
<q>Явным образом указывать ID нельзя, т.к. таких объектов много.</q>
<form>
хм...
<input type='checkbox' id='y' value='0'><br>
<textarea onclick='this.parentElement.children[0].checked="true";'>
оно ведь?)
</textarea>
</form>

<form>
<input type='checkbox' id='z' value='0'><br>
<textarea onfocus='this.parentElement.children[0].checked=true;'
onblur='this.parentElement.children[0].checked=false;'>
я даже немного наванговать могу до такого варианта...
</textarea>
</form>

но это ведь все равно не то чего хотелось, верно? дык может все таки сформулируете задачу по полнее? :3

UPD 4.01.2024 / 18:29

чтоб в textarea был текст пользователя ... А как только он удаляет текст - чекед пропадал бы

<form>
<input type='checkbox'>
<textarea
  oninput='this.parentElement.children[0].checked = (this.value!="" ? true : false)'>
</textarea>
</form>

БЛОГ НА HUSL

Как обратиться к ID элемента через функцию-шаблон по 'onclick' на другом элементе?

Ответы (1 шт):

UPD 4.01.2024 / 18:29