Изминение значения с помощью JS

slimline · June 17, 2011

есть таблица в которой есть значение (например 0.111), нада ето значение умножаить на определенное значение и вернуть обратно. Я пытался сделать так:


<html>

<head>
<script type="text/javascript">
			function pereschet(grn)
			{
			var str kurs = 100;
			var str usa = grn*kurs;
			var str grn = usa;
			return grn;	
			}
</script>
</head>

<body>

<table align="left" border="0">
<tr>
		<td>
			<table align="left" border="0" width="300">
				<tr>
					<td colspan="2">Белая (апельсинова корка)</td>
				</tr>

				<tr>
					<td colspan="2">Код кромки "101"</td>
				</tr>

				<tr align="center" bgcolor="CECFCE">
					<td>Размеры :</td>
					<td>Цена (евро):</td>
				</tr>

				<tr align="center">
					<td>22х0,45</td>
					<td><p id="grn">10</p></td>

						<script type="text/javascript"> 
						grn.firstChild.nodeValue = parseInt(grn.firstChild.nodeValue)*kurs; 
						</script>

				</tr>






			<tr align="center" bgcolor="CECFCE">
			<td>23х0,8*</td>
			<td>0,210</td>
			</tr>
			<tr align="center">
			<td>22x2,0</td>
			<td>0,309</td>
			</tr>
			<tr align="center" bgcolor="CECFCE">
			<td>28x2,0</td>
			<td>0,519</td>
			</tr>
			<tr align="center">
			<td>33x2,0</td>
			<td>0,705</td>
			</tr>
			<tr align="center" bgcolor="CECFCE">
			<td>45x2,0</td>
			<td>0,803</td>
			</tr>
			<tr>
			<td colspan="2"> * - под заказ</td>
			</tr>
			</table>
</td>

<td>
			<table border="0" width="300">

			<tr align="center">
			<td>
			<img src="101.jpg" alt="image" height="46" width="220" border="1">
			</td>
			</tr>
			<tr align="center">
			<td colspan="2">Редомендуеться под ДСП:</td>
			</tr>
			<tr align="center">
			<td colspan="2">SwissPan Белый</td>
			</tr>
			<tr align="center">
			<td colspan="2">КроноУкраина (U101) Белый</td>
			</tr>
			<tr align="center">
			<td colspan="2">EGGER U975 Полярно - белый</td>
			</tr>
			<tr align="center">
			<td colspan="2">Kronopol (U101) Белый</td>
			</tr>
			<tr align="center">
			<td colspan="2">Kronospan CZ/SK (U101/U110) Белый</td>
			</tr>
			<tr align="center">
			<td colspan="2">Falco 103</td>
			</tr>
			</table>
</td>
</tr>
</table>
</body>
</html>

Кто подскажет почему не срабатывает? не считает...

Не судите строго, я новичек, да, про CSS слышал но руки еще не дошли)

Great Rash · June 17, 2011


function pereschet(grn) {
  var kurs = 100;
  return grn * kurs;
}

slimline · June 17, 2011

и так не работает...больше вариантов нету?

Great Rash · June 17, 2011

Все работает.

slimline · June 17, 2011

нашел, работает так:

<html>
<head>
<script type="text/javascript">
function pereschet(grn)
{
var kurs = 11.11;
return grn * kurs ;
}
</script>
</head>
<body>
<table align="left" border="0">
<tr>
<td>
<table align="left" border="0" width="300">
<tr>
<td colspan="2">Белая (апельсинова корка)</td>
</tr>
<tr>
<td colspan="2">Код кромки "101"</td>
</tr>
<tr align="center" bgcolor="CECFCE">
<td>Размеры :</td>
<td>Цена (евро):</td>
</tr>
<tr align="center">
<td>22х0,45</td>
<td><p id="grn">10</p></td>
<script type="text/javascript">
var kurs = 11.30;
grn.firstChild.nodeValue = parseInt(grn.firstChild.nodeValue)*kurs;
</script>
</tr>
<tr align="center" bgcolor="CECFCE">
<td>23х0,8*</td>
<td>0,210</td>
</tr>
<tr align="center">
<td>22x2,0</td>
<td>0,309</td>
</tr>
<tr align="center" bgcolor="CECFCE">
<td>28x2,0</td>
<td>0,519</td>
</tr>
<tr align="center">
<td>33x2,0</td>
<td>0,705</td>
</tr>
<tr align="center" bgcolor="CECFCE">
<td>45x2,0</td>
<td>0,803</td>
</tr>
<tr>
<td colspan="2"> * - под заказ</td>
</tr>
</table>
</td>
<td>
<table border="0" width="300">
<tr align="center">
<td>
<img src="101.jpg" alt="image" height="46" width="220" border="1">
</td>
</tr>
<tr align="center">
<td colspan="2">Редомендуеться под ДСП:</td>
</tr>
<tr align="center">
<td colspan="2">SwissPan Белый</td>
</tr>
<tr align="center">
<td colspan="2">КроноУкраина (U101) Белый</td>
</tr>
<tr align="center">
<td colspan="2">EGGER U975 Полярно - белый</td>
</tr>
<tr align="center">
<td colspan="2">Kronopol (U101) Белый</td>
</tr>
<tr align="center">
<td colspan="2">Kronospan CZ/SK (U101/U110) Белый</td>
</tr>
<tr align="center">
<td colspan="2">Falco 103</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

