alexalexes

currentStyle - это то, что описано в CSS-селекторе или в атрибуте style, или программно дополненный elem.style (как хочет разработчик описать стили).
runtimeStyle - это то, как смог нарисовать браузер заданный стиль.
В современном JS, условно currentStyle можно считать, то что мы достанем или записываем из/в elem.style.свойствоЕлемента, а runtimeStyle - это всякие offset-ы и client-ы - elem.offsetWidth, elem.offsetHeight и тд.
PS: попробуйте поиграться с currentStyle и runtimeStyle над таблицей с заполненными данными с разной степенью распиранием ячеек. Попытаться изменить ширину ячеек - вы поймете разницу, где браузер откликнется на заданную ширину, а где - нет.

В обработчике addItem(id) пробежаться по DOM через дескриптор события event до img и h2, содержащийся в article.

var article = e.target.parentNode.parentNode;
var src = article.getElementsByTagName('img')[0].getAttribute('src');
var title = article.getElementsByTagName('h2')[0].innerHTML;

Только если собрались тащить эти параметры в список корзины, то оно нафиг не сдалось. Получайте заново параметры выбранного товара по его id. Выцарапывать свойства из уже отображенной формы представления - это костылизация.

Повесьте на тег аудио обработчик события onended, который будет подставлять src следующего трека.

var audio = new Audio();
audio.onended = function(e)
{
  var target = e.target;
  var cur_src = target.getAttribute('src');
  switch(cur_src)
  {
     case '1.mp3': target.setAttribute('src', '2.mp3'); break;
     case '2.mp3': target.setAttribute('src', '3.mp3'); break;
     case '3.mp3': target.setAttribute('src', '1.mp3'); break;
  }
  target.play();
};
audio.setAttribute('src', '1.mp3');
audio.autoplay = true;

PS: обязательно предусмотрите возможность останавливать фоновую музыку, и запоминать это действие в куках, иначе пользователи проклянут вас и ваш сайт, так как фон надоедает примерно через минуту, а то и раньше.)))

Вот, собственно, решение:

<input type="button" onclick="calc_table_add_row()" value="Добавить"/>
<div id="calc_table" class="table"></div>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script>
      // функция для добавления вычисляемой строки
      function calc_table_add_row()
      {
        //Элементы input подписаны на события onkeypress и onblur, что позволяет делать пересчет как при непосредственном изменении значения, так и во время потери фокуса
        $('#calc_table').append(
        '<div class="tr">\
           <div class="td">' + ($('#calc_table>div.tr').length + 1 /* это нумератор строки, добавляется номер от существующего кол-ва строк */) + '</div>\
           <div class="td">\
             <input type="text" onkeypress="calc_table_recalc_row(event)" onblur="calc_table_recalc_row(event)"/></div>\
           <div class="td"><input type="text" onkeypress="calc_table_recalc_row(event)" onblur="calc_table_recalc_row(event)"/></div>\
           <div class="td"><input type="text" onkeypress="calc_table_recalc_row(event)" onblur="calc_table_recalc_row(event)"/></div>\
           <div class="td"></div>\
           <div class="td"></div>\
         </div>'
        ); 
      }
      // функция-обработчик пересчета значений в строке
      function calc_table_recalc_row(e)
      {
        var cur_input = e.target; // на этом элементе произошло событие (input)
        var cur_td = cur_input.parentNode; // получаем родительский элемент (div.td, в котором нажодится затронутый input)
        var cur_tr = cur_td.parentNode; // получаем родительский элемент (div.tr, в котором нажодится div.td с затронутым input)
        var td_divs = $(cur_tr).find('div.td'); // находим все элементы div.td на данной строке
        try // если возникнет какая-то ошибка, то тихо прекратим вычисления
        {
          var input1 = parseFloat($(td_divs[1]).find('input')[0].value); // получаем значение ячейки 2
          var input2 = parseFloat($(td_divs[2]).find('input')[0].value); // получаем значение ячейки 3
          var input3 = parseFloat($(td_divs[3]).find('input')[0].value); // получаем значение ячейки 4
          if(!isNaN(input1) && !isNaN(input2) && !isNaN(input3)) // все ли значения получились числами вещественными ?
          {
            var result4 = input3 / input2; // считаем результат для ячейки 5
            $(td_divs[4]).html( (result4).toFixed(2) ); // записываем результат в ячейку 5 с округлением до 2 знаков
            $(td_divs[5]).html( (result4 * (input1.toFixed(2) == 10.00 ? 0.1 : 5)).toFixed(2) ); // считаем и записываем результат в ячейку 6 с округлением до 2 знаков
          }
        }
        catch(ex)
        {
        }
      }
