Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
Карта форума Темы раздела Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.78/9: Рейтинг темы: голосов - 9, средняя оценка - 4.78
1 / 1 / 1
Регистрация: 20.04.2017
Сообщений: 267
1

сложение и умножение в javascript

07.05.2019, 14:07. Показов 1870. Ответов 19

Author24 — интернет-сервис помощи студентам
ребят не сильно дружу с js нужна помощь. есть кнопка при нажатии на которую создается строка в которой есть 2 ячейки с уникальным id таких строк может быть сколько угодно.нужно 1 ячейку умножить на вторую и проделать это со всеми другими созданными строками и ячейками. затем сумму каждой строки сложить и вывести полученный ответ. на скриншоте видно ячейки которые надо умножить и сложить.
1)1000*3=3000
2)5000*7=35000
3)12000*5=60000
3000+35000+60000=98000(это число мне нужно будет затем вывести уже в отдельную ячейку)
так создаю и вывожу данные в ячейки
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
String.prototype.format = function () {
  var i = 0, args = arguments;
  return this.replace(/{}/g, function () {
    return typeof args[i] != 'undefined' ? args[i++] : '';
  });
};
 
var i = 0;
document.getElementById("addRow").onclick = function() {
    var row = document.createElement("tr");
    row.innerHTML = '<table><tr><td valign=""><SELECT name="SelectMyLove" id="SelectMyLove{}" onChange="Add_option_to_select();">{% for wardrobes in wardrobes %}<option value="" size="1">{{wardrobes.title}}</option>{%endfor%}</SELECT></td><td valign=""><input type="text" id="resort{}" class="block" size="3">.руб</input></td><td><input type="text" id="resort1{}" size="3">кол/м</input></td></tr><td><button class="btn btn-success" onclick="deleteRow(this);">Удалить</button></td></table>'.format(i,i,i);
   
    document.getElementById("node").appendChild(row);
    i = i + 1;
};
var j =0;
var v = "{% for wardrobes in wardrobes %}{{wardrobes.price}},{%endfor%}";
var a = "{% for wardrobes in wardrobes %}{{wardrobes.quantity_or_meter}},{%endfor%}";
v = v.slice(0, -1)
a = a.slice(0, -1)
v = v.split(',');
a = a.split(',');
function Add_option_to_select()
{
   var CountryObj = document.getElementById("SelectMyLove{}".format(j));
   var ResortObj = document.getElementById("resort{}".format(j));
   var selind = CountryObj.options.selectedIndex;
   console.log(v)
    ResortObj.value = v[selind];
    console.log(j);
 
   var CountryObj1 = document.getElementById("SelectMyLove{}".format(j));
   var ResortObj1 = document.getElementById("resort1{}".format(j));
   var selind1 = CountryObj1.options.selectedIndex;
   console.log(a)
    ResortObj1.value = a[selind1];
    j = j +1;
};
вот отрендеренный хтмл таблицы
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<table id="node" border="1" class="table-bordered table-dark">
      <tbody><tr>
    </tr><tr>
      <th class="table-dark">Наименование</th>
      <th class="table-dark">Цена</th>
      <th class="table-dark">Количество</th>
      <th class="table-dark"></th>
    </tr>
</tbody>
<tr>
<td valign="">
    <select name="SelectMyLove" id="SelectMyLove0" onchange="Add_option_to_select();">
      <option value="" size="1">Шкаф</option><option value="" size="1">Кол-во напольных Шкафов 42U телеком, шт.</option> 
      <option value="" size="1">Кол-во СТОЕК 42U телеком, шт.</option>
      <option value="" size="1">Кол-во настенных Шкафов, шт.</option>
   </select>
</td>
    <td valign=""><input type="text" id="resort0" class="block" size="3">.руб</td>
    <td><input type="text" id="resort10" size="3">кол/м</td>
    <td><button class="btn btn-success" onclick="deleteRow(this);">Удалить</button></td>
</tr>
<tr>
<td valign="">
    <select name="SelectMyLove" id="SelectMyLove1" onchange="Add_option_to_select();">
      <option value="" size="1">Шкаф</option><option value="" size="1">Кол-во напольных Шкафов 42U телеком, шт.</option> 
      <option value="" size="1">Кол-во СТОЕК 42U телеком, шт.</option>
      <option value="" size="1">Кол-во настенных Шкафов, шт.</option>
    </select>
