Javascript-форум - Создание первого скрипта

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Создание первого скрипта (https://javascript.ru/forum/misc/35509-sozdanie-pervogo-skripta.html)

Создание первого скрипта

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

Идея в том чтобы заменить прайс лист (картинка во вложении) на сайте джава скриптом (фотка хтмл документа во вложении).

Как должно работать: при выборе строки 3 и столбца 200 и при нажатие на кнопку "рассчитать" в ответе появятся число соответствующее число
по картинке "160".

или при выборе 1 строки и 100 столбца в ответе появятся число 125.

Как лучше сделать??

Составить 3 массива: для строк (1 - 6), для столбцов (50 - 1000), для ответов со значением 130 до 92 (см код),

и воспользоватся "if", чтобы при выборе строки "1-6" и столбцов "50-1000" выводилось подходящее значение из массива "answer" в окошко "total".

Или таким способом вообще не получится?

<!DOCTYPE html>
<html>
<head>


<style type="text/css">
</style>
<script type="text/javascript">
var base = [50,100,200,300,400,500,600,700,800,1000];
var time = [1,2,3,4,5,6,];
var answer = [[130,115,104,89,83,75,75,69,67,63],
                  [167,140,125,103,93,85,79,77,75,69],
                  [200,167,160,118,105,95,87,84,81,75],
                  [234,192,183,132,120,100,95,91,89,79]
				  [267,218,206,146,139,110,101,98,95,85]
				  [300,244,230,160,150,120,108,105,101,92]]

function calc() {
	

	document.getElementById('total').value=rez;
};
</script>
</head>
<body>
<form>
	<div>
		<table width="532" border="0" align="center">
		<tbody>
			<tr>
				<td width="256">50 - 1000</td>
				<td width="260">
					<select name="column" id="column">
						<option value="0">от 50</option>
						<option value="1">от 100</option>
						<option value="2">от 200</option>
						<option value="3">от 300</option>
						<option value="4">от 400</option>
						<option value="5">от 500</option>
						<option value="6">от 600</option>
						<option value="7">от 700</option>
						<option value="8">от 800</option>
						<option value="9">от 1000</option>
					</select>
				</td>
			</tr>
			<tr>
				<td>1 - 6</td>
				<td>
					<select name="hours" id="colum1">
						<option value="0">1</option>
						<option value="1">2</option>
						<option value="2">3</option>
						<option value="3">4</option>
						<option value="4">5</option>
						<option value="5">6</option>
					</select>
				</td>
			</tr>
			
				
		
			<tr>
			<td></td>
			<td>
				<input type="button" value="Рассчитать" onclick="calc();"> 
				<input type="reset" value="Сброс">
			</td>  
			</tr>
			<tr>
				<td>Итого: </td>
				<td><input name="total" id="total" type="text" size="8"></td>
			</tr>
			</tbody>
		</table>
	</div>
</form>
</body>
</html>

Цитата:

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

при выборе строки 3 и столбца 200 и при нажатие на кнопку "рассчитать" в ответе появятся число соответствующее число
по картинке "160".

Вроде как на картинке так...

Цитата:

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

при выборе 1 строки и 100 столбца в ответе появятся число 125

На картинке уже 115!

Нипанятна.:blink:

Цитата:

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

Составить 3 массива

Если делать "как в табличке, что на картинке" - хватит и двух массивов...

var base = [50,100,200,300,400,500,600,700,800,1000];
var answer = [
	[130,115,104,89,83,75,75,69,67,63],
	[167,140,125,103,93,85,79,77,75,69],
	[200,167,160,118,105,95,87,84,81,75],
	[234,192,183,132,120,100,95,91,89,79]
	[267,218,206,146,139,110,101,98,95,85]
	[300,244,230,160,150,120,108,105,101,92]
];

Что-то типа такого...

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
</style>
<script type="text/javascript">
var base = [50,100,200,300,400,500,600,700,800,1000];
var a = [
	[130,115,104,89,83,75,75,69,67,63],
	[167,140,125,103,93,85,79,77,75,69],
	[200,167,160,118,105,95,87,84,81,75],
	[234,192,183,132,120,100,95,91,89,79],
	[267,218,206,146,139,110,101,98,95,85],
	[300,244,230,160,150,120,108,105,101,92]
];
$(document).ready(function (){
	(function (){
		var o=$('#s1');
		var i;
		o.append('<option value=""></option>')
		for (i=0; i<a.length; i++) {
			o.append('<option value="'+i+'">'+(i+1)+'</option>')
		};
		o=$('#s2')
		o.append('<option value=""></option>')
		for (i=0; i<base.length; i++) {
			o.append('<option value="'+i+'">От '+base[i]+'</option>')
		};
	})();
	$('select').change(function (){
		var s1=$('#s1').val();
		var s2=$('#s2').val();
		if (s1==''||s2=='') return;
		$('#itg').text(a[s1][s2]);
	});
});
</script>
</head>
<body>
<select id='s1'></select>
<select id='s2'></select>
<p>Итого: <span id='itg'></span></p>
</body>
</html>

И все же, друзья! Могли бы вы выложить вариант с 3 массивами, т.е. если столбец не по порядку идет а произвольные цифры

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>

<style type="text/css">
</style>
<script type="text/javascript">
var base = [15,100,200,300,400,500,600,700,800,1000];

var time = [1,2,5,6,7,];

var a = [
[130,115,104,89,83,75,75,69,67,63],
[167,140,125,103,93,85,79,77,75,69],
[200,167,160,118,105,95,87,84,81,75],
[234,192,183,132,120,100,95,91,89,79],
[267,218,206,146,139,110,101,98,95,85],
[300,244,230,160,150,120,108,105,101,92]
];
$(document).ready(function (){

(function (){

var o=$('#s1');
var i;
o.append('<option value=""></option>')
for (i=0; i<time.length; i++) {
o.append('<option value="'+i+'">'+time[i]+'</option>')
};

o=$('#s2')
o.append('<option value=""></option>')
for (i=0; i<base.length; i++) {
o.append('<option value="'+i+'">От '+base[i]+'</option>')
};

})();

$('select').change(function (){
var s1=$('#s1').val();
var s2=$('#s2').val();
if (s1==''||s2=='') return;
$('#itg').text(a[s1][s2]);
});
});
</script>
</head>
<body>
<select id='s1'></select>
<select id='s2'></select>
<p>Итого: <span id='itg'></span></p>
</body>
</html>

Вроде работает

А как сделать вместо цифр текст допустим в массиве base 15=Автомобиль, 100=автобус и т.д.

Цитата:

Сообщение от ksa (Сообщение 233561)

Вроде как на картинке так...

На картинке уже 115!

Нипанятна.:blink:

Это мой косяк:)

