Есть такой объект:
var levelTimes = {
guruHard : [10000, 10000, 10000],
guruLow : [30000, 30000, 30000],
guruMiddle : [20000, 20000, 20000],
traineeHard : [10000, 10000, 10000],
traineeLow : [30000, 30000, 30000],
traineeMiddle : [20000, 20000, 20000]
};
Как по клику из него получать значения ?
В зависимости от того на каком элементе кликнуть нужно получить определенный массив например levelTimes.guruHard или levelTimes.traineeMiddle и тд, а дальше оперировать этим массивом.
Вот пример кода:
var level = document.getElementById('difficultyLevel')
var levelTimes = {
guruHard: [10000, 10000, 10000],
guruLow: [30000, 30000, 30000],
guruMiddle: [20000, 20000, 20000],
traineeHard: [10000, 10000, 10000],
traineeLow: [30000, 30000, 30000],
traineeMiddle: [20000, 20000, 20000]
};
level.onclick = function setLevelTimes(event) {
var target = event.target;
while (target != this) {
if (target.className.split(' ')[1] == 'level') {
var targetItem = camelize(target.innerText);
console.log(targetItem);
return;
}
target = target.parentNode;
}
return targetItem;
}
console.log(levelTimes.targetItem); //здесь выдает undefined, а должен быть массив!
function camelize(str) {
return str.replace(/(?:^\w|[A-Z]|\b\w)/g, function(letter, index) {
return index == 0 ? letter.toLowerCase() : letter.toUpperCase();
}).replace(/\s+/g, '');
}
<body>
<div class="dropdown-menu" id="difficultyLevel">
<a class="dropdown-item level" href="#">Guru Hard</a>
<a class="dropdown-item level" href="#">Guru Low</a>
<a class="dropdown-item level" href="#">Guru Middle</a>
<a class="dropdown-item level" href="#">Trainee Hard</a>
<a class="dropdown-item level" href="#">Trainee Low</a>
<a class="dropdown-item level" href="#">Trainee Middle</a>
</div>
</body>