var x= document.getElementById('i1').value;
var y= document.getElementById('i2').value;
var z= document.getElementById('i3').value;
var a= document.getElementById('i4').value;
x, y, z, a - это не массив, его нельзя так складывать.
при обработке строки как к массиву вы получаете string, a не int
da= x + y + z + a или попробуйте преобразовать через parseInt
var btn = document.querySelector('#btn');
var di = document.querySelector('#di');
btn.onclick = function () {
var x = document.querySelector('#i1').value;
var y = document.querySelector('#i2').value;
var z = document.querySelector('#i3').value;
var a = document.querySelector('#i4').value;
di.innerHTML = x[3] + y[2] + y[3] + y[0] + y[2] + x[6] + z[1] + z[1] + z[0] + y[2] + z[2] + a[5];
}
Проблема. Когда вы только вводите что-то в поле, предположим только 1 символ, там разумеется нет y[3] и в таком случае получаете undefine + undefine - получаете NaN.
Вам нужно подумать над дополнительной проверкой, как пример на длину строки
У вас переменные инициализируются сразу, когда инпуты пустые, соответсвенно там undefined
Потом вы пытаетесь сложить 2 undefined. Второй преобразуется в NaN и получается что выводится NaN
На каждом клике смотрите значения.