Форум

jackdempsey2015 · #11 (**permalink**) 14.07.2015, 21:46

kostyanet,
Во всяком случае, поудобней, чем в похапе или жабе. ООП в JS растет из смоллтока. Он заточен под модульность и масштабирование, только для этого его знать надо.

kostyanet · #12 (**permalink**) 14.07.2015, 22:41

Ну например надо добавить сумму после каждого инпута по keyup.

jackdempsey2015 · #13 (**permalink**) 14.07.2015, 23:25

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

Ну например надо добавить сумму после каждого инпута по keyup.

Ну, епт, я думал, ты о чем то глобальном, о проектировании, а твоя параша добавлением пары строк делается.

<html>
<head>
<meta charset="utf-8">
 <style>
   .goods{display: block}
 </style>
</head>
<span class="goods" price="10">введите количество товара<input><span class="out"></span><span>
<span class="goods" price="20">введите количество товара<input><span class="out"></span><span>
<span class="goods" price="30">введите количество товара<input><span class="out"></span><span>
<br> 
<button id="b">посчитать</button>
 
<div id="out"></div>
 
<script>
 
 
goods=[].map.call(document.querySelectorAll(".goods"), function(x){return x})
 
prices=goods.map(function(x){return +x.getAttribute("price")})
 
 
count=function(arr1, arr2){
 var arr=[]
 for(var i=0; i<arr1.length; i++) arr.push(arr1[i]*arr2[i])
 return arr.reduce(function(x, y){return x + y})
}

inputs=goods.map(function(x){return x.querySelector("input")})
outs=goods.map(function(x){return x.querySelector(".out")})
inputs.forEach(function(x, i){x.onkeyup=function(){outs[i].innerHTML=+this.value*prices[i]}})
 
b.onclick=function(){
 var numbers=inputs.map(function(x){return +x.value})
 out.innerHTML=count(numbers, prices)
}
 
 
 
 
</script>
</html>

Ты в следующий раз, когда че-нибудь критиковать начнешь, рожу попроще делай.

рони · #14 (**permalink**) 14.07.2015, 23:36

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
 <style>
 .goods{display:block}
 .goods *{margin:0 4px}
 #out{margin-left:13em}
 </style>
</head>
<span class="goods" data-price="10"><input><span></span></span>
<span class="goods" data-price="20"><input><span></span></span>
<span class="goods" data-price="30"><input><span></span></span>
<div id="out"></div>
<script>
var goods, fn = function() {
    out.innerHTML = goods.reduce(function(a, b) {
        return a + b()
    }, 0)
};
goods = [].map.call(document.querySelectorAll(".goods"), function(a) {
    var b = a.dataset.price,
        c = a.querySelector("input"),
        d = a.querySelector("span");
    a.insertBefore(document.createTextNode(b + " * "), c);
    a.insertBefore(document.createTextNode(" = "), d);
    c.oninput = fn;
    return function() {
        return d.innerHTML = b * c.value || 0
    }
});
</script>
</html>

kostyanet · #15 (**permalink**) 15.07.2015, 05:11

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

а твоя параша

Нет господин ламер, это ваша параша - два раза считать одно и тоже. Что и подразумевалось в вопросе.

Вы освоили технологию баден-баден очевидно сочтя что жиквери слишком унылое гэ для целей самовыражения. Ну то есть поняли что выпендриться с жикверей не получится, ибо тотально все ламеры освоили эту либу и ее культуру, которая и сквозит в ваших кодах. Не будут они работать.

Оно функциклирует в паре-тройке строк и для простой задачи. Когда задача начнет расти и эволюционировать, вы не по 22 раза будете все идентифицировать и считать, а по 22222 раза, ибо паттерн такой, ламеричный.

Еще был один подвох в задании про киап: если киап уже нашел ценник и проверил и посчитал, то за членом все остальное? Само собой ответ - не за членом: уже все посчитано.

Короче, предлагаю прекращать самовыражовываться. Или мы что, все еще недостаточно тупые и требуется друг друга еще и еще отуплять? Оставьте это занятие журналистам, они по долгу службы, за деньги этим занимаются. А мы друг друга должны из ж доставать, информировать и прояснять все. Иначе нам конец.

kostyanet · #16 (**permalink**) 15.07.2015, 05:33

Касательно калькуляторов всяких. Мы с жабой в браузере и с юзером, а значит мы делаем event driven приложение, а не нажал кнопку - собери грибочки.

Что такое event driven - это значит любые действия юзера используются. Тыкнул юзер в чек-бокс - какое-то число запислось куда надо. Тыкнул еще раз - другое. Нажал кнопку на клаве - по той же схеме. Все довольно просто, за исключением природной угребищности хтмльных controls, а сооружать свои на том же глюкавом html и css обозначает экспоненциальный рост геморроя.

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

Во-первых цена в интерфейсе это рендер числа, которое должно храниться отдельно, как число. Вы легко побежали считать эту цену, потому что ТС ее нарисовал как число, а в реальности это может быть слово: 124 руб 30 коп. Заказчик постановит и все. Конеш, знатоки рег поскачут парсить текст, а чо такова... Грамотные же люди выведут в хтмл цену как число для скрипта, и цену в заказанном формате для юзера. Даже если оно сейчас совпадает - вообще не факт что в будущем так и останется. Это надо понимать.

Значит все что касается оформления нас не касается, а ценник прописан прямо в input'е, в любом атрибуте типа data-p, или просто p="132.45"

<input type=number min=1 max=1000 step=1 value="" p="132.45">

Контроль за действиями юзера ведется через события падающие с контролсов на форму

<form id='calc'>
<input type=number min=1 max=1000 step=1 value="" p="132.45">

Теперь пишем контроллер для document.getElementById('calc').

