Javascript-форум - установка стиля элемента по событию

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

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

- - установка стиля элемента по событию (https://javascript.ru/forum/misc/62784-ustanovka-stilya-ehlementa-po-sobytiyu.html)

установка стиля элемента по событию

здравствуйте

цель - при вводе в поле формы текста функция должна найти этот текст в таблице и сделать у элемента таблицы бордер.
написал функцию по событию onclick. она срабатывает, стиль подключается и сразу исчезает. нужно, чтобы стиль оставался всегда.
вот разметка:

<form>
	<input type="text" id="text" />
	<input type="submit" id="submit" onclick="search()" />
</form>

<table>
	<tr>
		<td>s4567</td>
		<td>9876</td>
		<td>описание1</td>
		<td>продукт1</td>
	</tr>
	<tr>
		<td>s4568</td>
		<td>9877</td>
		<td>описание2</td>
		<td>продукт2</td>
	</tr>
	<tr>
		<td>s4569</td>
		<td>9878</td>
		<td>описание3</td>
		<td>продукт3</td>
	</tr>
	<tr>
		<td>s4570</td>
		<td>9879</td>
		<td>описание4</td>
		<td>продукт4</td>
	</tr>
	<tr>
		<td>s4571</td>
		<td>9880</td>
		<td>описание5</td>
		<td>продукт5</td>
	</tr>
	<tr>
		<td>s4572</td>
		<td>9881</td>
		<td>описание6</td>
		<td>продукт6</td>
	</tr>
</table>

джава скрипт

function search()
{
	var txt = document.getElementById("text").value;
	if (txt == "")
	{
		alert("Введено пустое значение");
		return false;
	}
	var tags = document.getElementsByTagName("td");
	for (i = 0; i <= tags.length; i++)
	{
		if (tags[i].innerHTML == txt)
		{
			return tags[i].style.border = '#00FF00 solid 1px';
		}
	}
}

помогите, пожалуйста

Цитата:

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

i <= tags.length

почему?

Цитата:

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

return tags[i].style.border

нафига?

Цитата:

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

return false;

лучше бы не здесь

gazman,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">

</head>

<body>
<form>
	<input type="text" id="text" />
	<input type="submit" id="submit" onclick="return search()" />
</form>

<table>
	<tr>
		<td>s4567</td>
		<td>9876</td>
		<td>описание1</td>
		<td>продукт1</td>
	</tr>
	<tr>
		<td>s4568</td>
		<td>9877</td>
		<td>описание2</td>
		<td>продукт2</td>
	</tr>
	<tr>
		<td>s4569</td>
		<td>9878</td>
		<td>описание3</td>
		<td>продукт3</td>
	</tr>
	<tr>
		<td>s4570</td>
		<td>9879</td>
		<td>описание4</td>
		<td>продукт4</td>
	</tr>
	<tr>
		<td>s4571</td>
		<td>9880</td>
		<td>описание5</td>
		<td>продукт5</td>
	</tr>
	<tr>
		<td>s4572</td>
		<td>9881</td>
		<td>описание6</td>
		<td>продукт6</td>
	</tr>
</table>

<script>
function search() {
    var txt = document.getElementById("text").value;
    if (txt) {
        var tags = document.getElementsByTagName("td");
        for (i = 0; i < tags.length; i++)
            if (tags[i].innerHTML == txt) tags[i].style.border = "#00FF00 solid 1px"
    } else alert("Введено пустое значение");
    return false
};
</script>
</body>
</html>

насчет сразу исчезает - при перезагрузке страницы чтоли? А по задумке должен оставаться?

да. должен стиль оставаться для найденного элемента

Цитата:

Сообщение от рони (Сообщение 415288)

gazman,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">

</head>

<body>
<form>
	<input type="text" id="text" />
	<input type="submit" id="submit" onclick="return search()" />
</form>

<table>
	<tr>
		<td>s4567</td>
		<td>9876</td>
		<td>описание1</td>
		<td>продукт1</td>
	</tr>
	<tr>
		<td>s4568</td>
		<td>9877</td>
		<td>описание2</td>
		<td>продукт2</td>
	</tr>
	<tr>
		<td>s4569</td>
		<td>9878</td>
		<td>описание3</td>
		<td>продукт3</td>
	</tr>
	<tr>
		<td>s4570</td>
		<td>9879</td>
		<td>описание4</td>
		<td>продукт4</td>
	</tr>
	<tr>
		<td>s4571</td>
		<td>9880</td>
		<td>описание5</td>
		<td>продукт5</td>
	</tr>
	<tr>
		<td>s4572</td>
		<td>9881</td>
		<td>описание6</td>
		<td>продукт6</td>
	</tr>
</table>

<script>
function search() {
    var txt = document.getElementById("text").value;
    if (txt) {
        var tags = document.getElementsByTagName("td");
        for (i = 0; i < tags.length; i++)
            if (tags[i].innerHTML == txt) tags[i].style.border = "#00FF00 solid 1px"
    } else alert("Введено пустое значение");
    return false
};
</script>
</body>
</html>

спасибо. подскажите, пожалуйста, почему мой код не работает?

gazman,
потому что страница перезагружается при клике и элемента с индексом tags.length не существует.

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

gazman,
форма, жмакается кнопа отправить, ничего отправку не отменяет, вот и перезагрузка или переход на несуществующий action.
в моём варианте происходит отмена отправки.

Цитата:

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

onclick="return search()"

search возвращает false, следовательно return false или отменить клик, и клик не всплывает до формы.

gazman,
можно отменить через submit

<form  onsubmit="return false">
  <input type="text" id="text" />
  <input type="submit" id="submit" onclick="search()" />
</form>