Как обновить значение объекта по клику с помощью JavaScript - PullRequest
Новая
       2

Как обновить значение объекта по клику с помощью JavaScript

0 голосов
/ 12 октября 2018 
const obj = {'name1':true, 'name2': false, 'name3':true}

У меня есть функция onclick, в которой я получу name на основе этого name Мне нужно изменить значение имени объекта, если оно равно true, мне нужно изменить на false если это false изменить на true

Примечание: это должно происходить только на основе клика

мой вывод должен быть 

const obj = {'name1':true, 'name2': true, 'name3':true}

Ответы [ 2 ]

0 голосов
/ 12 октября 2018

Все, что вам нужно, это просто addEventListener для каждого input и "дублировать" текущее состояние целевого объекта.Вот пример кода с комментариями: 

const obj = {
  'name1': true,
  'name2': false,
  'name3': true
};

/* Get all inputs */
const inputs = document.querySelectorAll('input');

/* Add "click" listener to every input */
inputs.forEach(input => input.addEventListener('click', () => {
  /* Store current state of clicked input to target object property */
  obj[input.name] = input.checked;
  console.log(obj);
}));
input {
  margin: 12px;
}
<input type="checkbox" name="name1" checked />
<input type="checkbox" name="name2" />
<input type="checkbox" name="name3" checked />
0 голосов
/ 12 октября 2018

Попробуйте приведенный ниже код, а также концепцию, может решить вашу проблему:) 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
    <select onchange="test(this)">
      <option value="name1"> Name1 </option>
      <option value="name2"> Name2 </option>
      <option value="name3"> Name3 </option>
  </select>
  <script>
    const obj = {'name1':true, 'name2': false, 'name3' :true};
function test(e){
   console.log("Before");
   console.log(obj);
   console.log("Name select");
   console.log(e.value);
   obj[e.value]=  !  obj[e.value];
  console.log("After");
   console.log(obj);
  
}
  </script>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...