а как заменить вот эти цифры??
То есть редактировать атрибуты option в теге select

Да нашел решение

var time = ['Яблоко','Груша','Вишня','Слив а','Слива1','Слива2'];

Вместо цифр слова... Вроде работает...

теперь зада по сложнее, нужно сделать, так чтобы выбираемые данные отражались в форме и была возможность их отправить на почту...

Я сделал <textarea>, но там только id="itg", как сделать, так, чтобы s1 и s2 тоже там появлялись???

Выкладываю, то что сделал, помогите доделать!!!!

[ js ]
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>

<style type="text/css">
</style>
<script type="text/javascript">
var base = [15,100,200,300,400,500,600,700,800,1000];

var time = ['Яблоко','Груша','Вишня','Слив а','Слива1','Слива2'];

var a = [
[130,115,104,89,83,75,75,69,67,63],
[167,140,125,103,93,85,79,77,75,69],
[200,167,160,118,105,95,87,84,81,75],
[234,192,183,132,120,100,95,91,89,79],
[267,218,206,146,139,110,101,98,95,85],
[300,244,230,160,150,120,108,105,101,92]
];
$(document).ready(function (){

(function (){

var o=$('#s1');
var i;
o.append('<option value=""></option>')
for (i=0; i<time.length; i++) {
o.append('<option value="'+i+'">'+time[i]+'</option>')
};

o=$('#s2')
o.append('<option value=""></option>')
for (i=0; i<base.length; i++) {
o.append('<option value="'+i+'">'+base[i]+'</option>')
};

})();

$('select').change(function (){
var s1=$('#s1').val();
var s2=$('#s2').val();
if (s1==''||s2=='') return;
$('#itg').text(a[s1][s2]);
});
});
</script>
</head>
<body><table><tr><td>
<select id='s1'></select></td></tr>
<tr><td><select id='s2'></select></td></tr>
<tr><td><p>Итого:<form>

<textarea id="itg" name="mess" cols="10" rows="2"></textarea> руб.</form>

</p></td></tr></table>
</body>
</html>[ /js ]

насколько я понимаю, там надо как через ttt.value это сделать... Может кто подскажет???

код страницы HTML обертывайте в теги [HTML][/html] , кнопка

(Чуть позже - гляну

А возможно переделать так чтобы скрипт работал не ссылаясь на jquery???