How could I make it object-oriented

Question

I have a js file which use Storage API. It just save form infos to get them if you have to fill the form again in a new session. It also re-use these infos to put them somewhere else in the page without page refreshing. It's working but I would like to make this in an object-oriented way.

Tried to learn OOP (beginner) and to make a function with the code which isn't in an object working at a window.onload event.

// STORAGE

// Used Elements
let input_textarea = document.querySelector('#firstname_area');
let input_textarea_bis = document.querySelector('#lastname_area');
let chosen_station = document.querySelector('#station')
let output_div = document.querySelector('.personal-greeting');
let output_station = document.querySelector('#custumerstation'); 
let save_button = document.querySelector('.send');

// Onclick start function
save_button.addEventListener('click', updateOutput);

// Saved Elements
output_div.textContent = localStorage.getItem('content');
input_textarea.value = localStorage.getItem('content');
input_textarea_bis.value = localStorage.getItem('contentbis');
chosen_station.innerHTML = sessionStorage.getItem('content');

// Function actions setting saved elements
function updateOutput() {
  localStorage.setItem('content', input_textarea.value);
  localStorage.setItem('contentbis', input_textarea_bis.value);
  output_div.textContent = input_textarea.value;
  output_station.textContent = chosen_station.innerHTML;
}

MounirOnGithub · Accepted Answer · 2019-06-03 15:19:33Z

1

By creating a FormInformation class you could create attributes for the things you need to repeat elsewhere in your app like input text area fields, etc... This way, you could store an instance of FormInformation and set the attributes with the values of what you got while doing document.querySelector() and reuse it

answered Jun 3, 2019 at 15:19

MounirOnGithub

6993 gold badges10 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How could I make it object-oriented

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related