Вывод данных в инпут
Привет всем!
Есть три поля:
<div id="infoWrapper">
<p>Ширина: <input type="text" id="width"></p>
<p>Высота: <input type="text" id="height"></p>
<p>Площадь: <input type="text" id="area"></p>
</div>
Нужно выводить значения в данные поля при действии пользователя. Чтобы выводить значения в каждое поле я сохраняю каждый html-элемент поля в его переменную. Иногда нужно вывести значение только в 1 поле, иногда - в 2-х, иногда в 3-х, по-этому я сделал некую универсальную фун-я render(), в которую передаётся объект и в которой обрабатываются все случаи:
function render (data) {
for ( var key in data ) {
if ( key == "width" ) {
widthInput.val( data[key] );
}
if ( key == "height" ) {
heightInput.val( data[key] );
}
if ( key == "area" ) {
areaInput.val( data[key] );
}
}
}
Это получается какой-то ужас, а если добавятся ещё 5 полей - функция растянется и тд. И выглядит некрасиво и вообще, пока это простые 3 поля, если усложнить всё - будет головная боль. Как можно по-нормальному организовать вывод значений? Может как-то используя шаблонизаторы? Посоветуйте. |
lammeR,
:-?
function render (data) {
var Input, key;
for (key in data) {
if (Input = document.getElementById(key)) {
Input.value = data[key];
}
}
}
|
рони, дело в том, что id-названия другие, типа widthRoomInput, это здесь я написал для простоты примера. Ещё минус в том, что каждый раз надо искать элементы по id. И ещё забыл указать, что значения у меня выводятся при движении мышки - потому я и сохраняю инпуты в переменные.
|
Цитата:
<html>
<head>
</head>
<body>
<div id="infoWrapper">
<p>Ширина: <input type="text" id="width"></p>
<p>Высота: <input type="text" id="height"></p>
<p>Площадь: <input type="text" id="area"></p>
</div>
<script type="text/javascript">
var myInputs = {};
Array.prototype.forEach.call(document.querySelectorAll('input'), function (ths)
{
myInputs[ths.getAttribute('id')] = ths;
})
console.log(myInputs);
</script>
</body>
</html>
тогда ваша функция будет выглядеть как то так:
function render (data) {
for ( var key in data ) {
myInputs[key].value = data[key];
}
}
|
skrudjmakdak, в итоге я так и сделал.
|
| Часовой пояс GMT +3, время: 23:02. |