Помогите починить калькулятор

340

26 ноября 2016, 18:52

Есть код JS , в нем все отлично , кроме одного... Если не выбрать селект , форма не будет считать . Как сделать так , чтобы в коде изначально стояло значение наименьшего из options для каждого блока ? Через selected не работает , пробовал

<select name="main-col" id="mySelect" class="form-control sel"   onchange="foo()">
<option value="0" selected>Выберите</option>
<option value="450р.">1.5</option>
<option value="470р.">1.7</option>
</select>
<select name="main-col" id="myStwo" class="form-control sel" onchange="foo2()">
  <option value="0" selected>Выберите</option>
  <option value="870р.">1.2</option>
  <option value="900р.">1.5</option>
<option value="950р.">1.7</option>
</select>
<select name="main-col" class="form-control sel" id="mySthree" onchange="foo3()">
<option value="1100р.">1.2</option>
<option value="1200р.">1.5</option>
<option value="1400р.">1.7</option>
</select>
<div ></div>
<div>
<div>Количество товаров:</div>
<div>
<input id="count" type="number">
</div>
</div>
<div>Итого: <span id="summary">0</span>
</div>
<div>Цена за шт.: <span id="price">0</span>
</div>
<span id="discount"></span>
<div id="pricestwo"></div>
<div>
<div>Количество товаров:</div>
<div>
<input id="counttwo" type="number">
</div>
</div>
<div>Итого: <span id="summarytwo">0</span>
</div>
<div>Цена за шт.: <span id="pricetwo">0</span>
</div>
<span id="discounttwo"></span>
<div id="pricesthree"></div>
<div>
<div>Количество товаров:</div>
<div>
<input id="countthree" type="number">
</div>
</div>
<div>Итого: <span id="summarythree">0</span>
</div>
<div>Цена за шт.: <span id="pricethree">0</span>
</div>
<span id="discounthree"></span>

var pricesDiv1 = document.getElementById('prices'),
countInput1 = document.getElementById('count'),
summarySpan1 = document.getElementById('summary'),
priceSpan1 = document.getElementById('price'),
discount1 = document.getElementById('discount');
var pricesDiv2 = document.getElementById('pricetwo'),
countInput2 = document.getElementById('counttwo'),
summarySpan2 = document.getElementById('summarytwo'),
priceSpan2 = document.getElementById('pricetwo'),
discount2 = document.getElementById('discounttwo');
var pricesDiv3 = document.getElementById('pricesthree'),
countInput3 = document.getElementById('countthree'),
summarySpan3 = document.getElementById('summarythree'),
priceSpan3 = document.getElementById('pricethree'),
discount3 = document.getElementById('discounttree');
function foo() {
var selectedItem = document.getElementById("mySelect").value;
document.getElementById("price").innerHTML = selectedItem;
}

function calculate1() {
var val = parseInt(document.getElementById('price').innerHTML);
var x = parseInt(countInput1.value);
if (x >= 5 && x < 49) {
summarySpan1.innerHTML = (val * x) - (x * 20);
discount1.innerHTML = "Скидка: " + (x * 20);
} else if (x > 50) {
summarySpan1.innerHTML = (val * x) - (x * 40);
discount1.innerHTML = "Скидка: " + (x * 40);
} else {
summarySpan1.innerHTML = val * x;
}
}
countInput1.addEventListener('keyup', calculate1);




function foo2() {
var selectedItem = document.getElementById("myStwo").value;
document.getElementById("pricetwo").innerHTML = selectedItem;
}

function calculate2() {
var val = parseInt(document.getElementById('pricetwo').innerHTML);
var x = parseInt(countInput2.value);
if (x >= 5 && x < 49) {
summarySpan2.innerHTML = (val * x) - (x * 40);
discount2.innerHTML = "Скидка: " + (x * 40);
} else if (x > 50) {
summarySpan2.innerHTML = (val * x) - (x * 70);
discount2.innerHTML = "Скидка: " + (x * 70);
} else {
summarySpan2.innerHTML = val * x;
}
}
countInput2.addEventListener('keyup', calculate2);

function foo3() {
var selectedItem = document.getElementById("mySthree").value;
document.getElementById("pricethree").innerHTML = selectedItem;
}

function calculate3() {
var val = parseInt(document.getElementById('pricethree').innerHTML);
var x = parseInt(countInput3.value);
if (x >= 5 && x < 49) {
summarySpan3.innerHTML = (val * x) - (x * 100);
discount3.innerHTML = "Скидка: " + (x * 100);
} else if (x > 50) {
summarySpan3.innerHTML = (val * x) - (x * 200);
discount3.innerHTML = "Скидка: " + (x * 200);
} else {
summarySpan3.innerHTML = val * x;
}
}
countInput3.addEventListener('keyup', calculate3);

Answer 1

Самый простой вариант добавить атрибут selected к нужному значению и убрать строчки

<option value="0" selected>Выберите</option>

UPD Обновил ваш код, но работы по улучшению и оптимизации тут много

<!DOCTYPE html>
<html itemscope itemtype="http://schema.org/QAPage">
<head>
<meta charset="utf-8">
<title>javascript - Помогите починить калькулятор - Stack Overflow на русском</title>
</head>
<body>

<select name="main-col" id="mySelect" class="form-control sel"   onchange="foo()">
<option value="450р." selected>1.5</option>
<option value="470р.">1.7</option>
</select>
<select name="main-col" id="myStwo" class="form-control sel" onchange="foo2()">
  <option value="870р.">1.2</option>
  <option value="900р.">1.5</option>