</td>
      <td valign=""><input type="text" id="resort1" class="block" size="3">.руб</td>
       <td><input type="text" id="resort11" size="3">кол/м</td>
       <td><button class="btn btn-success" onclick="deleteRow(this);">Удалить</button></td>
</tr>
<tr>
<td valign="">
     <select name="SelectMyLove" id="SelectMyLove2" onchange="Add_option_to_select();">
       <option value="" size="1">Шкаф</option><option value="" size="1">Кол-во напольных Шкафов 42U телеком, шт.</option> 
       <option value="" size="1">Кол-во СТОЕК 42U телеком, шт.</option>
       <option value="" size="1">Кол-во настенных Шкафов, шт.</option>
      </select>
</td>
<td valign=""><input type="text" id="resort2" class="block" size="3">.руб</td><td>
<input type="text" id="resort12" size="3">кол/м</td>
<td><button class="btn btn-success" onclick="deleteRow(this);">Удалить</button></td>
</tr>
</table>
Миниатюры
сложение и умножение в javascript  
0
Лучшие ответы (1)
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
07.05.2019, 14:07
Ответы с готовыми решениями:

Вычисление введенных значений сложение/умножение
Приветствую Форумчан, Помогите пожалуйста довести скрипт до ума. Необходимо что бы при вводе...

Умножение в JavaScript и знаки после запятой.
В качестве отступления еще один вопрос. Почему в нижеприведенном скрипте: &lt;script...

Сложение не работает, а умножение - работает
Здраствуйте, расскажу по порядку. У меня есть страница сайта, на которой при выборе какого то...

Умножение сложение? )
Почему арифметическое действие не верно? Ответ уж очень смущает. должен быть = 21.000 var asd =...

19
186 / 107 / 43
Регистрация: 02.05.2019
Сообщений: 168
07.05.2019, 15:10 2
Javascript
1
2
3
let trs = document.querySelectorAll("tbody tr");
let sum = 0
trs.forEach(tr=>{ let inputs = tr.querySelectorAll("td > input"); sum = sum + inputs[0].value * inputs[1].value;});
0
1 / 1 / 1
Регистрация: 20.04.2017
Сообщений: 267
13.05.2019, 07:11  [ТС] 3
Цитата Сообщение от Devmastery Посмотреть сообщение
let trs = document.querySelectorAll("tbody tr");
let sum = 0
trs.forEach(tr=>{ let inputs = tr.querySelectorAll("td > input"); sum = sum + inputs[0].value * inputs[1].value;});
можешь подсказать куда это прописывается.
0
186 / 107 / 43
Регистрация: 02.05.2019
Сообщений: 168
13.05.2019, 09:51 4
Lastik228,
Прямо на страницу в script или подключать в отдельном файле, все как обычно. Ну и это просто код, его надо прицепить к обработчику событий, например, к кнопке.
0
1 / 1 / 1
Регистрация: 20.04.2017
Сообщений: 267
13.05.2019, 09:57  [ТС] 5
Цитата Сообщение от Devmastery Посмотреть сообщение
к кнопке
a id у него получается sum?
HTML5
1
      <th class="bg-success"><div contenteditable id='sum1'></div></th>