kostyanet · #17 (**permalink**) 15.07.2015, 05:51

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

document.querySelectorAll

Вы же видели что ТС не знает какой у него будет калькулятор, он собственно и пришел сюда за помощью с проектировании калькулятора. А вы зацепились за какой-то бредовый хтмл и на пару уже наворотили нелепых кодов, типа, на, чувачок, хавай готовенькое.

При чем тут текст в цитате? При том что нет контроля за общей картиной. Например при достижении суммы заказа в Х включается скидки в Игрек.

Вопрос: в каком месте последовательной обработки вы посчитаете, сравните, вычислите и примените скидку?

То есть такого места сейчас нет, его надо будет расчищать особо, и довольно заборов которые вы городите поломать.

Самое прикольное что вроде бы те же люди не забывают рассказывать о пресловутом делегировании при случае.

kostyanet · #18 (**permalink**) 15.07.2015, 05:54

Короче, так не делается, а если так делается то называется оно - колхоз. Чтобы сделать индустриальное расширяемое приложение, надо вспоминать как устроено нормальное программирование.

blogivan · #19 (**permalink**) 15.07.2015, 12:59

Пришёл к следующему:

<html>
<head>
<style>
table{
background: #FFF7BF;
border-spacing: 0px;
border: 1px solid #f00;
}

table td{
padding: 10px;
border: 1px solid #f00;
}
</style>
</head>
<body>
<table>

<tr>
<td>Наименование работ</td>
<td>Цена за кг.</td>
<td>Колличество кг.</td>
<td>Сумма</td>
</tr>

<tr>
<script>
function ChangeOnFly()
{
var kg = document.getElementById('input_kg').value;

var tarif = document.getElementById('tarif_obl').value;

document.getElementById('dostavka').firstChild.nod eValue = kg*tarif;
}
</script>
<td>Картофель</td>
<td>50<input type="hidden" id="tarif_obl" value="50"></td>
<td><input id="input_kg" type="text" onFocus="this.select();" onKeyUp="ChangeOnFly();" name=kg></td>
<td><span id="dostavka">0</span></td>
</tr>

</table>
</body>
</html>

Теперь собственно сам вопрос. Нужно сделать много полей с разными овощами. Не могу врубиться каким образом ( Кто чем может

salexseen · #20 (**permalink**) 19.07.2015, 23:15

Можно сделать так.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            table{
                background: #FFF7BF;
                border-spacing: 0px;
                border: 1px solid #f00;
            }

            table td, table th{
                padding: 10px;
                border: 1px solid #f00;
            }
        </style>
    </head>
    <body>
        <form action="/" method="post">
            <table id="myTable"></table>
        </form>
        <div>Итого <span id="total">0</span></div>
        <script>

            (function(){

                var addEvent = function(el, type, callback){
                    if (document.addEventListener){
                        el.addEventListener(type, callback, false);
                    } else if (document.attachEvent){
                        el.attachEvent('on' + type, function(event){
                            callback.call(el, event);
                        })
                    }
                };

                var data = [{
                    name: 'Картофель',
                    key: 'potato',
                    price: 50
                },{
                    name: 'Капуста',
                    key: 'cabbage',
                    price: 150
                },{
                    name: 'Лук',
                    key: 'bow',
                    price: 350
                },{
                    name: 'Морковь',
                    key: 'carrot',
                    price: 30
                },{
                    name: 'Свекла',
                    key: 'beet',
                    price: 92
                },{
                    name: 'Редька',
                    key: 'radish',
                    price: 20
                },{
                    name: 'Редис',
                    key: 'radishes',
                    price: 120
                }];


                var table = document.getElementById('myTable');
                var totalElement = document.getElementById('total');

                var html = [], item, total = 0;

                html.push('<tr>');
                html.push('<th>Наименование работ</th>');
                html.push('<th>Цена за кг.</th>');
                html.push('<th>Колличество кг.</th>');
                html.push('<th>Сумма</th>');
                html.push('</tr>');

                for (var i = 0, len = data.length; i < len; i+=1){
                    item = data[i];
                    html.push('<tr>');
                    html.push('<td>'+ item.name +'</td>');
                    html.push('<td>'+ item.price +'</td>');
                    html.push('<td><input data-key="'+ item.key +'" data-price="'+ item.price +'" type="text" name="count_'+ item.key +'" value="0"></td>');
                    html.push('<td><span id="count_'+ item.key +'">0</span><input data-total="1" type="hidden" id="'+ item.key +'" name="price_'+ item.key +'"></td>');
                    html.push('</tr>');
                }

                table.innerHTML = html.join('');

                var inTotal = function(){
                    var number = 0;
                    var total = Array.prototype.slice.call(table.getElementsByTagName('input'));
                    var item, price, value;

                    for (var i = 0, len = total.length; i < len; i+=1){
                        item = total[i];
                        price = +item.getAttribute('data-total');
                        if (price){
                            value = +item.value;
                            number += value;
                        }
                    }

                    return number;
                };

                var inputEvent = function(e){
                    var target = e.target || e.srcElement;
                    if (target.tagName.toLowerCase() === 'input'){
                        var name = target.getAttribute('name');
                        var key = target.getAttribute('data-key');
                        var price = +target.getAttribute('data-price');
                        var value = +target.value;
                        var result = price * value;
                        var summa = document.getElementById(name);
                        var hiddenInput = document.getElementById(key);

                        summa.innerHTML = result;
                        hiddenInput.value = result;

                        totalElement.innerHTML = inTotal();
                    }
                };

                addEvent(table, 'change', inputEvent);
                addEvent(table, 'keyup', inputEvent);

            })();

        </script>
    </body>
</html>

Форум

Справочник

Discord чат

Курсы javascript