0

Суть в том, что есть поле в котором введено значение = 1, есть две кнопки: кнопка1 прибавляет 1, кнопка2 отнимает тоже 1. Кнопка2 должна становиться некликабельной или нерабочей, после того как отнимет 1. Но должна возобновляться, то есть становиться снова рабочей, после того, как значение увеличится на 2.( то есть после того как совершиться действие запрограммированное на кнопку 1). на примере: значение = 1 . Нажимаем кнопку1 => значение = 2, нажимаем кнопку2 => значение = 1, кнопка 2 становиться disabled. далее пользователи нажимают на кнопку1 и при достижении значения = 3, кнопка2 становиться снова активной.

jQuery('document').ready(function() {

  jQuery('.go').on('click', function() {
    var pg = {};
    pg = jQuery('#p1').val();
      pg = parseInt(pg);
    var pn;
      pn = pg + 1;

    $('#p1').attr('value', pn)
  });
  jQuery('.back').on('click', function () {
    var  pb = jQuery('#p1').val();
      pb = parseInt(pb);
    var  ch;
      ch = pb - 1;

    $('#p1').attr('value', ch);
    $('.back').attr('disabled', true );

  });
  jQuery('.go').on('click', function first() {  
    var go;

    if(go >= ch + 2) {
      $('.back').attr('disabled', false );
    }
  });
});

Проблема еще в том, что код не видит значения переменной из другой функции, читал про return и global, но так как новичок в этом деле, не получилось, так как там нет описания подобного случая. пытался сделать еще вот так

jQuery('document').ready(function() {

  jQuery('.go').on('click', function() {
    var pg = {};
    pg = jQuery('#p1').val();
        pg = parseInt(pg);
    var pn;
        pn = pg + 1;

    $('#p1').attr('value', pn)
  });
  jQuery('.back').on('click', function () {

    var  pb = jQuery('#p1').val();
         pb = parseInt(pb);
    var  ch;
         ch = pb - 1;

    $('#p1').attr('value', ch);
    $('.back').attr('disabled', true );
    var c, k;
    k = ch;
    if(c >= k + 2) { 
      $('.back').attr('disabled', false );
    }
  });
});

Вот отрывок кода input:

<form>
  <p><input type="number" value="1" id="p1" readonly required/></p>
  <p><button class="b go" onclick="return false;" >Отправить</button> <button class="b back" onclick="return false;"> Забрать </button></p>
  <button class="b again" onclick="return false;" ></button>
</form>

2 ответа 2

0

Для вашего примера можно сделать так:

$(document).ready(function () {
    let number = $('#p1').val(); // Переменная, в которой содержится число
    let count_increase = 0;  // Количество нажатий на кнопку увеличения
    $('.back').click(function () {
        $(this).prop('disabled', true);
        $('#p1').val(--number);
        count_increase = 0;
    });

    $('.go').click(function () {
        $('#p1').val(++number);
        count_increase++;
        if(count_increase === 2) $('.back').prop('disabled', false);
    });
    
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
    <p>
        <input type="number" value="1" id="p1" readonly required/>
    </p>
    <p>
        <button class="b go" onclick="return false;" >Отправить</button>
        <button class="b back" onclick="return false;"> Забрать </button>
    </p>
</form>

9
  • Спасибо большое! Не сложно ли вам будет подсказать источники, где я мог почитать и научиться этому всему? И есть ли возможность связаться с вами по мере того, будут возникать вопросы (а они будут возникать) и по поводу сотрудничества? Буду признателен. 2 окт 2018 в 12:07
  • Если я вам помог, отметьте ответ как верный :) По поводу источников и научиться - в интернете много учебников на любой случай жизни. Скажите конкретнее, чему именно хотите научиться - подскажу в какую сторону копать. По поводу связи - у меня в профиле есть сайт, там указаны мои контакты. 2 окт 2018 в 12:25
  • Хорошо, а есть ли возможность подвязать это все-таки на значении, а не на нажатии кнопки, ибо дальше будет добавляться условие, при котором кнопку нажимать можно будет, а значение меняться не будет? 2 окт 2018 в 12:38
  • Можно добавить условие в функцию. if(условие){ здесь то что внутри функции при нажатии на .go} 2 окт 2018 в 12:46
  • там суть в том, что много пользователей будут нажимать на кнопку, но значение не будет меняться до выполнения определенного условия, поэтому нужно сделать именно через изменение значения 2 окт 2018 в 13:02
0

document.addEventListener('DOMContentLoaded', () => {
  const inputEl = document.getElementById('input');
  const increaseEl = document.getElementById('increase');
  const decreaseEl = document.getElementById('decrease');
  let count = 0;

  decreaseEl.addEventListener('click', (e) => {
    e.preventDefault();
    const value = Number(inputEl.value);
    decreaseEl.disabled = true;
    inputEl.value = value - 1;
    count = 0;
  });

  increaseEl.addEventListener('click', (e) => {
    e.preventDefault();
    const value = Number(inputEl.value);
    inputEl.value = value + 1;
    count += 1;
    if (count >= 2) {
      decreaseEl.disabled = false;
    }
  });
});
<form>
  <input type="number" value="1" id="input" readonly />
  <button id="increase">
    Увеличить
  </button>
  <button id="decrease">
    Уменьшить
  </button>
</form>

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.