Сократить код, не переписывая несколько раз if

Вопрос-ответ
1

Можно ли сократить как-то код, не переписывая несколько раз if, таких условий if может быть десятки.

<center>
<div id='box1'>
<div id="d1">1hello</div>
<div id="d2">2hello</div>
<div id="d3">3hello</div>
</div>
<div id='box2'>
<div id="d1">d1</div>
<div id="d2">d2</div>
<div id="d3">d3</div>
</div>
</center>
<script>
var c = document.getElementById("box1").children; 
var d = document.getElementById("box2").children; 
box1.addEventListener("click",
function(event) 
{ 
if (event.target.id == c[0].id) { 
d[0].style.backgroundColor='green';
}
if (event.target.id == c[1].id) { 
d[1].style.backgroundColor='pink';
}
if (event.target.id == c[2].id) { 
d[2].style.backgroundColor='yellow';
}
});
</script>
2

Можно попробовать что-нибудь такое:

const colorsMap = {
	d1: {
		index: 0,
		color: 'green',
	},
	d2: {
		index: 1,
		color: 'pink',
	},
	d3: {
		index: 2,
		color: 'yellow',
	}
};

const config = colorsMap[event.target.id];

if (config) {
	d[config.index].style.backgroundColor = config.color;
}

Но мне кажется, что нужно попробовать пересмотреть подход: такой код получится довольно хрупким.
А также, обрати внимание: id должен быть уникальным на странице. У тебя есть элементы с одниковыми id:

<div id="d1">1hello</div>
<div id="d1">d1</div>
1 лайк
3

Вообще мне кажется, что это тот случай, когда было бы правильно собирать страницу на лету из какого-нибудь конфига (да и вообще, хранить данные отдельно, а разметку отдельно считается хорошим тоном). Но если есть возможность контролировать страницу, то вполне можно хранить данные прямо в HTML:

<center>
   <div id='buttons'>
   	<button data-selector="#d1" data-color="green">Hello green</button>
   	<button data-selector="#d2" data-color="yellow">Hello yellow</button>
   	<button data-selector="#d3" data-color="pink">Hello pink</button>
   	<button data-selector="#d3">Hello unknown</button>
   	<button data-selector="#d3" data-color="unset">Clear pink</button>
   </div>
   <div id="text">
   	<div id="d1">Paint me green</div>
   	<div id="d2">Paint me yellow</div>
   	<div id="d3">Paint me pink</div>
   </div>
</center>
<script>
var c = document.getElementById("buttons"); 

c.addEventListener('click', event => {
   const {selector, color} = event.target.dataset;

   if (!selector || !color) return;

   const el = document.querySelector(selector);
   if (el) {
       el.style.backgroundColor = color
   }
});

</script>