Но так, если нада поменять значение переменной kurs, менять надо по всей странице, а если страницы 89 шт? и в каждой по 5-7 раз используеться такой скрипт...

Все работает.

ну тогда должно быть значение не 10, а 1000 когда открываешь страничку в браузере, а оно по прежнему 10...

Great Rash · June 17, 2011

Я не вижу где вы используете функцию pereschet? Как только вы начнете ее использовать все заработает.

slimline · June 17, 2011

<html>

<head>
<script type="text/javascript">
			function pereschet(grn)
			{
			var kurs = 5;
			return grn * kurs ;	
			}
</script>
</head>

<body>

<table align="left" border="0">
<tr>
		<td>
			<table align="left" border="0" width="300">
				<tr>
					<td colspan="2">Белая (апельсинова корка)</td>
				</tr>

				<tr>
					<td colspan="2">Код кромки "101"</td>
				</tr>

				<tr align="center" bgcolor="CECFCE">
					<td>Размеры :</td>
					<td>Цена (евро):</td>
				</tr>

				<tr align="center">
					<td>22х0,45</td>
					<td><p id="grn">10</p></td>

						<script type="text/javascript"> 
						pereschet();
						grn.firstChild.nodeValue = parseInt(grn.firstChild.nodeValue)*pereschet(grn); 
						</script>

				</tr>






			<tr align="center" bgcolor="CECFCE">
			<td>23х0,8*</td>
			<td>0,210</td>
			</tr>
			<tr align="center">
			<td>22x2,0</td>
			<td>0,309</td>
			</tr>
			<tr align="center" bgcolor="CECFCE">
			<td>28x2,0</td>
			<td>0,519</td>
			</tr>
			<tr align="center">
			<td>33x2,0</td>
			<td>0,705</td>
			</tr>
			<tr align="center" bgcolor="CECFCE">
			<td>45x2,0</td>
			<td>0,803</td>
			</tr>
			<tr>
			<td colspan="2"> * - под заказ</td>
			</tr>
			</table>
</td>

<td>
			<table border="0" width="300">

			<tr align="center">
			<td>
			<img src="101.jpg" alt="image" height="46" width="220" border="1">
			</td>
			</tr>
			<tr align="center">
			<td colspan="2">Редомендуеться под ДСП:</td>
			</tr>
			<tr align="center">
			<td colspan="2">SwissPan Белый</td>
			</tr>
			<tr align="center">
			<td colspan="2">КроноУкраина (U101) Белый</td>
			</tr>
			<tr align="center">
			<td colspan="2">EGGER U975 Полярно - белый</td>
			</tr>
			<tr align="center">
			<td colspan="2">Kronopol (U101) Белый</td>
			</tr>
			<tr align="center">
			<td colspan="2">Kronospan CZ/SK (U101/U110) Белый</td>
			</tr>
			<tr align="center">
			<td colspan="2">Falco 103</td>
			</tr>
			</table>
</td>
</tr>
</table>
</body>
</html>

Вот я обьявил функцию, потом использовал, теперь результат етого всего в браузере NAN

NAN - Not A Number

я так понимаю число "10" в ячейке таблицы скрипт не воспринимает как число?

"функция parseInt не смогла преобразовать строку в число и поэтому вернула значения NaN" - по етому ошибка, да?

Great Rash · June 17, 2011

Вам надо срочно начать изучения яваскрипта. Видно, что вы совсем не понимаете что делаете. Я вам опишу алгоритм действий, а уж как его реализовать придумаете самостоятельно.

1) Находим все элементы, внутри которых надо что-то пересчитать.

2) Начинаем пробегать по ним циклом.

2.1) смотрим какое значение стоит внутри элемента и преобразуем строку в число (parseFloat)

2.2) домножаем полученное число на курс

2.3) записываем новое значение внутрь соответствующего элемента

