1var sum = 0;
2for(var i=0; i< arr1.length; i++) {
3    sum += arr1[i]*arr2[i];
4}
5

1<!-- Multiplying two numbers in HTML and Javascript -->
2
3<main>
4<label for="firstNum">Number 1:</label>
5<input type="number" id="firstNum" name="firstNum">
6
7<label for="secondNum">Number 2:</label>
8<input type="number" id="secondNum" name="secondNum"></br></br>
9
10<button onclick="multiply()">Multiply</button></br></br>
11
12<label for="result">Result</label>
13<input type="number" id="result" name="result"/>
14</main>
15
16<script>
17function multiply(){
18	num1 = document.getElementById("firstNum").value;
19	num2 = document.getElementById("secondNum").value;
20	result = num1 * num2;
21	document.getElementById("result").value = result;
22}
23</script>

1The cause is already known. Here's an alternative - using Array.reduce for your method:
2
3console.log( [1, 2, 3].reduce( (a, b) => a * b ) );
4console.log( Array.from( {length: 20} )
5  .map( (v, i) => i + 1 )
6  .reduce( (a,b) => a * b )
7  .toLocaleString());
8
9// for empty arrays, use some initial value
10const arr = [];
11if (arr.reduce( (a, b) => a * b, -1 ) === -1) {
12  console.error(`The given array ${arr} is empty`);
13}