</script>

а) Вероятно, один из компонентов страницы не прогрузился до конца.
https://learn.javascript.ru/onload-ondomcontentloaded
Есть несколько разных обработчиков, и они срабатывают на разную полноту контента страницы.
На плоскости JQuery такое же разнообразие.
front-end.su/2016/02/12/load-events
б)

if(!preloader.classList.contains('done'))

Хотите большую поддержку браузерами и с легкой руки используете свежие методы: classList.
Разработчик обязан страдать, применяя решения и используя более устаканенные методы, если хочет широкий охват поддержки браузерами:

if(preloader.getAttribute('class').indexOf('done') == -1)

PS: Или не обязан, если подключить JQuery.)

Можно.

function highlightcurrent(items, index) 
{
  if(index != 2) // выходим из функции, если достигли определенного индекса
  {
    items.removeClass("highlightcurrent");
    items.eq(index).addClass('highlight');  
    items.eq(index).addClass('highlightcurrent');   
    setTimeout(function()
    {
      highlightcurrent(items, index + 1)
    }, 1000);
  }
}

highlightcurrent($('.progress-page-tabs-col'), 0);

Геттеры и сеттеры.
Только если ваша переменная является свойством объекта, тогда вы можете задать свою set-функцию, которая не требует от остальной части скрипта какой-то модификации.
На глобальной переменной my_var делается это так:

Object.defineProperty(window /*- объект, где располагается свойство */, "my_var" /* - свойство, которое нужно опекать */,
{
  get: function() // сторожим чтение значения
  {
    alert('Кто-то прочилал my_var!');
  },
  set: function(newValue) // сторожим запись значения
  {
    alert('Кто-то записал my_var! Новое значение: ' + newValue);
  }
});
my_var = 123456;  // пробуем записать что-то
you_var = my_var; // пробуем извлечь значение

Управляйте видимостью вашей ссылки по событию кнопки onclick.
Какие тут проблемы могут возникнуть-то у вас?

<a id="my_link" href="https://vk.com/durov" target="_blank" style="display: none;">
  <img src="img/57d3d0a9e386c157136717cc.png" width="30px"/>
</a> 
<input type = "button" onclick = "document.getElementById('my_link').style.display = 'inline';" value = "связаться со мной" />

Потому что к элементу, на котором произошло событие, нужно выходить через e.target, то есть использовать дескриптор события e.

pole.onclick = function(e)
  {
      if(e.target.getAttribute('class') != 'pole-blue')
      {
          e.target.setAttribute('class', 'pole-blue');
      }
  }

Еще момент, переменная через var должна быть объявлена один раз, переопределять через var нельзя.

var pole = null;
for(var i = 0;i<10;i++)
{
  pole = document.createElement('div');

Как говорится, смотри в учебнике.

Объекты могут быть отсортированы по значению одного из своих свойств.

var items = [
  { name: 'Edward', value: 21 },
  { name: 'Sharpe', value: 37 },
  { name: 'And', value: 45 },
  { name: 'The', value: -12 },
  { name: 'Magnetic' },
  { name: 'Zeros', value: 37 }
];
items.sort(function (a, b) {
  if (a.name > b.name) {
    return 1;
  }
  if (a.name < b.name) {
    return -1;
  }
  // a должно быть равным b
  return 0;
});