Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Формула на JS (https://javascript.ru/forum/misc/60105-formula-na-js.html)

Deymos 11.12.2015 12:34

Формула на JS
 
Здравствуйте!

Ребят, есть задача умножить формулу:

цена * длина * ширина

цена и длина известны изначально, а вот ширина разная. Помогите создать 3 кнопки с шириной 1м, 2м и 2.5м. Кликнув на кнопку получаем результат.

К примеру:
3 кнопки с шириной 1м, 2м и 2.5м
цена: 500
длина: 1.1

Помогите пожалуйста!

Mess4me 11.12.2015 14:06

Deymos,
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

<input type="number" id="width" value="1.1"/>
<input type="number" id="price" value="500"/>
<button id="len1" value="1">1m</button>
<button id="len2" value="2">2m</button>
<button id="len3" value="2.5">2,5m</button>
<hr/>
<span id="result">0</span>

<script>
    var result = document.getElementById('result');
    var width = document.getElementById('width');
    var price = document.getElementById('price');
    document.body.onclick = function (event) {
        var target = event.target;
        if(!target.id.match(/len[123]/ig)) return;
        result.innerHTML = target.value*price.value*width.value;
    }

</script>

</body>
</html>

ruslan_mart 11.12.2015 20:27

Mess4me, не стоит использовать регулярки там, где они не нужны, тем более с модификаторами, которые тут тоже ни к чему. :) Может имеет смысл проверять на target.tagName == 'BUTTON'? Ну или как минимум target.indexOf('len').

И совет, в условиях на регулярках лучше использовать метод test.


<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

<input type="number" id="width" value="1.1"/>
<input type="number" id="price" value="500"/>
<button name="len" value="1">1m</button>
<button name="len" value="2">2m</button>
<button name="len" value="2.5">2,5m</button>
<hr/>
<span id="result">0</span>

<script>
!function() {
    var result = document.getElementById('result'),
        width = document.getElementById('width'),
        price = document.getElementById('price');
    document.body.onclick = function(event) {
        var target = event.target;
        if(target.name == 'len') {
            result.innerHTML = target.value * price.value * width.value;
        }
    }
}();
</script>

</body>
</html>

Mess4me 11.12.2015 20:34

Ruslan_xDD,
учёл ,спасибо )

Deymos 14.12.2015 09:37

Ребят спасибо огромное! Работает! Всем клацнул по спасибо!
Подскажите, у меня на странице есть два элемента с id=price, как из них мне выбрать второй?

Заранее спасибо!

ruslan_mart 14.12.2015 09:42

Deymos, id уникален, он должен быть один. Лучше сменить на name:

var price = document.getElementsByName('price');

price[0].value = 123;
price[1].value = 456;

Deymos 14.12.2015 09:44

Цитата:

Сообщение от Ruslan_xDD (Сообщение 399871)
Deymos, id уникален, он должен быть один. Лучше сменить на name:

var price = document.getElementsByName('price');

price[0].value = 123;
price[1].value = 456;

сменю на name,но у меня эти значения генерируются автоматически, соответственно и взять нужно автоматически второй... Помогите пожалуйста :help: и получить из него значение (из второго)

Deymos 14.12.2015 09:57

Вот такие дивы

<div itemprop="offers" itemscope="" itemtype="http://schema.org/Offer">
<input type="number" id="price" value="185.13" style="display: none;"></p>
</div>

<div class="single_variation">
<span class="price">
<span class="amount">212.41&nbsp;руб.</span>
<input type="number" id="price" value="212.41" style="display: none;"></span>
</div>

рони 14.12.2015 10:02

Deymos,
price = document.querySelectorAll('#price')[1];


лучше изучить вашу cms чем придумывать как обойти правило.

Deymos 14.12.2015 10:08

Цитата:

Сообщение от рони (Сообщение 399876)
Deymos,
price = document.querySelectorAll('#price')[1];


лучше изучить вашу cms чем придумывать как обойти правило.

странно, но ваше условие не работет, использую так:

<script>
    var result = document.getElementById('result');
    var width = document.getElementById('width');
    var price = document.getElementById('price');
price = document.querySelectorAll('#price')[1];
    document.body.onclick = function (event) {
        var target = event.target;
        if(!target.id.match(/len[123]/ig)) return;
        result.innerHTML = target.value*price.value*width.value;
    }

</script>


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