Передача значения элемента без применения атрибута
Добрый день!
Я на сайте использую вот такой вариант: <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), а вот в новом варианте почему-то не получается передать это значение. Пожалуйста, подскажите как это правильно реализовать? |
<!DOCTYPE html> <html> <head> </head> <body> <input id="pole" type="text" value="Значение!"/> <script> document.querySelector("#pole").onclick=function run() { alert(['Спасибо!', this.value]); } </script> </body> |
Спасибо! Вариант рабочий, но только если писать в html документе скрипт, а вот если выносишь это в отдельный js файл, то это уже не работает. Пробовал в файле писать
var in=document.getElementById('pole').value;Почему-то не работает. Пожалуйста, подскажите что необходимо для работы этого похожего кода в подключаемом файле? Чем заменить this.value в подключаемом файле? |
klk.pma,
Все должно работать. Посмотрите на порядок загрузки скриптов. Тот скрипт, в котором выполняется данный код, подключите перед закрывающим тегом body, например. И не используйте in в качестве переменной, это часть синтаксиса, у Вас там ошибку должно показывать |
это я не дописал. Использую - 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. Теперь вообще ничего не понимаю, полная каша в голове. |
klk.pma,
я же написал Цитата:
<!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); } |
Спасибо! А возможно как-то сделать чтобы все это работало в файле подключаемом в 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> Только, зачем? Какая разница где он подключен? |
Цитата:
Подключать скрипты в конце <body> - стандартная практика, это одна из первых рекомендации по оптимизации скорости сайта. Но если очень хочется - вешаешь обработчик на событие document@DOMContentLoaded (записал условно: объект@событие) - это событие завершения загрузки HTML-кода страницы (и соотв-но, разбора и формирования DOM). Есть еще событие window@load - оно происходит позже - оно ожидает окончания загрузки внешних ресурсов (в основном картинок). Это событие не рекомендуется использовать. |
registrant и danik.js Спасибо вам за помощь и разъяснения!
|
Часовой пояс GMT +3, время: 19:39. |