вот кнопка полная
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
function addition() {
 
  //эконом вариант
      let eco = document.querySelectorAll('.etceco');
      let econom1= 0;
      eco.forEach(q =>{q = parseInt(q.value);econom1 = !isNaN(q) ? econom1 + q * 5 : econom1;})
      
 // конец эконом вариант
//оптима вариант
let opt = document.querySelectorAll('.etcopt');
      let opt1= 0;
      opt.forEach(q =>{q = parseInt(q.value);opt1 = !isNaN(q) ? opt1 + q * 10 : opt1;})
 
//конец оптима вариант
//премиум вариант
let prim = document.querySelectorAll('.etcprim');
      let prim1= 0;
      prim.forEach(q =>{q = parseInt(q.value);prim1 = !isNaN(q) ? prim1 + (q * 10) : prim1;})
       //конец премиум вариант
//лофт вариант 
let loft = document.querySelectorAll('.etcloft');
      let loft1= 0;
      loft.forEach(q =>{q = parseInt(q.value);loft1 = !isNaN(q) ? loft1 + (q * 15) : loft1;})
//конец лофт вариант
 
//оборудование
 
//конец оборудования
      var a = document.getElementById('a').innerHTML;
      var b = document.getElementById('b').innerHTML;
      var odintri = document.getElementById('odintri').innerHTML;
      b = Number(b);
      a = Number(a);
      console.log(a,b);
      if (isNaN(a)==true) a=0;
      if (isNaN(b)==true) b=0;
 
      var c = a + b;
      var c = c / 2;
      document.getElementById('result').innerHTML = c;
 
      let blocks = document.querySelectorAll('.block');
      let sum = 0;
      blocks.forEach(b =>{b = parseInt(b.value);sum = !isNaN(b) ? sum + b : sum;})
      var q = (sum + econom1)*odintri;
      document.getElementById('econom').innerHTML = q;
      document.getElementById('opt').innerHTML = opt1;
      document.getElementById('prim').innerHTML = prim1;
      document.getElementById('loft').innerHTML = loft1;
 
let trs = document.querySelectorAll("tbody tr");
let sum1 = 0
trs.forEach(tr=>{ let inputs = tr.querySelectorAll("td > input"); sum1 = sum1 + inputs[0].value * inputs[1].value;});
 
    }
0
186 / 107 / 43
Регистрация: 02.05.2019
Сообщений: 168
13.05.2019, 10:07 6
HTML5
1
2
<th class="bg-success"><div contenteditable id='sum1'></div></th>
<button id="sum-btn">Buttton</button>
Javascript
1
2
3
4
5
6
document.getElementById("sum-btn").addEventListener("click", function(){
    let trs = document.querySelectorAll("tbody tr");
    let sum = 0
    trs.forEach(tr=>{ let inputs = tr.querySelectorAll("td > input"); sum = sum + inputs[0].value * inputs[1].value;});
    document.getElementById("sum1").innerText = sum;
});
0
1 / 1 / 1
Регистрация: 20.04.2017
Сообщений: 267
13.05.2019, 10:17  [ТС] 7
Цитата Сообщение от Devmastery Посмотреть сообщение
trs.forEach(tr=>{ let inputs = tr.querySelectorAll("td > input"); sum = sum + inputs[0].value * inputs[1].value;});
ругается на данную строку
Миниатюры
сложение и умножение в javascript   сложение и умножение в javascript  
0
186 / 107 / 43
Регистрация: 02.05.2019
Сообщений: 168
13.05.2019, 10:39 8
Lastik228,

Поправил

Javascript
1
2
3
4
5
6
document.getElementById("sum-btn").addEventListener("click", function(){
    let trs = document.querySelectorAll("tbody tr");
    let sum = 0
    trs.forEach(tr=>{ let inputs = tr.querySelectorAll("td > input"); if (inputs.length) sum = sum + inputs[0].value * inputs[1].value;});
    document.getElementById("sum1").innerText = sum;
});
0
1 / 1 / 1
Регистрация: 20.04.2017
Сообщений: 267
13.05.2019, 10:51  [ТС] 9
Цитата Сообщение от Devmastery Посмотреть сообщение
Поправил
он в пункт "Стоимость, руб" выводит 0 при нажатии на кнопку
Миниатюры
сложение и умножение в javascript  
0
1 / 1 / 1
Регистрация: 20.04.2017
Сообщений: 267
13.05.2019, 12:04  [ТС] 10
Devmastery, ответь пожалуйста
0
186 / 107 / 43
Регистрация: 02.05.2019
Сообщений: 168
13.05.2019, 12:26 11
Lastik228,

Я не знаю, почему у вас это не работает.
Посмотрите на код. Исходя из вашей HTML разметки, код берет все тэги TR в TBODY, затем ищет в них INPUT. Затем перемножает в цикле перебора TR значения первого и второго INPUT. И складывает их. Попробуйте вывести в консоль, находит ли нужные узлы DOM.

