Чистка инпутов - ошибка не для моего уровня.

[MC-XOBAHCK]

Здравствуйте!
У меня ошибка которую я не могу решить из за своего уровня знаний JS. Задача вроде несложная - очистить инпуты от значений, но после инпута стоит span с ед.измерений (переключается радио-кнопками: м, см, мм).
Макет инпутов:

<div><input class="test" type="text"> <span class="unit"> м</span></div>
<div><input class="test" type="text"> <span class="unit"> м</span></div>
<div><input class="test" type="text"> <span class="unit"> м</span></div>

<button class="deleteInputs">Очистить значения</button>

<script>
    document.querySelector('.deleteInputs').addEventListener('click', function () {
        document.querySelectorAll('input').forEach((i) => i.value = null);
    });
</script>

Тут первый вопрос: Какое значение правильно присвоить инпутам при чистке в JS? Я остановился на варианте null, изначально ставил = ''.

Дело в том, что после такой чистки у меня появляется ошибка со скриптом отвечающим за изменение ед. измерений.
Консоль ругается на такой фрагмент кода:

[].forEach.call(node.querySelectorAll('.area'), function (e, i) {
    e.textContent = area[i] ? (area[i] * dim[u].mul).toFixed(2) + ' м' + sqr : '';
});

Консоль подчёркивает красным этот фрагмент: .mul).toFixed(2) + ' м' + sqr : '';
Это 71 строка из кода в этом посте: https://javascript.ru/forum/486772-post6.html

Подскажите, в данном случае стоит отказаться от кнопки очистки или можно поправить код?

[Nexus]

form.reset не пробовали?

[MC-XOBAHCK]

Нет не пробовал. В документации написано что reset это метод для чистки форм, а у меня не форма, у меня блоки div а в них инпуты для ввода чисел (у инпутов тип текст, к ним фильтр прикручен чистить от букв, пробелов и т.п.). Несколько блоков (от 1 до 10), в них инпуты (по 2-4).
Или можно для querySelectorAll поставить reset ?

[Nexus]

А обернуть инпуты в форму нельзя?

[MC-XOBAHCK]

Я не пробовал, не будет ли это ошибкой со стороны HTML если я все блоки оберну одной формой ?
Вот так это визуально выглядит:



Я этот блок создаю в методе classa через createElement, а блоки с инпутами генерю и вставляю в этот элемент:

skatesWiew() {
        let divSize = document.createElement('div');
        divSize.className = 'skates';
        divSize.innerHTML = this.skatSize();
        return divSize;
    }

Мне несложно изменить на let divSize = document.createElement('form');
если так конечно можно.

[Artur_Hopf]

MC-XOBAHCK,

<form id="form">
<input  type="text"/><span class="unit"> м</span>
<input type="text"/><span class="unit"> м</span>
<input type="text"/><span class="unit"> м</span>
<button type="button" onclick="form.reset()">Очистить значения</button>
</form>

[MC-XOBAHCK]

Artur_Hopf,
Я понял - кнопки внутри формы должны быть.
Нужно в createElement исправить:

divSize.innerHTML = this.skatSize() + КНОПКИ;

Сейчас попробую.