Попытка упростить эту функцию, чтобы мне не пришлось запускать ее 9 раз

Question

Я строю ежедневник. Я выяснил, как сохранить локальное хранилище на одночасовое поле, но мне нужно упростить эту функцию, чтобы мне не приходилось писать ее 8 раз. Может ли кто-нибудь указать мне правильное направление, чтобы я мог использовать эту функцию 1 на каждом поле часа.

ie: 7 утра. 8 утра. 9 утра.

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

Вы можете использовать некоторый атрибут данных, чтобы у каждой кнопки был «номер» для ссылки на необходимую текстовую область.

Вы должны изменить кнопки, чтобы у каждой из них был свой 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>

и затем обновите вашу функцию save_data() до:

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

. И чтобы инициализировать значения из localStorage, вы можете использовать for l oop, например:

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

ПРИМЕЧАНИЕ: я использовал var с тех пор, как вы это сделали. Пожалуйста, рассмотрите возможность использования более новой версии javascript и используйте let и const вместо.