Вы можете прописать классы ко всем строчкам и INPUTам, тогда будет проще.
0
1 / 1 / 1
Регистрация: 20.04.2017
Сообщений: 267
13.05.2019, 12:46  [ТС] 12
Цитата Сообщение от Devmastery Посмотреть сообщение
Я не знаю, почему у вас это не работает.
я так понимаю система выводит не числа а строку по этому и не идет счет. или я не прав?
Javascript
1
2
3
    console.log(resort0)
    console.log(resort10)
    console.log(sum)
Миниатюры
сложение и умножение в javascript  
0
186 / 107 / 43
Регистрация: 02.05.2019
Сообщений: 168
13.05.2019, 12:53 13
Lastik228,
Цитата Сообщение от Lastik228 Посмотреть сообщение
я так понимаю система выводит не числа а строку по этому и не идет счет. или я не прав?
Это совсем не при чем, так как берется не сама строка, а значения в полях INPUT

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
document.getElementById("sum-btn").addEventListener("click", function(){
    let trs = document.querySelectorAll("tbody tr");
    console.log(trs);
    let sum = 0
    trs.forEach(tr=>{ 
        let inputs = tr.querySelectorAll("td > input"); 
        console.log(inputs); 
        if (inputs.length) { 
            sum = sum + inputs[0].value * inputs[1].value; 
            console.log(inputs[0].value, inputs[1].value);
        }
    });
    document.getElementById("sum1").innerText = sum;
});
Посмотрите, что выведет.
0
1 / 1 / 1
Регистрация: 20.04.2017
Сообщений: 267
13.05.2019, 12:58  [ТС] 14
Цитата Сообщение от Devmastery Посмотреть сообщение
Посмотрите, что выведет.
что то очень не понятное
Миниатюры
сложение и умножение в javascript  
0
1 / 1 / 1
Регистрация: 20.04.2017
Сообщений: 267
13.05.2019, 12:59  [ТС] 15
console.log(trs);304 строка
console.log(inputs); 308 строка
0
186 / 107 / 43
Регистрация: 02.05.2019
Сообщений: 168
13.05.2019, 13:09 16
Lastik228,

Вы просто даете кусок кода, по нему и пишется скрипт.

Сделайте проще. Пропишите классы ко всем TR и INPUT, с которых нужны данные. Чтобы не вышло путаницы.

Например

HTML5
1
2
3
4
<tr class="sum-tr">
    <td><input class="sum-input"></td>
    <td><input class="sum-input"></td>
</tr>
Javascript
1
2
3
4
5
6
document.getElementById("sum-btn").addEventListener("click", function(){
    let trs = document.querySelectorAll(".sum-tr");
    let sum = 0
    trs.forEach(tr=>{ let inputs = tr.querySelectorAll(".sum-input"); if (inputs.length) sum = sum + inputs[0].value * inputs[1].value;});
    document.getElementById("sum1").innerText = sum;
});
0
1 / 1 / 1
Регистрация: 20.04.2017
Сообщений: 267
13.05.2019, 13:31  [ТС] 17
Цитата Сообщение от Devmastery Посмотреть сообщение
Например
решил кинуть твой код в отдельный html
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
<tr class="sum-tr">
    <td><input class="sum-input"></td>
    <td><input class="sum-input"></td>
    <th class="bg-success"><div contenteditable id='sum1'></div></th>
</tr>
<button id="sum-btn">Buttton</button>
      <script type="text/javascript">
document.getElementById("sum-btn").addEventListener("click", function(){
    let trs = document.querySelectorAll(".sum-tr");
    let sum = 0
    trs.forEach(tr=>{ let inputs = tr.querySelectorAll(".sum-input"); if (inputs.length) sum = sum + inputs[0].value * inputs[1].value;});
    document.getElementById("sum1").innerText = sum;
});
 </script>
</body>
</html>
Миниатюры
сложение и умножение в javascript  
0
186 / 107 / 43
Регистрация: 02.05.2019
Сообщений: 168
13.05.2019, 13:40 18
Lastik228,

