Передача значения элемента без применения атрибута
Добрый день!
Я на сайте использую вот такой вариант: <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, время: 18:43. |