Форум

klk.pma · #1 (**permalink**) 20.01.2015, 21:00

Добрый день!
Я на сайте использую вот такой вариант:

<input id="pole" type="text" onclick="run(this.value)" value="Значение!"/>

function run(in) {
  alert(in);
}

Но хочу отказаться от исползования атрибута и сделать в таком виде:

<input id="pole" type="text" value="Значение!"/>

function run(in) {
  alert(in);
}
document.getElementById('pole').onclick = run;

Но столкнулся с проблемой: в текущем варианте я передаю в функцию значение поля (this.value), а вот в новом варианте почему-то не получается передать это значение.
Пожалуйста, подскажите как это правильно реализовать?

registrant · #2 (**permalink**) 20.01.2015, 21:07

<!DOCTYPE html>
<html>
<head>

</head>
<body>

<input id="pole" type="text" value="Значение!"/>
<script>
document.querySelector("#pole").onclick=function run() {
	  alert(['Спасибо!', this.value]);
	}

</script>
 
</body>

klk.pma · #3 (**permalink**) 20.01.2015, 21:25

Спасибо! Вариант рабочий, но только если писать в html документе скрипт, а вот если выносишь это в отдельный js файл, то это уже не работает. Пробовал в файле писать

var in=document.getElementById('pole').value;

Почему-то не работает.
Пожалуйста, подскажите что необходимо для работы этого похожего кода в подключаемом файле? Чем заменить this.value в подключаемом файле?

registrant · #4 (**permalink**) 20.01.2015, 21:57

klk.pma,
Все должно работать. Посмотрите на порядок загрузки скриптов. Тот скрипт, в котором выполняется данный код, подключите перед закрывающим тегом body, например.

И не используйте in в качестве переменной, это часть синтаксиса, у Вас там ошибку должно показывать

klk.pma · #5 (**permalink**) 20.01.2015, 22:11

это я не дописал. Использую - item вместо in. Но все равно не работает.
Ради интереса написал отдельный пример:

<!DOCTYPE>
<html>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<head>
<script language="JavaScript" src="new2_files/scrjs.js"></script>
</head>
<body>
<div id="stra">
	<form>
	<input id="pole" type="text" value="Из файла"/>
	<input id="pole2" type="text" onclick="run(this.value)" value="Атрибут"/>
	</form>
</div>                                                                                                             
							
</body>
</html>

function run() {
	alert('atribut');
}

var elem=document.getElementById("pole");
if(elem) alert(elem);
else alert('no obj');

Так вот при нажатии на pole все работает. А при нажатии на pole2 выдает сообщение no obj. Теперь вообще ничего не понимаю, полная каша в голове.

registrant · #6 (**permalink**) 20.01.2015, 22:26

klk.pma,
я же написал

Цитата:

Посмотрите на порядок загрузки скриптов. Тот скрипт, в котором выполняется данный код, подключите перед закрывающим тегом body, например.

вот так пробуйте

<!DOCTYPE>
<html>
<head>
</head>
<body>
<div id="stra">
    <form>
    <input id="pole" type="text" value="Из файла"/>
    </form>
</div>                                                                                                            
                             

<script src="new2_files/scrjs.js"></script>
</body>
</html>

Содержимое файла new2_files/scrjs.js:

document.querySelector("#pole").onclick=function runFromFile() {// имя ф-ции в данном случае не обязательно
    alert(this.value);
}

klk.pma · #7 (**permalink**) 20.01.2015, 22:31

Спасибо! А возможно как-то сделать чтобы все это работало в файле подключаемом в head?

registrant · #8 (**permalink**) 20.01.2015, 22:37

Сообщение от klk.pma

А возможно как-то сделать чтобы все это работало в файле подключаемом в head?

да, например

<!DOCTYPE>
<html>
<head>
<script>
//нижеследующий код в твоем скрипте:
window.onload=function(){
document.querySelector("#pole").onclick=function runFromFile() {
    alert(this.value);
}
}
</script>

</head>
<body>
<div id="stra">
    <form>
    <input id="pole" type="text" value="foo"/>
    </form>
</div>                                                                                                            
                             
</body>
</html>

Только, зачем? Какая разница где он подключен?

danik.js · #9 (**permalink**) 20.01.2015, 22:39

Сообщение от klk.pma

бы все это работало в файле подключаемом в head?

В head скрипт будет выполнятся ДО того как распарсится и будет готово тело (body) документа. А значит и onclick нельзя навесить, потому как элемент попросту еще не существует.
Подключать скрипты в конце <body> - стандартная практика, это одна из первых рекомендации по оптимизации скорости сайта.

Но если очень хочется - вешаешь обработчик на событие document@DOMContentLoaded (записал условно: объект@событие) - это событие завершения загрузки HTML-кода страницы (и соотв-но, разбора и формирования DOM).

Есть еще событие window@load - оно происходит позже - оно ожидает окончания загрузки внешних ресурсов (в основном картинок). Это событие не рекомендуется использовать.

klk.pma · #10 (**permalink**) 21.01.2015, 09:09

registrant и danik.js Спасибо вам за помощь и разъяснения!

Форум

Справочник

Discord чат

Курсы javascript