123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106 |
- <head>_____</head>
- <body>
- <script>
- function getSetForm(parent, getSet) {
- const typesMap = { 'boolean': 'checkbox', 'number': 'number', 'string': 'text' };
- const inputs = {} //реестр
- const updateInputs = () => {
- for (key in inputs) {
- getName = "get" + key;
- getFunc = getSet[getName];
- if (getFunc) {
- inputs[key].value = getFunc();
- }
- }//функция обновления полей ввода согласно всяким get....
- //тут должен быть перебор
- }
- for (const getSetName in getSet) {
- const isGet = getSetName.startsWith("get");//первые три буквы переменной getSetName. Так же можно использовать флаг isGet, который будет равен true или false
- const fieldName = getSetName.substring(3);//остальные буквы getSetName - типа "Name" или "FullName"
- //const setKey = `set` + fieldName
- //const getKey = `get` + fieldName
- input = inputs[fieldName];
- if (!input) {
- input = document.createElement("input");
- inputs[fieldName] = input;
- input.placeholder = fieldName;
- input.disabled = true;
- parent.append(input);
- }
- if (isGet) {
- value = getSet[getSetName]();
- type = typeof value;
- htmlType = typesMap[type];
- input.type = htmlType;
- input.value = value;
- }
- else {
- input.disabled = false;
- input.oninput = () => {
- getSet[getSetName](input.value);
- updateInputs();
- }
- }
- console.log(input);
- /* const typesMap = { 'boolean': 'checkbox', 'number': 'number', 'string': 'text' };
- let str = "<form>\n";
- for (var name in obj) {
- value = obj[name];
- type = typeof value;
- htmlType = typesMap[type];
- str += ` <label>${name}: <input type="${htmlType}" value="${value}" /></label>\n`;
- }*/
- //допишите тут все шо надо, и не только тут
- }
- updateInputs()
- }
- let car;
- {
- let brand = 'BMW', model = 'X5', volume = 2.4
- car = {
- getBrand() {
- return brand
- },
- setBrand(newBrand) {
- if (newBrand && typeof newBrand === 'string') {
- brand = newBrand
- }
- return brand
- },
- getModel() {
- return model
- },
- setModel(newModel) {
- if (newModel && typeof newModel === 'string') {
- model = newModel
- }
- return model
- },
- getVolume() {
- return volume
- },
- setVolume(newVolume) {
- if (newVolume && typeof newVolume === 'number' && newVolume > 0 && newVolume < 20) {
- volume = newVolume
- }
- return volume
- },
- getTax() {
- return volume * 100
- }
- }
- }
- getSetForm(document.body, car);
-
- </script>
- </body>
|