Калькулятор стоимости
Добрый день !
Вообщем такая проблема.Недавно начал учить потихоньку js Вопрос такой как сделать что-бы в Result выводилась та переменная на которую я нажму на сайте
function calc () {
var moneyR1 = document.getElementById('moneyR1').value;
var moneyR2 = document.getElementById('moneyR1').value;
var Result = document.getElementById('Result').innerHTML = moneyR1 && moneyR2;
}
calc()
|
Цитата:
function click () {
document.getElementById('Result').innerHTML = this.value;
}
|
Можно пожалуйста чуть подробней
|
-=Женька=-,
где код? |
/*Общая сумма*/
function click () {
document.getElementById('Result').innerHTML = this.value;
}
click()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Амата Новый стиль</title>
<link rel="stylesheet" href="main.css">
<!-- jQuery library (served from Google) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="js/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="css/jquery.bxslider.css" rel="stylesheet" />
</head>
<body>
<script>
$(document).ready(function(){
$('.bxslider').bxSlider({ pagerCustom: '#bx-pager'});
});
</script>
<div id="main">
<div class="image-doors" style="float:left">
<ul class="bxslider">
<li><img src="img/ash-doors+r1.jpg" /></li>
<li><img src="img/Gold-alder+r1.jpg" /></li>
<li><img src="img/wenge-doors+r1.jpg" /></li>
<li><img src="img/chestnut-doors+r1.jpg" /></li>
</ul></div>
<div class="option">
<form>
<div id="bx-pager"><br>
<ul class="colors">
<li id="moneyR1" value="1599"><div><a href="" data-slide-index="0" title="Ясень R1">
<img src="img/ash.png" alt="Ясень" width="63" height="63"><br>Ясень R1</a></div></li>
<li id="moneyR2" value="15959" onclick="click()"><div><a href="" data-slide-index="1" title="Золотая ольха"><img src="img/Gold-alder.png" alt="Золотая ольха" width="63" height="63"><br>Золотая ольха R1</a></div></li>
<li><div><a href="" data-slide-index="2" title="Венге"><img src="img/wenge.png" alt="Венге" width="63" height="63"><br>Венге R1</a></div></li>
<li><div><a href="" data-slide-index="3" title="Каштан"><img src="img/chestnut.png" alt="Каштан" width="63" height="63"><br>Каштан R1</a></div></li>
</ul>
<fieldset>
<legend>Размеры двери</legend>
<table>
<td>
<th><label>Высота</label></th>
<th>
2000 мм
</th>
</td>
<td>
<th><label>Ширина</label></th>
<th>
<select>
<option>600 мм</option>
<option>700 мм</option>
<option>800 мм</option>
<option>900 мм</option>
</select>
</th>
</td>
</table>
</fieldset>
</form>
<div>
<p>Сумма : <b id="Result"></b><i> гривен</i></p>
</div>
</div>
</div>
</div>
<script src="js/calc.js"></script>
</body>
|
-=Женька=-,
изучите js и html у li нет value -- можно использовать атрибут data - смотрите строки 24 -28 и содержание тегов li
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Амата Новый стиль</title>
<link rel="stylesheet" href="main.css"><!-- jQuery library (served from Google) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="js/jquery.bxslider.min.js"></script><!-- bxSlider CSS file -->
<link href="css/jquery.bxslider.css" rel="stylesheet">
</head>
<body>
<script>
$(document).ready(function(){
//$('.bxslider').bxSlider({ pagerCustom: '#bx-pager'});
$('.colors li').click(function(event) {
event.stopPropagation();
event.preventDefault();
$('#Result').html($(this).data('value'))
})
});
</script>
<div id="main">
<div class="image-doors" style="float:left">
<ul class="bxslider">
<li><img src="img/ash-doors+r1.jpg"></li>
<li><img src="img/Gold-alder+r1.jpg"></li>
<li><img src="img/wenge-doors+r1.jpg"></li>
<li><img src="img/chestnut-doors+r1.jpg"></li>
</ul>
</div>
<div class="option">
<form>
<div id="bx-pager">
<br>
<ul class="colors">
<li data-value="1599">
<div>
<a href="" data-slide-index="0" title="Ясень R1"><img src="img/ash.png" alt=
"Ясень" width="63" height="63"><br>
Ясень R1</a>
</div>
</li>
<li data-value="15">
<div>
<a href="" data-slide-index="1" title="Золотая ольха"><img src=
"img/Gold-alder.png" alt="Золотая ольха" width="63" height="63"><br>
Золотая ольха R1</a>
</div>
</li>
<li data-value="159">
<div>
<a href="" data-slide-index="2" title="Венге"><img src="img/wenge.png" alt=
"Венге" width="63" height="63"><br>
Венге R1</a>
</div>
</li>
<li data-value="59">
<div>
<a href="" data-slide-index="3" title="Каштан"><img src="img/chestnut.png"
alt="Каштан" width="63" height="63"><br>
Каштан R1</a>
</div>
</li>
</ul>
<fieldset>
<legend>Размеры двери</legend>
<table>
<tr>
<td></td>
<th><label>Высота</label></th>
<th>2000 мм</th>
<td></td>
<th><label>Ширина</label></th>
<th><select>
<option value="600">
600 мм
</option>
<option value="700">
700 мм
</option>
<option value="800">
800 мм
</option>
<option value="900">
900 мм
</option>
</select></th>
</tr>
</table>
</fieldset>
</div>
</form>
<div>
<p>Сумма : <strong id="Result"></strong> <em>гривен</em></p>
</div>
</div>
</div>
</body>
</html>
|
| Часовой пояс GMT +3, время: 14:41. |