3) Вызываем функцию после загрузки документа.

Int · June 17, 2011

Ну я же писал рабочий вариант

<script type="text/javascript">
window.onload=function() {
var kurs=100;
var grn=document.getElementById('grn');
grn.firstChild.nodeValue = parseInt(grn.firstChild.nodeValue)*kurs;
}
</script>

slimline · June 20, 2011

работает, только я parseInt заменил на parseFloat (как выше советовали) и теперь у меня 5 знаков после, а надо 3 знака....

s0rr0w · June 20, 2011

работает, только я parseInt заменил на parseFloat (как выше советовали) и теперь у меня 5 знаков после, а надо 3 знака....

Умножить число на 1000, округлить, разделить число на 1000

slimline · June 20, 2011

(3.2489).toFixed(2); //3.24
Math.PI.toFixed(4); //3.1416 - число ? с 4 знаками после запятой
Метод toFixed возвращает число в виде строки с заданным числом цифр после запятой.

нашел такой вариант, а как его вставит в мою функцию? чето я перепробовал разные варианты, не получилось...

вооот, получилось так:


<script type="text/javascript">
window.onload=function() {
var kurs=11.41;
var grn=document.getElementById('grn');
grn.firstChild.nodeValue = (parseFloat(grn.firstChild.nodeValue)*kurs).toFixed(3);
}
</script>

и таки работает =))

Edited June 20, 2011 by slimline

Int · June 20, 2011

Ну и хорошо. Только такой подход был бы оправдан, если бы у тебя на странице встречалось 50 таких цен. А если цена всего одна, то её можно было бы поменять и вручную.

Правда, если рассовать скрипт в 50 страниц и курс задавать автоматически, то смысл есть.

slimline · June 20, 2011

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

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

Edited June 20, 2011 by slimline

Int · June 20, 2011

Только учти, что id на странице должен быть уникальным. Тебе бы лучше было использовать какой-нибудь редкий тэг, вроде <kbd>, и потом искать его через getElementsByTagName

slimline · June 20, 2011

Но я вот понял, что скрипт меняет только одно значение....я так понимаю чтоб сделать ето допустим для 5ти значений нужно делать через массив?

slimline · June 20, 2011

Все гениальное просто:

<script type="text/javascript">
window.onload=function() {
var kurs=12;
var grn=document.getElementById('grn');
var grn1=document.getElementById('grn1');
var grn2=document.getElementById('grn2');
var grn3=document.getElementById('grn3');
var grn4=document.getElementById('grn4');
var grn5=document.getElementById('grn5');
var grn6=document.getElementById('grn6');
grn.firstChild.nodeValue = (parseFloat(grn.firstChild.nodeValue)*kurs).toFixed(3);
grn1.firstChild.nodeValue = (parseFloat(grn1.firstChild.nodeValue)*kurs).toFixed(3);
grn2.firstChild.nodeValue = (parseFloat(grn2.firstChild.nodeValue)*kurs).toFixed(3);
grn3.firstChild.nodeValue = (parseFloat(grn3.firstChild.nodeValue)*kurs).toFixed(3);
grn4.firstChild.nodeValue = (parseFloat(grn4.firstChild.nodeValue)*kurs).toFixed(3);
grn5.firstChild.nodeValue = (parseFloat(grn5.firstChild.nodeValue)*kurs).toFixed(3);
grn6.firstChild.nodeValue = (parseFloat(grn6.firstChild.nodeValue)*kurs).toFixed(3);
}
</script>

для 7ми значений на странице. Может и не очень красиво, не очень правильно, но все же ето работает. Или подскажите вариант по красивее?

slimline · June 20, 2011

теперь трабла с подключением из внешнего файла

выношу код в отдельный файл, называю его например kurs.js и на страничке html между тегами <head></head> делаю так:


<script type="text/javascript" src="kurs.js"></script>

и не работает...в чем опять моя ошибка может быть? (файл kurs.js лежит в одной папке со страницой html в которую я пытаюсь подключить скрипт)

Int · June 20, 2011

В .js-файле не нужны тэги <script>, в остальном должно бы работать.

Добавь туда alert(1), если файл подгружается, alert сработает.

покороче можно сделать так

var kurs=12;
var vars=document.getElementsByTagName('kbd');
for (i=0; i < vars.length; i++)
   vars[i].firstChild.nodeValue=(parseFloat(vars[i].firstChild.nodeValue)*kurs).toFixed(3);

А в коде все значения, которые должны умножаться, заключить в тэг <kbd>. Только не забудь задать ему нормальный стиль.

Sign In

Изминение значения с помощью JS

Question

Link to comment

Share on other sites

18 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information