Нажатие на кнопку приводит к ошибке Bad Path

Question

Я пытаюсь сделать ручку, которая включает в себя упражнения javascript, которые я изучаю. Вот ручка: https://codepen.io/ychalfari/pen/JVYoNW

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

Когда я нажимаю кнопку, я либо получаю сообщение об ошибке: "Bad Path /boomboom/index.html"

или ничего не происходит, страница просто перезагружается, и это приводит меня к началу страницы.

HTML

<form id="sum-arr-form"> 
  <div class="form-wrap" >
    <label for="arr-to-sum"> Enter an Array to sum: <input id="arr-to-sum" class ="med-input" type="text" value = ""> 
<button class="btn1" onclick ="sumOfArray()">submit</div> </form>
      <p>Result: <span id="demo"></span></p>

Javascript

let inputArr = document.getElementById('arr-to-sum').value;
const add = (a,b) => a+b;
const sumOfArray = function() {
  let sum = inputArr.reduce(add);
  document.getElementById("demo").innerHTML = sum;};

Answer 1

В вашем коде есть некоторые ошибки (тег кнопки без типа приведет к отправке)

<button class="btn1" onclick ="sumOfArray()">submit

изменить эту строку на

<input type="button "class="btn1" onclick ="sumOfArray()" value="submit">

затем получите значение ввода внутри вашей функции sumOfArray. (добавьте следующие 2 строки в вашу функцию sumOfArray) (ответ waynelpu выше)

 let inputArrStr = document.getElementById('arr-to-sum').value;
 let inputArr = JSON.parse(inputArrStr);

Answer 2

Значение, полученное из ввода, является строкой, если вы хотите обработать его как массив, который нужно преобразовать в правильный тип в js, попробуйте

let inputArrStr = document.getElementById('arr-to-sum').value;
let inputArr = JSON.parse(inputArrStr);