Trying to simplify this function so I don't have to run it 9 times

Question

I am building a day scheduler. I figured out how to save my local storage on a single hour field, but I need to simplify this function so I don't have to write it 8 times. Can someone point me in the right direction so I can use this 1 function on each hour field.

ie: 7am. 8am. 9am.

 function setColor(element, color) { element.style.backgroundColor = color; } //6am function save_data() { var input = document.getElementById('textArea6').value; localStorage.setItem('text6', input); } document.getElementById('textArea6').value = localStorage.getItem('text6'); //7am function save_data() { var input = document.getElementById('textArea7').value; localStorage.setItem('text7', input); } document.getElementById('textArea7').value = localStorage.getItem('text7'); let textArea = ['textArea6', 'textArea7', 'textArea8', 'textArea9', 'textArea10', 'textArea11', 'textArea12', 'textArea12', 'textArea14'] let textContent = ['text6', 'text7', 'text8', 'text9', 'text10', 'text11', 'text12', 'text13', 'text14'] let textKet = []; textArea({ id: 'textArea6', value: 'text6' })

 <div class="row" id='6'> <div class='col-2 hour'> 6am </div> <div class="col-8 form-group"> <textarea class="form-control bg-transparent" id="textArea6" name="text6" rows="1"></textarea> </textarea> </div> <div class="col-2 saveBtn"> <button onclick='save_data()' type="submit" id="" class="btn btn-primary mb-2">Save</button> </div> </div> <div class="row" id='7'> <div class='col-2 hour'> 7am </div> <div class="col-8 form-group"> <textarea class="form-control bg-transparent" id="textArea7" name="text7" rows="1"></textarea> </textarea> </div> <div class="col-2 saveBtn"> <button onclick='save_data()' type="submit" id="" class="btn btn-primary mb-2">Save</button> </div> </div>

Answer 1

You could use some data-attribute so each button has a 'number' to reference the needed textarea.

You should change the buttons so each one has a different data-num :

<div class="row" id='6'>
  <div class='col-2 hour'> 6am
  </div>
  <div class="col-8 form-group">
    <textarea class="form-control bg-transparent" id="textArea6" name="text6" rows="1"></textarea>
    </textarea>
  </div>

  <div class="col-2 saveBtn">
    <button onclick='save_data(this)' data-num="6" type="submit" id="" class="btn btn-primary mb-2">Save</button>
  </div>
</div>

<div class="row" id='7'>
  <div class='col-2 hour'> 7am
  </div>
  <div class="col-8 form-group">
    <textarea class="form-control bg-transparent" id="textArea7" name="text7" rows="1"></textarea>
    </textarea>
  </div>

  <div class="col-2 saveBtn">
    <button onclick='save_data(this)' data-num="7" type="submit" id="" class="btn btn-primary mb-2">Save</button>
  </div>
</div>

and then update your save_data() function to:

function save_data(e){
    var number = $(e).data('num');
    var input = document.getElementById('textArea' + number).value;
    localStorage.setItem('text' + number, input);
}

And to initialize the values from the localStorage you could use a for loop like this:

for(var i = 6; i <= 14; i++){
    document.getElementById('textArea' + i).value = localStorage.getItem('text' + i);
}

NOTE: i used var since you did. Please consider using a newer version of javascript ans use let and const instead.