Форум

Deymos · #1 (**permalink**) 11.12.2015, 12:34

Здравствуйте!

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

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

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

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

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

Mess4me · #2 (**permalink**) 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 · #3 (**permalink**) 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 · #4 (**permalink**) 11.12.2015, 20:34

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

Deymos · #5 (**permalink**) 14.12.2015, 09:37

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

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

ruslan_mart · #6 (**permalink**) 14.12.2015, 09:42

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

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

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

Deymos · #7 (**permalink**) 14.12.2015, 09:44

Сообщение от Ruslan_xDD

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

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

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

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

и получить из него значение (из второго)

Deymos · #8 (**permalink**) 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>

рони · #9 (**permalink**) 14.12.2015, 10:02

Deymos,

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

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

Deymos · #10 (**permalink**) 14.12.2015, 10:08

Сообщение от рони

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>

Форум

Справочник

Discord чат

Курсы javascript