Форум

GogElf · #1 (**permalink**) 10.04.2009, 12:47

Здравствуйте. Я не очень шарю javascript, но хочу изучить

У меня тут проблема не понимаю как сделать цикл по всем getElementById объектам...Скриптик конвертирует цену между рублем и долларом.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <script>
function rub(rub){
	var summ = document.getElementById('cen').innerHTML;
	var valut = document.getElementById('val').innerHTML;
		if (valut != 'руб.'){
			document.getElementById('cen').innerHTML = summ*rub;
			document.getElementById('val').innerHTML = 'руб.';
		}else {
			document.getElementById('cen').innerHTML = summ / rub;
			document.getElementById('val').innerHTML = '$';
		}
}
  </script>
</head>
<div id="cena"><span id="cen">52</span><span id="val">$</span></div>
<div id="cena"><span id="cen">52</span><span id="val">$</span></div>
<div id="cena"><span id="cen">52</span><span id="val">$</span></div>
<div id="cena"><span id="cen">52</span><span id="val">$</span></div>
<input type="button" onclick="java: rub('35.2')" value="GO" />
<body>
</body>
</html>

Gvozd · #2 (**permalink**) 10.04.2009, 13:33

id-шник у элемента должен быть уникальным в пределах документа.
и getElementById потому всегда возвращает один элемент.
используйте другую зацепку для обхода элементов.
например назначьте id ихнему родительскому элементу, и обходите го потомков

GogElf · #3 (**permalink**) 10.04.2009, 14:50

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
<script>
function rub(rub){
	var div = document.getElementById('cena');
	var elems = div.getElementsByTagName('td');
	for (var i=0; i<elems.length; i++){
	var summ = elems[i].getElementsByTagName('span').innerHTML;
	var valut = elems[i].getElementsByTagName('i').innerHTML;
		if (valut == '$'){
			elems[i].getElementsByTagName('span').innerHTML = summ*rub;
			elems[i].getElementsByTagName('i').innerHTML = 'руб.';
		}
		else
		{
			elems[i].getElementsByTagName('span').innerHTML = summ / rub;
			elems[i].getElementsByTagName('i').innerHTML = '$';
		}
	}
}
</script>
</head>
<body>
<table border="1">
<div>
<tr id="cena">
<th scope="row" class="spec">1 месяц</th>
<td class="one"><span>4</span><i>$</i></td>
<td class="one"><span>4</span><i>$</i></td>
<td class="one"><span>4</span><i>$</i></td>
<td class="one"><span>4</span><i>$</i></td>
<td class="one"><span>4</span><i>$</i></td>
</tr>
</div>
</table>
<input type="button" onclick="java: rub('35.2')" value="GO" />
</body>
</html>

Не че не происходит...

Kolyaj · #4 (**permalink**) 10.04.2009, 14:57

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

elems[i].getElementsByTagName('span').innerHTML

getElementsByTagName возвращает коллекцию.

GogElf · #5 (**permalink**) 10.04.2009, 15:17

Спасибо. Заработало

GogElf · #6 (**permalink**) 10.04.2009, 16:15

(для примера потомкам)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
<script>
function rub(rub){
	var div = document.getElementById('cena');
	var elems = div.getElementsByTagName('td');
	for (var i=0; i<elems.length; i++){
	var summ = elems[i].getElementsByTagName('span')[0].innerHTML;
	var valut = elems[i].getElementsByTagName('span')[1].innerHTML;
		if (valut == '$'){
			elems[i].getElementsByTagName('span')[0].innerHTML = summ*rub;
			elems[i].getElementsByTagName('span')[1].innerHTML = 'руб.';
		}
		else
		{
			elems[i].getElementsByTagName('span')[0].innerHTML = summ / rub;
			elems[i].getElementsByTagName('span')[1].innerHTML = '$';
		}
	}
}
</script>
</head>
<body>
<table border="1">
<tr id="cena">
<th scope="row" class="spec">1 месяц</th>
<td class="one"><span>4</span><span>$</span></td>
<td class="one"><span>4</span><span>$</span></td>
<td class="one"><span>4</span><span>$</span></td>
<td class="one"><span>4</span><span>$</span></td>
<td class="one"><span>4</span><span>$</span></td>
</tr>
</table>
<input type="button" onclick="java: rub('33.63')" value="GO" />
</body>
</html>

x-yuri · #7 (**permalink**) 10.04.2009, 18:21

а что это за onclick="java: rub('33.63')"
http://javascript.ru/unsorted/why_href_js_is_bad

GogElf · #8 (**permalink**) 10.04.2009, 19:12

x-yuri эм... я не дописал но все равно работало

Форум

Справочник

Discord чат

Курсы javascript