javascript – Help me fix my calculator

Question:

There is JS code, everything is fine in it, except for one … If you do not select the select, the form will not count. How to make the code initially contain the value of the smallest of options for each block? Through selected does not work, tried

<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:

The easiest option is to add the selected attribute to the desired value and remove the lines

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

UPD Updated your code, but there is a lot of work to improve and optimize

<!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>
Scroll to Top