Блог

Главная - Вопросы по программированию - Как хранить и устанавливать значения в JS?

Как хранить и устанавливать значения в JS?

#javascript #html #jquery

Вопрос:

У меня есть HTML, как показано ниже,

  <input class="btn btn-primary" id ="b1" type="button" value="Blue">
 <input class="btn btn-primary" id ="b2" type="button" value="orange">
  <input class="btn btn-primary" id ="b3" type="button" value="green">

Я не хочу брать значение из HTML. Как показано ниже,

 $(#b1).attr('value') or

var val = document.getElementById(ele.id).value;

Вместо этого, I need the value from the JS .

default Value Для каждой кнопки должно быть 0 . Когда я каждый раз нажимаю на кнопку, default value . Когда он достигнет 3 , он снова должен переместиться 0 .

Нравится,

 default value  = default Value >= 3 ? 0 :   defaultValue
 
 $("button").click(function () {
  buttonVal(this);
});

function buttonVal(ele) {
  var def = [];
  def = def>=3 ? 0 :   def;
  switch(def) 
  {
  case 0:
   def = 5;
   break;
  case 1 :
   def = 4;
   break;
  default:
   def = 0;
}
}

Но я использовал switch кейс, чтобы получить default value .

Эта строка def = def>=3 ? 0 : def; выполняется перед переключателем.

Итак, это не сработало.

Можем ли мы реализовать другие способы, кроме switch получения значения по умолчанию ?

Мне нужно сохранить значение по умолчанию в JS .

Кто-нибудь может, пожалуйста, помочь?

Большое спасибо.

Комментарии:

1. Вы хотите хранить каждое входное значение по-разному. как для btn1 (0,1,, 2,3), btn2 (0,1.2.3), btn3(0,1,2,3)? Вы хотите показать это значение где-нибудь в html? В какой структуре вам нужны эти значения btn, когда вы хотите повторить в js?

2. значение кнопки-это строка, а не число? Не уверены, как вы хотите увеличить «оранжевый» на 1

3. @epascarello, мне не нужна строка из HTML, значение в HTML может быть любым. Но мне нужно установить значение только в JS, а не в HTML.

4. @Davi поделится ожидаемым результатом для этих трех кнопок

Ответ №1:

Используйте кнопки dataset для сохранения значения.

 $("button").click(function () {
    let currentValue = this.dataset.value || 0;
    if (  currentValue > 3) { currentValue = 0; }
    this.dataset.value = currentValue;
    ...
});

Ответ №2:

Рассматривая ваш идентификатор кнопки в качестве ключа для хранения номера счета

 const container = document.getElementById("btn-container");

const btnValue = {};

container.addEventListener("click", function(e){
  // const v = e.target.value;
  if(e.target.tagName.toLowerCase() === "input"){
      const v = e.target.id;
      btnValue[v] = !btnValue[v] ? 1 : btnValue[v]==3 ? 0 : btnValue[v] 1;
      // Uncommment below code to show value on button
      // e.target.value=btnValue[v];
  }

  console.log(btnValue);
}); 
 <div id="btn-container">
 <input class="btn btn-primary" id ="b1" type="button" value="Blue">
 <input class="btn btn-primary" id ="b2" type="button" value="orange">
 <input class="btn btn-primary" id ="b3" type="button" value="green">
</div>

Комментарии:

1. Спасибо за ваш ответ. Но я хочу подтвердить вам, не берем ли мы значение из HTML — «ввода», используя if(например, target.tagName.toLowerCase() === «ввод»){ } .?

2. Нет, это для проверки того , что событие щелчка происходит от элемента, имя тега input которого, мы сделали эту проверку, потому что мы добавили прослушиватель событий в div не на каждой кнопке ввода, она называется event delegation .

3. @Navneeth, Спасибо за ваше объяснение, это так полезно. После сохранения button value для каждого ввода. Как установить значение button value для каждого входа. ? Потому что я пытался использовать document.getElementById(v).value = btnValue . ` Это не сработало! . I need the integer 0 ,1 ,2, 3 to be displayed on the button text for each нажмите`.

4. Внутри, если, наконец e.target.value=btnValue[v] , проверите обновленный ответ, просто раскомментируйте код

5. Спасибо. Поскольку я новичок в JS, я не мог понять код , btnValue[v] = !btnValue[v] ? 1 : Значение btn[v]==3 ? 0 : Значение BTN[v] 1;. Не могли бы вы, пожалуйста, помочь? Большое спасибо.

Метки: