Умножение матриц

@klimkin3teers · Регистрация: 23.03.2016

Здравствуйте, пишу на html "программу" которая будет умножать матрицы. У меня не получается вывести ответ, при нажатии на submit страница просто обновляется и поля, в которые вбивал значения, обнуляются. Из того что нагуглил, сделал чтобы кнопка запускала скрипт для умножения элементов матрицы и выводила результат в отдельный <input type="text">, ну по крайней мере по моей задумке все должно было работать именно так. Вот код, я пока сделал перемножение только двух элементов, все равно это не суть важно, пока ничего не работает) А как поможете разобраться в чем дело, то и вся проблема будет решена)

HTML5

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-9">
<title>Калькулятор матриц</title>
<script>
function ymn(){
var str=document.getElementById("a11").value*document.getElementById("b11").value;
document.getElementById("c").value=str.value;}</script>
</head>
<body>
<form>
<h1>A</h1>
<table>
<tr>
<td><input type="number" id="a11" value=""></td>
<td><input type="number" id="a12" value=""></td>
<td><input type="number" id="a13" value=""></td></tr>
<tr>
<td><input type="number" id="a21" value=""></td>
<td><input type="number" id="a22" value=""></td>
<td><input type="number" id="a23" value=""></td></tr>
<tr>
<td><input type="number" id="a31" value=""></td>
<td><input type="number" id="a32" value=""></td>
<td><input type="number" id="a33" value=""></td></tr><table>
<h1>B</h1>
<table>
<tr>
<td><input type="number" id="b11" value=""></td>
<td><input type="number" id="b12" value=""></td>
<td><input type="number" id="b13" value=""></td></tr>
<tr>
<td><input type="number" id="b21" value=""></td>
<td><input type="number" id="b22" value=""></td>
<td><input type="number" id="b23" value=""></td></tr>
<tr>
<td><input type="number" id="b31" value=""></td>
<td><input type="number" id="b32" value=""></td>
<td><input type="number" id="b33" value=""></td></tr><table>
<hr>
<h1>C</h1>
<input type="text" id="c" value="Результат">
<button onClick="ymn()">Результат</button>
</form>
</body>
</html>

@dzendev · 23.03.2016, 21:31

Javascript

function ymn(){
    var a11 = document.getElementById("a11").value;
    var b11 = document.getElementById("b11").value;
    document.getElementById("c").value = a11 * b11;
}

HTML5

1	<button onclick="ymn();return false;">Результат</button>

Нужен return false; - иначе страница обновляется, так как идёт отправка формы

@klimkin3teers · 23.03.2016, 22:52 **[ТС]**

Спасибо, я как раз практически так и сделал,

Тут код

HTML5

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-9">
<title>Êàëüêóëÿòîð ìàòðèö</title>
</head>
<script>function Ymn(){document.calc.c11.value=document.calc.a11.value*document.calc.b11.value+document.calc.a12.value*document.calc.b21.value+document.calc.a13.value*document.calc.b31.value;
document.calc.c12.value=document.calc.a11.value*document.calc.b12.value+document.calc.a12.value*document.calc.b22.value+document.calc.a13.value*document.calc.b32.value;
document.calc.c13.value=document.calc.a11.value*document.calc.b13.value+document.calc.a12.value*document.calc.b23.value+document.calc.a13.value*document.calc.b33.value;
 
document.calc.c21.value=document.calc.a21.value*document.calc.b11.value+document.calc.a22.value*document.calc.b21.value+document.calc.a23.value*document.calc.b31.value;
document.calc.c22.value=document.calc.a21.value*document.calc.b12.value+document.calc.a22.value*document.calc.b22.value+document.calc.a23.value*document.calc.b32.value;
document.calc.c23.value=document.calc.a21.value*document.calc.b13.value+document.calc.a22.value*document.calc.b23.value+document.calc.a23.value*document.calc.b33.value;
 
document.calc.c31.value=document.calc.a31.value*document.calc.b11.value+document.calc.a32.value*document.calc.b21.value+document.calc.a33.value*document.calc.b31.value;
document.calc.c32.value=document.calc.a31.value*document.calc.b12.value+document.calc.a32.value*document.calc.b22.value+document.calc.a33.value*document.calc.b32.value;
document.calc.c33.value=document.calc.a31.value*document.calc.b13.value+document.calc.a32.value*document.calc.b23.value+document.calc.a33.value*document.calc.b33.value;}</script>
<body>
<form name="calc">
<h1>A</h1>
<table>
<tr>
<td><input type="number" id="a11" value=""></td>
<td><input type="number" id="a12" value=""></td>
<td><input type="number" id="a13" value=""></td></tr>
<tr>
<td><input type="number" id="a21" value=""></td>
<td><input type="number" id="a22" value=""></td>
<td><input type="number" id="a23" value=""></td></tr>
<tr>
<td><input type="number" id="a31" value=""></td>
<td><input type="number" id="a32" value=""></td>
<td><input type="number" id="a33" value=""></td></tr><table>
<h1>B</h1>
<table>
<tr>
<td><input type="number" id="b11" value=""></td>
<td><input type="number" id="b12" value=""></td>
<td><input type="number" id="b13" value=""></td></tr>
<tr>
<td><input type="number" id="b21" value=""></td>
<td><input type="number" id="b22" value=""></td>
<td><input type="number" id="b23" value=""></td></tr>
<tr>
<td><input type="number" id="b31" value=""></td>
<td><input type="number" id="b32" value=""></td>
<td><input type="number" id="b33" value=""></td></tr><table>
<hr>
<h1>C</h1>
<table>
<tr>
<td><input type="number" id="c11" value=""></td>
<td><input type="number" id="c12" value=""></td>
<td><input type="number" id="c13" value=""></td></tr>
<tr>
<td><input type="number" id="c21" value=""></td>
<td><input type="number" id="c22" value=""></td>
<td><input type="number" id="c23" value=""></td></tr>
<tr>
<td><input type="number" id="c31" value=""></td>
<td><input type="number" id="c32" value=""></td>
<td><input type="number" id="c33" value=""></td></tr><table>
<button onClick="Ymn()">Ðåçóëüòàò</button>
</form>
</body>
</html>

Теперь новый вопрос: матрицы А и Б могут могут иметь размерность от 2 до 10, как можно у меня это реализовать, поприближеннее к функционалу, выделенному на рисунке:

Был бы это С++ там бы я сделал что-то вроде A[i][j], может и тут есть подобное, но с HTML и его синтаксисом я только начинаю ознакомляться.

@dzendev · 24.03.2016, 08:19

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

Был бы это С++ там бы я сделал что-то вроде A[i][j], может и тут есть подобное, но с HTML и его синтаксисом я только начинаю ознакомляться.

Двумерные массивы?

Javascript

1	arr = [ [1, 2] , [12, 13] , [34, 12] ];

Перебрать можно во вложенных циклах for

Javascript

for (var i = 0; i < arr.length; i++) {
   for (var j = 0; j < arr[i].length; j++) {
   
  }
}

@klimkin3teers · 24.03.2016, 09:58 **[ТС]**

Делаю по типу:

Кликните здесь для просмотра всего текста

HTML5

<script>
    ( function() {var str = 5;
      var i=1;
      while (i <= str) {
        document.write( "<td><select></select></td>"); 
        i++
      }
    } )()
  </script></tr></table>

но на месте <select> мне нужен <input type="number">, который единственный не отображается, точнее любой инпат.
И еще, возможно ли будет этот скрипт для строк вложить в подобный скрипт для столбцов?

Добавлено через 1 час 22 минуты

Кликните здесь для просмотра всего текста

HTML5

<table><script>(function(){var j=1,i=1,str=5,stl=6;
while(j<=stl){document.write("<tr>");j++;
while(i<=str){
document.write("<td><input type='number' min='0' max='10'></td>\n");
i++;}}}) ()</script>
</tr></table>

вот в чем здесь проблема?

@dzendev · 24.03.2016, 12:15

Не закрывается </tr> в цикле в первом

@klimkin3teers · 24.03.2016, 12:18 **[ТС]**

я его закрываю во втором цикле после написания всех столбцов

@dzendev · 24.03.2016, 14:50

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

я его закрываю во втором цикле после написания всех столбцов

2 строчка кода - открывается 5 раз
6 строчка кода - закрывается один раз после выхода из обоих циклов

@klimkin3teers · 24.03.2016, 17:10 **[ТС]**

Спасибо, я немного изменил, но все равно делает только первую строку. Сейчас вроде должно быть так что while ячеек вложен в while для строк и должна получиться примерно следующая структура:
<tr><td><td><td></tr>
<tr><td><td><td></tr>
<tr><td><td><td></tr>

А у меня все равно делает только первую строку, где я туплю?

Кликните здесь для просмотра всего текста

HTML5

<table><script>(function(){var j=1,i=1,str=5,stl=6;
while(j<=stl){document.write("<tr>");
while(i<=str){document.write("<td><input type='number' min='0' max='10'></td>\n");i++;}
document.write("</tr>");j++;}}) ()</script>
</table>

Добавлено через 2 минуты
т.е. нужно чтобы цикл для <td></td> был внутри цикла <tr></tr>, вроде все так есть, а эффекта нет)

Добавлено через 33 минуты
Все, я сделал, получилось, то что нужно

Кликните здесь для просмотра всего текста

HTML5

<table><script>
function DoTd(){var i=1;str=4;
while(i<=str){document.write("<td><input type='number' min='5' max='10'></td>\n");i++;}}
(function(){var j=1,stl=5;
while(j<=stl){document.write("<tr>");DoTd();
document.write("</tr>");j++;}}) ()</script>
</table>

Теперь наверное последний вопрос, как сделать так чтобы при нажатии кнопки переменная str либо stl увеличивалась либо уменьшалась и таблица перестраивалась?

@dzendev · 24.03.2016, 17:55

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

Все, я сделал, получилось, то что нужно

Javascript

(function(){
    var j=1, stl=6, str=5;
    while(j <= stl){
        // console.log(j);
        var i=1; // если переменная i будет за пределами цикла то второй цикл выполниться вcего один раз
                    // i станет равна 6 и второй цикл больше не будет выполняться
                    // Если объявить переменную в теле цикла как здесь, то
                    // перед каждым началом цикла ей будет присваиваться значение 1
                    // и второй цикл будет выполняться
        document.write("<tr>");
            while(i <= str){
                // console.log(i);
                document.write("<td><input type='number' min='0' max='10'></td>");
                i++;
            }
        document.write("</tr>");
        j++;
    }
})();
// можно этот код переписать с использование цикла for
(function () {
    var stl = 6, str = 5; 
    for (var i = 0; i < stl; i++) {
        document.write("<tr>");
        for (var j = 0; j < str; j++) {
            document.write("<td><input type='number' min='0' max='10'></td>");
        }
        document.write("</tr>");
    }   
})();

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

Теперь наверное последний вопрос, как сделать так чтобы при нажатии кнопки переменная str либо stl увеличивалась либо уменьшалась и таблица перестраивалась?

У Вас переменные определены в функции, их область видимости локальная. Значит надо переменные сделать глобальными, либо переписать функцию - добавить ей параметры. Например так:

Javascript

function generateTable(tr, td) {
    for (var i = 0; i < tr; i++) {
        document.write("<tr>");
        for (var j = 0; j < td; j++) {
            document.write("<td><input type='number' min='0' max='10'></td>");
        }
        document.write("</tr>");
    }
}
generateTable(3, 5); // менять только кол-во строк и столбцов

@klimkin3teers · 24.03.2016, 19:13 **[ТС]**

Огромное спасибо. А можете подсказать, как осуществить следующее: если str и stl определить глобально, то как сделать чтобы например пользователь вводил для них значения и после этого уже строилась матрица? А лучше чтобы начальные их значения были 2, а пользователь щелкал например по "добавить строку", "добавить столбец", их значения бы увеличивались и строилась матрица

Если вдруг интересно, сейчас код выглядит так:

HTML5

