Как можно реализовать такой js-скрипт?

Question

[HankeTM]

Добрый день!

Я начал, но никак не могу догнать, как допилить скрипт, так как я совсем еще новичок... https://jsfiddle.net/47a1f16u/

Надо, чтобы число из input умножалось на число из последнего столбца, но загвоздка в том, что если посмотреть на первые 3 столбца, то от этих значений зависят значения в последнем столбце (значения естественно все статические).

И вот я не могу врубить, в силу своей "зелёности", как сделать так, чтобы число введенное в input умножалось на нужное, так как диаметр, толщина и длина различаются. Нужно вставлять еще input, чтобы уточнить к какому типу относится тело? Если так, то как тогда в одной кнопке "Рассчитать" совместить несколько индентификаторов?

Надеюсь, я объяснил доходчиво... В голове просто каша)
Заранее благодарен!

Answer 1

[RoverWhite]

https://jsfiddle.net/47a1f16u/8/

Ошибки которые были:
1. Пытаемся вставить текст в edit type=number
2. Пытаемся присвоить значение в edit через свойство innerHTML вместо value
3. Пытаемся parseFloat для числа у которого вместо точки запятая для отделения дробной части
4. функция calc не в глобальной области видимости, требуется другое объявления иначе ее не видит кнопка

Comments

[HankeTM]

Спасибо за ошибки! Учту!

Но ваш скрипт берет одно значение из id=V110, тем самым, если будет другой тип трубы расчет будет не верен.

Процитирую мой комментарий к посту выше: "Представьте, что вы пользователь и вам нужно посчитать полный объем труб. Есть таблица, в которой в последнем столбце есть объем одной трубы. Если человеку нужна труба, например, 110 диаметра (первый столбец); с толщиной стенки: 3,2 (второй столбец) и длиной в 560 мм(третий столбец), то тогда скрипт смотрит значение последнего столбца и умножает это значение на введенное количество труб в input и выводит все в div. Походу придется добавлять select для выбора вот этих трех измерений. Но тогда вопрос, как сделать так, чтобы select и input обрабатывались onclick'ом ведь один и тот же идентификатор тут не сделаешь?"

[RoverWhite]

Тут вопрос в том, что Вы хотите посчитать, если Вы хотите посчитать объем одной конкретной трубы, или Вы хотите посчитать объем всех труб, если каждую из них взять с указанным количеством? Или Вы хотите для каждого типа трубы указать количество и посчитать объем по этой позиции и в конце общий объем?

[RoverWhite]

Если объем одной конкретной трубы, и только одной, но любой из списка, тогда я бы добавил в таблицу RADIOBUTTON для выбора этой позиции, и уже от выбора брал бы параметры трубы.
Если нескольких труб но все взять в одном и том же кол-ве, то добавил бы колонку с CheckBox в таблицу чтобы выбрать нужные трубы и затем уже считал бы по отмеченным.
Если отдельные трубы и каждую в своем кол-ве, то добавил бы 3 колонки, checkbox и numberedit, и колонку для результата расчета, просчитал бы объемы по отмеченным трубам и вывел результат в колонку с объемом, а затем внизу итоговый объем.

А ваша задача сформулирована нечетко и непонятно что Вы хотите сделать. В рамках постановки задачи, я ответ Вам дал Выше.

[HankeTM]

Объем конкретной трубы и так написан в последнем столбце таблицы, мне нужно "для каждого типа трубы указать количество и посчитать общий объем по этой позиции". То есть какой тип трубы пользователь выберет - оттуда значение объема одной трубы брать и умножать на количество, введенное пользователем в input.

[RoverWhite]

Ну тогда Вам нужно вот это решение
Если отдельные трубы и каждую в своем кол-ве, то добавил бы 3 колонки, checkbox и numberedit, и колонку для результата расчета, просчитал бы объемы по отмеченным трубам и вывел результат в колонку с объемом, а затем внизу итоговый объем.
Еще могу порекомендовать использовать JQuery, будет проще намного Вам чем с голым Яваскриптом.
Естественно что за Вас переверстывать Весь Ваш пример и переделывать код я не буду.
Делайте сами, если возникнут ошибки, или вопросы, спрашивайте в комментариях, помогу.

[HankeTM]

