как получить значение по клику?

446

10 ноября 2017, 11:09

Есть такой объект:

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>

Answer 1

Структура html:

  <div class="dropdown-menu" id="difficultyLevel">
    <a class="dropdown-item level" id="guruHard" href="#!">Guru Hard</a>
    <a class="dropdown-item level" id="guruLow" href="#!">Guru Low</a>
    <a class="dropdown-item level" id="guruMiddle" href="#!">Guru Middle</a>
    <a class="dropdown-item level" id="traineeHard" href="#!">Trainee Hard</a>
    <a class="dropdown-item level" id="traineeLow" href="#!">Trainee Low</a>
    <a class="dropdown-item level" id="traineeMiddle" href="#!">Trainee Middle</a>
  </div>

Код JS:

level.onclick = function setLevelTimes() {
  var target = event.target;
  if (target.className.split(' ')[1] == 'level') {  
        result = levelTimes[target.id];
        console.log('Переменная result: '+result); 
    } 
  return result;
}

Результат:

Answer 2

Ошибка простая, в объекте levelTimes не свойства targetItem. Возможно, если вы строку:

var targetItem = camelize(target.innerText);

заменете на

levelTime.targetItem = camelize(target.innerText);

========= Дополнение ==========
Если хотите сделать переменную глобальную объявляйте ее за прелелами функции(события). Также, после моего исправления у Вас такая же будет ошибка. Так как скрипт погружается моментально, а данные добавятся через время (когда сработает событие)

Answer 3

console.log(levelTimes.targetItem); //здесь выдает undefined, а должен быть массив!

По этой строке :

код выполняется по очереди, как написан, то-есть так :

обьявляется переменная level
обьявляется обьект levelTimes
вешается событие клика
выводится в консоль свойство targetItem обьекта levelTimes (его нету, по-этому получаем undefined)

Можно сделать так :

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(e) { 
  if (e.target.classList.contains('level')) { 
    levelTimes.targetItem = levelTimes[camelize(e.target.innerText)]; 
    console.log(levelTimes.targetItem); 
  } 
} 
 
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>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Верно ли решена задача? Что можно улучшить?

Создайте инпут, в который пользователь вводит дату своего рождения в формате '2014-12-31' (с конкретным годом)По потери фокуса выведите под инпутом...

286

javascript