<!DOCTYPE html>
<html>
<head>
<meta charset="windows-1251">
<title>Калькулятор матриц</title>
</head>
    <script>function Ymn(){document.calc.c11.value=document.calc.a11.value*document.calc.b11.value+document.calc.a12.value*document.calc.b21.value+document.calc.a13.value*document.calc.b31.value;
document.calc.c12.value=document.calc.a11.value*document.calc.b12.value+document.calc.a12.value*document.calc.b22.value+document.calc.a13.value*document.calc.b32.value;
document.calc.c13.value=document.calc.a11.value*document.calc.b13.value+document.calc.a12.value*document.calc.b23.value+document.calc.a13.value*document.calc.b33.value;
 
document.calc.c21.value=document.calc.a21.value*document.calc.b11.value+document.calc.a22.value*document.calc.b21.value+document.calc.a23.value*document.calc.b31.value;
document.calc.c22.value=document.calc.a21.value*document.calc.b12.value+document.calc.a22.value*document.calc.b22.value+document.calc.a23.value*document.calc.b32.value;
document.calc.c23.value=document.calc.a21.value*document.calc.b13.value+document.calc.a22.value*document.calc.b23.value+document.calc.a23.value*document.calc.b33.value;
 
document.calc.c31.value=document.calc.a31.value*document.calc.b11.value+document.calc.a32.value*document.calc.b21.value+document.calc.a33.value*document.calc.b31.value;
document.calc.c32.value=document.calc.a31.value*document.calc.b12.value+document.calc.a32.value*document.calc.b22.value+document.calc.a33.value*document.calc.b32.value;
document.calc.c33.value=document.calc.a31.value*document.calc.b13.value+document.calc.a32.value*document.calc.b23.value+document.calc.a33.value*document.calc.b33.value;}
    }}</script>
 
 
<script>
document.oninput = function(event) {document.getElementById('result').innerHTML = event.target.id;}
</script> 
 
 
<body>
<form name="calc">
<h1>A</h1>
<table><script>
(function(){var j=1, stl=6, str=5;
    while(j <= str){
        var i=1;
        document.write("<tr>");
            while(i <= stl){
                document.write("<td><input type='number' id='a"+j+ +i+"' min='0' max='10'></td>");
                i++;}
        document.write("</tr>");
        j++;}
})();
</script>
</table>
 
<h1>B</h1>
<table><script>
(function(){var j=1, stl=6, str=5;
    while(j <= str){
        var i=1;
        document.write("<tr>");
            while(i <= stl){
                document.write("<td><input type='number' id='b"+j+ +i+"' min='0' max='10'></td>");
                i++;}
        document.write("</tr>");
        j++;}
})();
</script>
</table>
 
<h1>C</h1>
<table><script>
(function(){var j=1, stl=6, str=5;
    while(j <= str){
        var i=1;
        document.write("<tr>");
            while(i <= stl){
                document.write("<td><input type='number' id='c"+j+ +i+"' min='0' max='10'></td>");
                i++;}
        document.write("</tr>");
        j++;}
})();
</script>
</table>
 
<span id="result"></span>
 
<button onClick="Ymn(); return false;">Результат</button><input type="reset">
</form>
</body>
</html>

Первый скрипт для перемножения матриц перепишу как раз когда получиться издеваться над строками и столбцами, потому что нужно возможность изменять порядок матриц от 2х до 10.

@dzendev · 24.03.2016, 20:30

HTML5

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Калькулятор матриц</title>
    <script>
    function Ymn(){
        document.calc.c11.value=document.calc.a11.value*document.calc.b11.value+document.calc.a12.value*document.calc.b21.value+document.calc.a13.value*document.calc.b31.value;
document.calc.c12.value=document.calc.a11.value*document.calc.b12.value+document.calc.a12.value*document.calc.b22.value+document.calc.a13.value*document.calc.b32.value;
document.calc.c13.value=document.calc.a11.value*document.calc.b13.value+document.calc.a12.value*document.calc.b23.value+document.calc.a13.value*document.calc.b33.value;
 
document.calc.c21.value=document.calc.a21.value*document.calc.b11.value+document.calc.a22.value*document.calc.b21.value+document.calc.a23.value*document.calc.b31.value;
document.calc.c22.value=document.calc.a21.value*document.calc.b12.value+document.calc.a22.value*document.calc.b22.value+document.calc.a23.value*document.calc.b32.value;
document.calc.c23.value=document.calc.a21.value*document.calc.b13.value+document.calc.a22.value*document.calc.b23.value+document.calc.a23.value*document.calc.b33.value;
 
document.calc.c31.value=document.calc.a31.value*document.calc.b11.value+document.calc.a32.value*document.calc.b21.value+document.calc.a33.value*document.calc.b31.value;
document.calc.c32.value=document.calc.a31.value*document.calc.b12.value+document.calc.a32.value*document.calc.b22.value+document.calc.a33.value*document.calc.b32.value;
document.calc.c33.value=document.calc.a31.value*document.calc.b13.value+document.calc.a32.value*document.calc.b23.value+document.calc.a33.value*document.calc.b33.value;
}
 