<option value="950р.">1.7</option>
</select>
<select name="main-col" class="form-control sel" id="mySthree" onchange="foo3()">
<option value="1100р." selected>1.2</option>
<option value="1200р.">1.5</option>
<option value="1400р.">1.7</option>
</select>
<div ></div>
<div>
<div>Количество товаров:</div>
<div>
<input id="count" type="number" value="1">
</div>
</div>
<div>Итого: <span id="summary">0</span>
</div>
<div>Цена за шт.: <span id="price">0</span>
</div>
<span id="discount"></span>
<div id="pricestwo"></div>
<div>
<div>Количество товаров:</div>
<div>
<input id="counttwo" type="number" value="1">
</div>
</div>
<div>Итого: <span id="summarytwo">0</span>
</div>
<div>Цена за шт.: <span id="pricetwo">0</span>
</div>
<span id="discounttwo"></span>
<div id="pricesthree"></div>
<div>
<div>Количество товаров:</div>
<div>
<input id="countthree" type="number" value="1">
</div>
</div>
<div>Итого: <span id="summarythree">0</span>
</div>
<div>Цена за шт.: <span id="pricethree">0</span>
</div>
<span id="discounthree"></span>
</body>
</html>
<script>
var pricesDiv1 = document.getElementById('prices'),
countInput1 = document.getElementById('count'),
summarySpan1 = document.getElementById('summary'),
priceSpan1 = document.getElementById('price'),
discount1 = document.getElementById('discount');
var pricesDiv2 = document.getElementById('pricetwo'),
countInput2 = document.getElementById('counttwo'),
summarySpan2 = document.getElementById('summarytwo'),
priceSpan2 = document.getElementById('pricetwo'),
discount2 = document.getElementById('discounttwo');
var pricesDiv3 = document.getElementById('pricesthree'),
countInput3 = document.getElementById('countthree'),
summarySpan3 = document.getElementById('summarythree'),
priceSpan3 = document.getElementById('pricethree'),
discount3 = document.getElementById('discounthree');
function foo() {
var selectedItem = document.getElementById("mySelect").value;
document.getElementById("price").innerHTML = selectedItem;
}

function calculate1() {
var val = parseInt(document.getElementById('price').innerHTML);
var x = parseInt(countInput1.value);
if (x >= 5 && x < 49) {
summarySpan1.innerHTML = (val * x) - (x * 20);
discount1.innerHTML = "Скидка: " + (x * 20);
} else if (x > 50) {
summarySpan1.innerHTML = (val * x) - (x * 40);
discount1.innerHTML = "Скидка: " + (x * 40);
} else {
summarySpan1.innerHTML = val * x;
}
}
countInput1.addEventListener('keyup', calculate1);
countInput1.addEventListener('change', calculate1);




function foo2() {
var selectedItem = document.getElementById("myStwo").value;
document.getElementById("pricetwo").innerHTML = selectedItem;
}

function calculate2() {
var val = parseInt(document.getElementById('pricetwo').innerHTML);
var x = parseInt(countInput2.value);
if (x >= 5 && x < 49) {
summarySpan2.innerHTML = (val * x) - (x * 40);
discount2.innerHTML = "Скидка: " + (x * 40);
} else if (x > 50) {
summarySpan2.innerHTML = (val * x) - (x * 70);
discount2.innerHTML = "Скидка: " + (x * 70);
} else {
summarySpan2.innerHTML = val * x;
}
}
countInput2.addEventListener('keyup', calculate2);
countInput2.addEventListener('change', calculate2);

function foo3() {
var selectedItem = document.getElementById("mySthree").value;
document.getElementById("pricethree").innerHTML = selectedItem;
}

function calculate3() {
var val = parseInt(document.getElementById('pricethree').innerHTML);
var x = parseInt(countInput3.value);
if (x >= 5 && x < 49) {
summarySpan3.innerHTML = (val * x) - (x * 100);
discount3.innerHTML = "Скидка: " + (x * 100);
} else if (x > 50) {
summarySpan3.innerHTML = (val * x) - (x * 200);
discount3.innerHTML = "Скидка: " + (x * 200);
} else {
summarySpan3.innerHTML = val * x;
}
}
countInput3.addEventListener('keyup', calculate3);
countInput3.addEventListener('change', calculate3);
foo(); foo2(); foo3();
calculate1(); calculate2(); calculate3();
</script>

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

Все вопросы

Подробнее о сайте site-vizitka-kiev.org.ua

ТОП-10

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

нажатая кнопка bootstrap вылазит на открытый datepicker

Проблема в том что когда нажал на кнопку на странице и после открыл окно выбора даты datepicker, эта кнопка отрисовывается сверху окна datepicker

404

CSS

Лицензия готового блога

ПредположимЯ нашел блог, код которого лежит в открытом доступе и я его могу скачать (и скачал), я взял стиль блога и сверстал (в учебных целях)...

269

CSS

Почему при клике ссылка не открывается?

Если я добавлю код JS, который при клике добавляют класс active, тогда у меня ссылки не работаютА если без JavaScript у меня все работает

1195

CSS

Flexbox и Internet Explorer 10 [закрыто]

Уважаемые, прошу поделиться опытом применения замечательной технологии Flexbox для всеми любимых браузеров Internet Explorer 10 и нижеНиже код и сразу...

515