Скажите, а что если checkbox'ы не делать, а сделать у каждого типа товара input, и просто где нужно вписать количество и считать, где не нужно оставить поле пустым и естественно учитываться эти поля не должны.
Будет ли так работать? Без чекбоксов? Они тут в принципе только для красоты...

И я не понимаю, как можно вывести итоговый объем по клику на кнопку? Один id я еще смогу вывести через onclick, а как сделать это с несколькими элементами?

JQuery... Мне бы сначала хоть что-то в JavaScript голом понимать...)

Спасибо за отзывчивость!

Переверстывать и переписывать не нужно, мне тут важнее даже самому понять, это будет так называемым "пинком" к чему-то большему...

[RoverWhite]

1. Можно без checkbox просто input и если там значение больше 0 после parseInt то считать строку отмеченной.
2. ID не нужны, просто ищем все поля INPUT, проверяем значения, затем от INPUT со значением переходим к родительскому элементу (это будет TD) затем от него к его родителю (будет TR) затем внутри этого TR берем по порядку определенный TD дочерний это будет ячейка с объемом, затем берем объем и считаем сумму, находим TD в который надо ее поместить по этой строке и туда пихаем полученную сумму, по всем input у которых значение меньше 0 эту сумму обнуляем, паралельно считаем общую итоговую сумму складывая итоги по строкам. А затем выводим общий итог внизу в каком-нибудь элементе.

[HankeTM]

Алгоритм улавливаю, но реализовать пока не могу, так как синтаксис плохо знаю... Если не сложно можете из 3 элементов накидать код, если это недолго, конечно... Например, 3 inputa в td в каждом есть какое-то введенное значение, и как это все вывести в общий итог?

Я вообще думал сначала сделать в каждой строчке кнопку "рассчитать", в по каждой строке выводить итог (т.е. надо было бы нажать пока каждой строчке "рассчитать") и только после того, как значение вывелось по каждой строке, нажать на кнопку "рассчитать итоговый объем", и только тогда значения из этих input'ов сложить между собой. Но это бред...

[RoverWhite]

Ок как будет время накидаю Вам пример, может сегодня завтра

[HankeTM]

Спасибо!

Answer 2

[GreatRash]

1) Про "из последнего столбца" понятно, а из какой строки то?
2) Если все значения статические, то какая разница чо там в других столбцах?
3) Айдишников, которые у вас в скрипте, я в html-коде не нашел.
4) Свойство value бывает только у элементов формы (input и textarea).

Comments

[HankeTM]

1) Из каждой строки последнего столбца.

2) Да, разницы нет, я попробую подробнее описать. Представьте, что вы пользователь и вам нужно посчитать полный объем труб. Есть таблица, в которой в последнем столбце есть объем одной трубы. Если человеку нужна труба, например, 110 диаметра (первый столбец); с толщиной стенки: 3,2 (второй столбец) и длиной в 560 мм(третий столбец), то тогда скрипт смотрит значение последнего столбца и умножает это значение на введенное количество труб в input и выводит все в div. Походу придется добавлять или для выбора вот этих трех измерений. Но тогда вопрос, как сделать так, чтобы теги и обрабатывались onclick'ом ведь один и тот же идентификатор тут не сделаешь?

3) Введите количество труб: //HTML

var kolvo = parseInt(document.getElementById("kolvo").value); //JS

Вот например, может вы не заметили, потому что переменная и id называются одинаково?

4) Да, но есть в коде, просто внутри .

[HankeTM]

Сайт режет теги, размещу еще раз:

2) Да, разницы нет, я попробую подробнее описать. Представьте, что вы пользователь и вам нужно посчитать полный объем труб. Есть таблица, в которой в последнем столбце есть объем одной трубы. Если человеку нужна труба, например, 110 диаметра (первый столбец); с толщиной стенки: 3,2 (второй столбец) и длиной в 560 мм(третий столбец), то тогда скрипт смотрит значение последнего столбца и умножает это значение на введенное количество труб в input и выводит все в div. Походу придется добавлять select для выбора вот этих трех измерений. Но тогда вопрос, как сделать так, чтобы select и input обрабатывались onclick'ом ведь один и тот же идентификатор тут не сделаешь?

Answer 3

[Sergei Nazarenko]

так ? codepen.io/nazares/pen/RooGMB

Comments

[HankeTM]

Нет, нет.

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

[Sergei Nazarenko]

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

[Sergei Nazarenko]

а так такие вещи правильнее делать с базами данных и php, python, ruby etc.