document.oninput = function(event) {document.getElementById('result').innerHTML = event.target.id;}
 
function generateTable(tr, td) {
    strTable = '';
    for (var i = 0; i < tr; i++) {
        // document.write("<tr>");
        strTable += "<tr>";
        for (var j = 0; j < td; j++) {
            // document.write("<td><input type='number' min='0' max='10'></td>");
            strTable += '<td><input type="number" min="0" max="10"></td>';
        }
        // document.write("</tr>");
         strTable += "</tr>";
    }
    return strTable;
}
function inserTable(idTable, idTr, idTd) {
    // console.log(idTable);
    var tr = document.getElementById(idTr).value;
    var td = document.getElementById(idTd).value;
    document.getElementById(idTable).innerHTML = generateTable(tr, td);
}
window.onload = function() {
    document.getElementById("matA").innerHTML = generateTable(6, 5);
    document.getElementById("matB").innerHTML = generateTable(6, 5);
    document.getElementById("matC").innerHTML = generateTable(6, 5);
};
</script>
</head>
<body>
<form name="calc">
<input type="number" id="matAtr" name="matAtr" value="" placeholder="Строк">
<input type="number" id="matAtd" name="matAtd" value="" placeholder="Столбцов">
<button onClick='inserTable("matA", "matAtr", "matAtd"); return false;'>Генерировать</button>
<h1>A</h1>
<table id="matA">
</table>
<br>
<br>
<br>
<input type="number" id="matBtr" name="matBtr" value="" placeholder="Строк">
<input type="number" id="matBtd" name="matBtd" value="" placeholder="Столбцов">
<button onClick='inserTable("matB", "matBtr", "matBtd"); return false;'>Генерировать</button>
<h1>B</h1>
<table id="matB">
</table>
<br>
<br>
<br>
<input type="number" id="matCtr" name="matCtr" value="" placeholder="Строк">
<input type="number" id="matCtd" name="matCtd" value="" placeholder="Столбцов">
<button onClick='inserTable("matC", "matCtr", "matCtd"); return false;'>Генерировать</button>
<h1>C</h1>
<table id="matC">
</table>
 
<span id="result"></span>
 
<button onClick="Ymn(); return false;">Результат</button><input type="reset">
</form>
</body>
</html>

@klimkin3teers · 24.03.2016, 21:15 **[ТС]**

dzendev,
разрешите совсем обнаглеть и попросить подобный функционал

@dzendev · 25.03.2016, 10:15

Что-то я не понял вашего предложения. Вы мне предлагаете сделать за вас вашу работу бесплатно? Хм... даже не знаю зачем мне это надо

Если платно, то стучите в личку, либо в скайпе ищите

@dzendev 181 / 103 / 48 Регистрация: 12.03.2016 Сообщений: 260
	24.03.2016, 12:15	6
	Не закрывается </tr> в цикле в первом 0

@klimkin3teers 0 / 0 / 0 Регистрация: 23.03.2016 Сообщений: 15
	24.03.2016, 12:18 [ТС]	7
	я его закрываю во втором цикле после написания всех столбцов 0

@dzendev 181 / 103 / 48 Регистрация: 12.03.2016 Сообщений: 260
	24.03.2016, 14:50	8
	Сообщение от klimkin3teers я его закрываю во втором цикле после написания всех столбцов 2 строчка кода - открывается 5 раз 6 строчка кода - закрывается один раз после выхода из обоих циклов 1

@klimkin3teers 0 / 0 / 0 Регистрация: 23.03.2016 Сообщений: 15
	24.03.2016, 21:15 [ТС]	13
	dzendev, разрешите совсем обнаглеть и попросить подобный функционал Миниатюры 0

@dzendev 181 / 103 / 48 Регистрация: 12.03.2016 Сообщений: 260
	25.03.2016, 10:15	14
	Что-то я не понял вашего предложения. Вы мне предлагаете сделать за вас вашу работу бесплатно? Хм... даже не знаю зачем мне это надо Если платно, то стучите в личку, либо в скайпе ищите 0