addEventListener('click') на элементы ли

137

28 мая 2019, 08:10

document.getElementById('red').addEventListener('click', function() { 
	instrColor = 'red'; 
    console.log(instrColor); 
}) 
document.getElementById('blue').addEventListener('click', function() { 
	instrColor = 'blue'; 
    console.log(instrColor); 
}) 
document.getElementById('green').addEventListener('click', function() { 
	instrColor = 'green'; 
    console.log(instrColor); 
}) 
document.getElementById('yellow').addEventListener('click', function() { 
	instrColor = 'yellow'; 
    console.log(instrColor); 
}) 
document.getElementById('pink').addEventListener('click', function() { 
	instrColor = 'pink'; 
    console.log(instrColor); 
}) 
document.getElementById('brown').addEventListener('click', function() { 
	instrColor = 'brown'; 
    console.log(instrColor); 
}) 
document.getElementById('black').addEventListener('click', function() { 
	instrColor = 'black'; 
    console.log(instrColor); 
}) 
document.getElementById('orange').addEventListener('click', function() { 
	instrColor = 'orange'; 
    console.log(instrColor); 
})

.colors { 
						height: 70px; 
						width: 70px; 
					} 
				#red { 
					background-color: red; 
				} 
				#blue { 
					background-color: blue; 
				} 
				#green { 
					background-color: green; 
				} 
				#pink { 
					background-color: pink; 
				} 
				#black { 
					background-color: black; 
				} 
				#brown { 
					background-color: brown; 
				} 
				#yellow { 
					background-color: yellow; 
				} 
				#orange { 
					background-color: orange; 
				} 
        li { 
					list-style: none; 
					font-size: 1.5rem; 
					padding: 10px; 
					margin: 0 15px; 
					box-sizing: border-box; 
				}

<ul> 
	<li class="colors" id="black"></li> 
	<li class="colors" id="red"></li> 
	<li class="colors" id="blue"></li> 
	<li class="colors" id="green"></li> 
	<li class="colors" id="yellow"></li> 
	<li class="colors" id="pink"></li> 
	<li class="colors" id="orange"></li> 
	<li class="colors" id="brown"></li> 
</ul>

фрагмент кода вот такой, задача чтобы при клике на цвета, instrColor менялся на соответствующее значение(или на id элемента ли). Javascript-овая часть моей реализации мне не особо нравится, как можно его укоротить или сделать как нибудь по элегантней?

Answer 1

Если в списке не будет других элементов то можно добавить листенер на сам список и проверять какой именно элемент в нем кликнули

document.getElementById('colorsList').addEventListener('click', function(e) { 
  var element = e.target 
  instrColor = element.id; 
  console.log(element.id); 
  console.log(instrColor) 
})

.colors { 
  height: 70px; 
  width: 70px; 
} 
 
#red { 
  background-color: red; 
} 
 
#blue { 
  background-color: blue; 
} 
 
#green { 
  background-color: green; 
} 
 
#pink { 
  background-color: pink; 
} 
 
#black { 
  background-color: black; 
} 
 
#brown { 
  background-color: brown; 
} 
 
#yellow { 
  background-color: yellow; 
} 
 
#orange { 
  background-color: orange; 
} 
 
li { 
  list-style: none; 
  font-size: 1.5rem; 
  padding: 10px; 
  margin: 0 15px; 
  box-sizing: border-box; 
}

<ul id="colorsList"> 
  <li class="colors" id="black"></li> 
  <li class="colors" id="red"></li> 
  <li class="colors" id="blue"></li> 
  <li class="colors" id="green"></li> 
  <li class="colors" id="yellow"></li> 
  <li class="colors" id="pink"></li> 
  <li class="colors" id="orange"></li> 
  <li class="colors" id="brown"></li> 
</ul>