Сброс значений калькулятора при клике javascript

173
05 февраля 2020, 23:50

var ah = { 
  40: 8, 
  45: 10, 
  50: 11, 
  55: 12, 
  60: 14, 
  65: 15, 
  70: 16, 
  75: 16, 
  85: 17, 
  90: 18, 
  95: 19, 
  100: 20, 
  110: 21, 
  120: 25, 
  132: 30, 
  140: 32, 
  190: 42, 
  200: 44, 
  210: 46, 
  220: 48, 
  230: 50, 
 
} 
 
$(document).ready(function() { 
 
function calcTotal() { 
    $('#res1').html(''); 
    var op = $("#select-ah").val(); 
    var op1 = +ah[op]; 
    var v = +$("#val1").val(); 
    var total = op1 * v; 
    var total2 = op1 * 0 * v; 
var sbros = $(#reset1).click(function(){ 
    return total2; 
}; 
//console.log(op, op1, v, total); 
if (!isNaN(total)) { 
  $('#res1').append($("<span></span>").text(total)) 
} 
else if (sbros) { 
  $('#res1').append($("<span></span>").text(sbros)) 
} 
else { 
  $('#res1').html('<span>Результат</span>'); 
}; 
 
  $('#minus').click(function() { 
    var $input = $(this).parent().find('input'); 
    var count = +$input.val(); 
    if (isNaN(count)) 
      count = 0; 
    count--; 
    count = count < 1 ? 1 : count; 
    $input.val(count); 
    $input.change(); 
  }); 
  $('#plus').click(function() { 
    var $input = $(this).parent().find('input'); 
    var count = +$input.val(); 
    if (isNaN(count)) 
      count = 0; 
    count++; 
    $input.val(count); 
    $input.change(); 
  }); 
   
  Object.keys(ah).forEach((item) => { 
    $('#select-ah').append('<option value="' + item + '">' + item + '</option>'); 
  }); 
   
  $('#select-ah').change(calcTotal); 
  $(".block__val input").change(calcTotal); 
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<select id="select-ah"> 
  <option>Выберите емкость (A/ч)</option> 
</select> 
</div> 
<div class="block__val" style="display:flex;justify-content: center;width:35%;"> 
  <span class="btn-btn1" id="minus">-</span> 
  <input type="text" value="1" style="text-align: center;border-radius: 0px;" id="val1"> 
  <span class="btn-btn1" id="plus">+</span> 
</div> 
</div> 
<div class="price-itog"> 
  <p style="margin-top: 47px; color:#2E0648;">Стоимость: <span id="res1"></span></p> 
</div>

Answer 1

Длинный комментарий был бы, решил в виде ответа записать.

$(document) документ в таком виде пишется без кавычек. А все селекторы классов и id обязательно должны быть с кавычками $('#reset1')

• Запись такого вида:

$('#reset1').click(); 

(а кстати, click() разве не убрали из последних версий jQ?) привязывает событие к элементу, который уже оказался на странице после загрузки. Он не будет работать, если элемент id="reset1" создается динамически. Поэтому там-сям так часто рекомендуют привыкать к записи такого вида:

$(document).on('click', '#reset1', function(){ ... });

В таком случае клик привязывается к документу. И при клике идет проверка, если у кликнутого элемента оказывается id="reset1", запускается функция.

append() в целом достаточно "тяжелая" штука... к редактированию HTML страницы стоит прибегать только при реальной необходимости. А .html() или innerHTML - "тяжелее" (сперва смотрят на всё написанное, делают хитрую магию, а если там оказываются HTML элементы, через append добавляют элементы куда надо)

В вашем случае оптимальнее будет изначально держать на странице весь HTML, только всему, что должно быть изначально скрыто, добавить класс такого вида:

<style> .INVIS {display: none;} </style>
<div class="INVIS" id="reset1"> Меня не видно </div>

При необходимости, через jQuery уже можно переключать эту видимость:

Показать — $('#reset1').show(); или скрыть: $('#reset1').hide();

• Проверку isNaN можно вовсе исключить, если вашим инпутам добавить type="number" Тогда туда в принципе нельзя будет ничего ввести кроме чисел.

А не забывайте перед математическими операциями убедиться, что полученное число является именно числом (Number), а не строкой (String). Такая запись превращает строку в число:

var x = Number( $('#например').val() );

Не удержался, записал с нуля))

//Чтобы лишний раз не проверять на NaN, поместил строку "выберите" 
// сразу в объект, со значением 0 (будет 0, а не NaN) 
 
var ah = { 
  'Выберите емкость (А/ч)': 0, 
  40: 8, 
  45: 10, 
  50: 11, 
  55: 12, 
  60: 14, 
  65: 15, 
  70: 16, 
  75: 16, 
  85: 17, 
  90: 18, 
  95: 19, 
  100: 20, 
  110: 21, 
  120: 25, 
  132: 30, 
  140: 32, 
  190: 42, 
  200: 44, 
  210: 46, 
  220: 48, 
  230: 50 
} 
 
//Здесь вы лишний раз записывали ничегонеделающий value="item".  
 
Object.keys(ah).forEach((item) => { 
    $('#select-ah').append('<option>' + item + '</option>'); 
  }); 
$('#select-ah').val('Выберите емкость (А/ч)'); 
 
//Один раз записываем универсальную функцию-считалку и всё, вызываем её куда надо. 
function count(){ 
  var index = $('#select-ah').val(); 
  var op = +ah[index]; 
  $('#res1').text( op*($('#val1').val()) ); 
} 
//при вводе в инпут... 
$(document).on('input','#val1',function(){ count(); });   
//при смене значения селекта... 
$(document).on('change','#select-ah',function(){ count(); }); 
//при клике на +1 (сперва меняем значение, потом вызываем считалку) 
$(document).on('click','#plus',function(){ 
  $('#val1').val( Number($('#val1').val()) + 1 ); count(); 
}); 
//при клике на -1 
$(document).on('click','#minus',function(){ 
  var num = $('#val1').val() == 1 ? 0 : 1; 
  $('#val1').val( Number($('#val1').val()) - num ); count(); 
}); 
//здесь ? называется "тернарный оператор" и является "коротким" if 
//Общий вид: «Условие ? Значение при выполнении : Значение в других случаях» 
//Проверяем, если значение инпута и так равно 1, от него делаем минус 0 
//Иначе, минус 1 
 
//Самый банальный сброс 
$(document).on('click','#reset',function(){ 
  $('#val1').val(1); 
  $('#res1').text(""); //Пустая строка 
  $('#select-ah').val('Выберите емкость (А/ч)'); 
});
input{width: 80px; text-align:center;font-size:30px;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<!-- Это плохой HTML. На скорую руку просто всегда оставляю только основные элементы.  
А когда скрипт готов, потом уже можно заняться внешним видом --> 
 
<select id="select-ah"></select> 
 
<br><br> 
<button id="minus">-</button> 
<input type="number" value="1" id="val1"> 
<button id="plus">+</button> 
 
<br><br> 
Стоимость: <span id="res1"></span> 
 
<br><br> 
<button id="reset">reset</button>

Если страница очень большая, с километровым JS, надо избегать глобальных переменных, чтобы например в случае совпадения названий переменных, одно не переписывало значение другого. Этому немного помогают const и let вместо var... но чтобы совсем надежно, можно прям весь написанный код пихнуть в $(document).ready(function(){...});

Но в данном случае jQ длиннее чем JS)
На чистом JS функцию надо будет поставить в левую сиську (  )(  );

(function(){ сюда весь код... это эквивалент $ready })();
READ ALSO
Не отображаются лайк-шары в блоке &ldquo;Поделиться&rdquo; у facebook

Не отображаются лайк-шары в блоке “Поделиться” у facebook

Блок обновлен, прошло более 2 дней с момент последнего клика по facebookПример, страницы https://news

180
Как соотносятся примеры из книг и реальная разработка? [закрыт]

Как соотносятся примеры из книг и реальная разработка? [закрыт]

Хотите улучшить этот вопрос? Переформулируйте вопрос, чтобы на него можно было дать ответ, основанный на фактах и цитатах, отредактировав...

183
Передать функцию через props React

Передать функцию через props React

Есть класс App, в методе render я вставляю компонент Proposal:

197
Как рисовать архитектуру приложений на React?

Как рисовать архитектуру приложений на React?

Как принято рисовать архитектуру для приложений React, или хотя бы JS? Нужен какой-нибудь простой гайд, для начинающих

194