1 функция для независимой замены innerHTML 4 разных идентификаторов

Вы можете попробовать это;

function changeHTML() {
  var i;
  var numberOfElements = 4;

  for (i = 1; i <= numberOfElements; i++) {         
    var ob = document.getElementById("object"+i);
    var ex = document.getElementById("extra"+i);

    if (ob.innerHTML == "10") {
      ex.innerHTML = "D5";
    }
    if (ob.innerHTML == "9") {
      ex.innerHTML = "1-D4";
    }
    if (ob.innerHTML == "8") {
      ex.innerHTML = "D4";
    }
 }    
}

Одним из вариантов было бы создание функции высшего порядка - функции, в которую вы можете передать идентификаторы объекта и дополнительные данные:

const makeChangeHTML = (objSel, extSel) => {
  const ob = document.getElementById(objSel);
  const ex = document.getElementById(extSel);
  return () => {
    // do tests, assign to `ex`

Но, вероятно, было бы проще, если бы вы использовали объект для возможных значений object и соответствующее значение для перехода в extra, а не несколько очень подробных операторов if:

const extraIndexedByObj = {
  '10': 'D5',
  '9': '1-D4',
  '8': 'D4',
};

const makeChangeHTML = (objId, extId) => {
  const ob = document.getElementById(objId);
  const ex = document.getElementById(extId);
  return () => {
    const { textContent } = ob;
    const extraVaue = extraIndexedByObj[textContent];
    if (extraVaue !== undefined) ex.textContent = extraVaue;
  }
}

Затем вы можете создать функцию, вызвав makeChangeHTML с соответствующими селекторами:

const change1 = makeChangeHTML('object1', 'extra1');
const change2 = makeChangeHTML('object2', 'extra2');

Но, если это возможно, было бы неплохо также изменить ваш HTML - вместо использования отдельного идентификатора для каждого отдельного элемента вы можете дать каждому элементу имя класса, а затем связать n-й object с n-м extra. Идентификаторы здесь не подходят - например:

<div class = "object">10</div>
<div class = "object">10</div>
<div class = "object">10</div>
<div class = "object">10</div>

<div class = "extra"></div>
<div class = "extra"></div>
<div class = "extra"></div>
<div class = "extra"></div>

А затем выберите каждую пару, чтобы вы могли делать с ними все, что вам нужно:

const objects = document.querySelectorAll('.object');
const extras = document.querySelectorAll('.extra');
objects.forEach((object, i) => {
  const extra = extras[i];
  // do something with each `object` and each `extra`
});

Думаю, вам нужно переосмыслить проблему. Вместо проверки условий вы можете использовать объект.

var lookup = {
  "10" : "D5",
  "9" : "1-D4",
  "8" : "D4"
};

function doCheck(inElemId, outElemId) {
  var in = document.getElementById(inElemId);
  var out = document.getElementById(outElemId);

  var key = in.textContent.trim();

  if (lookup.hasOwnProperty(key)) {
    // the lookup object contains the 'key'
    out.textContent = lookup[key];
  }
}

Если идентификаторы элементов являются инкрементными числовыми значениями, вы можете использовать цикл.

[1,2,3,4].forEach(function(ix) {
  doCheck('object'+ix, 'extra'+ix);
});

Для более масштабируемого решения используйте querySelectorAll

function changeHtml()
{
  //Get all elemtents which have an id that starts with "object"
  var sourceElements = document.querySelectorAll("[id^='object']");
  
  for(var i = 0; i < sourceElements.length; i++)
  {
    var value = sourceElements[i].innerHTML;    
    var suffix = sourceElements[i].id.replace("object","");
    var target = document.getElementById("extra" + suffix);
    
    //A switch is better than multiple ifs
    //This could also be easily replace with an object based
    //solution similar to that in other answers.
    switch(value)
    {
      case "10":
        target.innerHTML = "D5";
        break;
      case "9":
        target.innerHTML = "1-D4";
        break;
      case "8":
        target.innerHTML = "D4";
        break;
    }
  }
  
}

changeHtml();

 <div id = "object1">10</div>
  <div id = "object2">9</div>
  <div id = "object3">8</div>
  <div id = "object4">10</div>

  <div id = "extra1"></div>
  <div id = "extra2"></div>
  <div id = "extra3"></div>
  <div id = "extra4"></div>