Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Простой калькулятор (https://javascript.ru/forum/dom-window/60602-prostojj-kalkulyator.html)

Valentinushka 10.01.2016 11:24

Простой калькулятор
 
Нужно реализовать простой калькулятор, чтобы при клике на кнопку увеличивалось значение
То что есть на данный момент, но нормально не работает
<script type='text/javascript'>
var count=1499;
function inc1() {
	document.getElementById('rezultat').innerHTML=1599;
	return false;
};
function inc2() {
	document.getElementById('rezultat').innerHTML=1699;
	return false;
};
function inc3() {
	document.getElementById('rezultat').innerHTML=1799;
	return false;
};
</script>

<div class="btn_wrap">
							
							<input type="button" value="ШАНС +10%" onclick="inc1()">
							<span>+ 100 РУБЛЕЙ</span>
							</div>
							<div class="btn_wrap">
							<input type="button" value="ШАНС +20%" onclick="inc2()">
							<span>+ 200 РУБЛЕЙ</span>
							</div>
							<div class="btn_wrap">
							<input type="button" value="ШАНС +30%" onclick="inc3()">
							<span>+ 300 РУБЛЕЙ</span>
							<div id="rezultat">1499</div>
							</div>

Keramet 10.01.2016 12:41

Не совсем понятно условие:
1) +10...+30% или +100...+300 руб.?
2) Прибавлять величины к начальному значению (1499) или к текущему?
<!doctype html>
<html>
	<head>
		<meta charset="utf8">
		<title>calc</title>
		<script type='text/javascript'>
		
		window.onload = function() {
			var count = 1499;
			
			function addF(n) {
				return function() {
					count += n;
					document.getElementById('rezultat').innerHTML = count;
				}
			}
			document.getElementById('c10').onclick = addF(100);
			document.getElementById('c20').onclick = addF(200);
			document.getElementById('c30').onclick = addF(300);
		}
		</script>	
	</head>
<body>

	<div class="btn_wrap">
		<input type="button" value="ШАНС +10%" id = 'c10'>
        <span>+ 100 РУБЛЕЙ</span>
    </div>
	<div class="btn_wrap">
        <input type="button" value="ШАНС +20%" id = 'c20'">
		<span>+ 200 РУБЛЕЙ</span>
    </div>
    <div class="btn_wrap">
        <input type="button" value="ШАНС +30%" id = 'c30'">
        <span>+ 300 РУБЛЕЙ</span>
	</div>	
	
	<div id="rezultat">1499</div>
    
</body>
</html>

Keramet 10.01.2016 12:54

Блин, можно проще:
window.onload = function() {
	
			function addF(n) {
				return function() {
					document.getElementById('rezultat').innerHTML = +document.getElementById('rezultat').innerHTML + n;
				}
			}
			document.getElementById('c10').onclick = addF(100);
			document.getElementById('c20').onclick = addF(200);
			document.getElementById('c30').onclick = addF(300);
		}

DynkanMaclaud 10.01.2016 19:29

да ну на каждый инпут вешать событие... неблагородное дело...https://jsfiddle.net/b3t7vykt/2/


Часовой пояс GMT +3, время: 09:32.