А куда TR и TD потеряли?

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
    <table>
        <tbody>
            <tr class="sum-tr">
                <td><input class="sum-input"></td>
                <td><input class="sum-input"></td>
                <th class="bg-success"><div contenteditable id='sum1'></div></th>
            </tr>
        </tbody>
    </table>
 
<button id="sum-btn">Buttton</button>
      <script type="text/javascript">
document.getElementById("sum-btn").addEventListener("click", function(){
    let trs = document.querySelectorAll(".sum-tr");
    let sum = 0
    trs.forEach(tr=>{ let inputs = tr.querySelectorAll(".sum-input"); if (inputs.length) sum = sum + inputs[0].value * inputs[1].value;});
    document.getElementById("sum1").innerText = sum;
});
 </script>
</body>
</html>
Добавлено через 6 минут
Нужно рисовать всю таблицу, чтобы появились элементы ее.
0
1 / 1 / 1
Регистрация: 20.04.2017
Сообщений: 267
13.05.2019, 13:59  [ТС] 19
Цитата Сообщение от Devmastery Посмотреть сообщение
А куда TR и TD потеряли?
спасибо. отдельно все заработало а вот при создании таблицы не хочет, на скрине видно что он не хочет tr присваивать класс.
хотя в коде прописано
Javascript
1
row.innerHTML = '<table><tbody><td valign=""><SELECT name="SelectMyLove" id="SelectMyLove{}" onChange="Add_option_to_select();">{% for wardrobes in wardrobes %}<option value="" size="1">{{wardrobes.title}}</option>{%endfor%}</SELECT><tr class="sum-tr"><td><input type="text" class="sum-input" id="resort{}"  size="6"></td><td><input type="text" class="sum-input" id="resort1{}" size="8"></td></tr><td><button class="btn btn-success" onclick="deleteRow(this);">Удалить</button></td></tbody></table>'.format(i,i,i);
Миниатюры
сложение и умножение в javascript  
0
186 / 107 / 43
Регистрация: 02.05.2019
Сообщений: 168
13.05.2019, 15:29 20
Лучший ответ Сообщение было отмечено Lastik228 как решение

Решение

Lastik228,

У вас везде жуткая путаница.

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
row.innerHTML = `
    <tr>
        <td valign="123">
            <SELECT name="SelectMyLove" id="SelectMyLove{}" onChange="Add_option_to_select();">{% for wardrobes in wardrobes %}
                <option value="" size="1">{{wardrobes.title}}</option>{%endfor%}
            </SELECT>
        </td>
        <td valign=""><input type="text" class="sum-input" id="resort{}"  size="6"></td>
        <td><input type="text" class="sum-input" id="resort1{}" size="8"></td>
        <td><button class="btn btn-success" onclick="deleteRow(this);">Удалить</button></td>
    </tr>`.format(i,i,i);
 
    row.classList.add("sum-tr");
Таблица у вас сверстана криво

HTML5
1
2
3
4
5
6
7
8
9
10
11
<table id="node" border="1" class="table-bordered table-dark">
    <tbody>
        <tr></tr>
        <tr>
            <th class="table-dark">Наименование</th>
            <th class="table-dark">Цена</th>
            <th class="table-dark">Количество</th>
            <th class="table-dark"></th>
        </tr>
    </tbody>
</table>
Тут не tbody, а thead. А все остальное в tbody. И ряды присоединяйте не в #node, а в #node tbody
1
13.05.2019, 15:29
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
13.05.2019, 15:29
Помогаю со студенческими работами здесь

Умножение/сложение значений таблицы
Дана таблица размерностью 4 (строк)*k(столбцов). Не могли бы набросать алгоритм, который бы...

Задано 4 матрицы. Провести сложение, умножение, умножение на число
Задано 4 матрицы A,B,C,D размером 4х4.Вычеслить такие матрицы: F,G,T. G=3/4 A+B F=B*(2D) T=c/5

Умножение и сложение
Составить программу, которая печатает таблицу умножения и сложения натуральных чисел в десятичной...

Сложение и умножение
Добавить и умножить Описание Напишите функцию с кортежем аргументов переменной длины, который...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
20
Ответ Создать тему
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru