12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091 |
- <head>getSetForm</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();
- }
- }
- }
- 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
- let input = inputs[fieldName];
- if (!input) {
- input = document.createElement("input");
- inputs[fieldName] = input;
- input.placeholder = fieldName;
- input.disabled = true;
- parent.append(input);
- }
- if (isGet) {
- let value = getSet[getSetName]();
- let type = typeof value;
- let htmlType = typesMap[type];
- input.type = htmlType;
- input.value = value;
- }
- else {
- input.disabled = false;
- input.oninput = () => {
- value = input.value;
- if (input.type == "number")
- value = +value;
- getSet[getSetName](value);
- 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) {
- type = typeof newVolume;
- if (newVolume && typeof newVolume === 'number' && newVolume > 0 && newVolume < 20) {
- volume = newVolume
- }
- return volume
- },
- getTax() {
- return volume * 100
- }
- }
- }
- getSetForm(document.body, car);
- </script>
- </body>
|