как добавить элементы массива вместо объединения их в строки

Question

Мне нужна помощь. Я пытаюсь создать приложение, которое вычисляет среднее значение заданных чисел. Тем не менее, я новичок, и мои функции массива не всегда работают. Мне удалось отобразить введенные числа, но теперь я хочу добавить их и рассчитать среднее значение. Я почти на месте. Чтобы вычислить среднее значение, я разделю сумму на длину массива. Но я не могу добавить числа из массива для добавления. Они объединяются или отображается Нэн. Должен ли я где-то использовать метод Number()?

Кстати, я знаю, что для некоторых из вас этот вопрос может показаться жалким, но я самоучитель и немного старожил, поэтому, пожалуйста, не понижайте оценку этого вопроса. Я пытался найти ответы в Google, но они не решили проблему.

let numbersEntered = document.querySelector("#numbersEntered");
let inputEl = document.querySelector("#input");
let numArr = [];


// buttons
let enterBtn = document.querySelector("#enter");
let avgBtn = document.querySelector("#avg");

enterBtn.addEventListener("click", displayNums);

function displayNums() {
  let newNumber = Number(inputEl.value);
  numArr.push(newNumber);
  numbersEntered.innerHTML = "";
  console.log(numArr);

  for (let i = 0; i < numArr.length; i++) {
    numbersEntered.innerHTML += numArr[i] + ",";
  }
}

avgBtn.addEventListener("click", displayAvg);

// the below code is totally useless - I can't get the right sum 
function displayAvg() {
  let total = 0;
  for (let i = 0; i < numArr.length; i++) {
    total += numArr[i];
    console.log(total);
  }
}

<input type="text" id="input" />
<button id="enter" type="button">Enter</button>
<p id="numbersEntered"></p>
<button id="avg" type="button">Average</button>
<p id="average"></p>
</div>

javascript

0

TomDev 26 Янв 2022 в 16:23

Почему бы вам попробовать использовать Number?

–

Scott Hunter

26 Янв 2022 в 16:25

let newNumber = inputEl.value; - поскольку вы читаете это из поля ввода текста, очевидно, это тоже будет текст. Вам нужно явно попытаться преобразовать его в число

–

UnholySheep

26 Янв 2022 в 16:26

Вроде работает, но выдает три числа, а мне нужен только последний

–

TomDev

26 Янв 2022 в 16:29

Вы можете полностью избавиться от этой головной боли, сделав ввод type="number" вместо type="text", но по какой-то причине, если вы хотите поддерживать пробелы, запятые и т. д., вы можете преобразовать его в число, а затем вставить его в массив, остальная логика lgtm

–

tsamridh86

26 Янв 2022 в 16:30

Отвечает ли это на ваш вопрос? Как добавить два значения в javascript

–

Heretic Monkey

26 Янв 2022 в 16:38

Answer 1

Разобрать значение в число, в настоящее время оно имеет тип строки

let numbersEntered = document.querySelector("#numbersEntered");
let average = document.querySelector("#average");

let inputEl = document.querySelector("#input");
let numArr = [];


// buttons
let enterBtn = document.querySelector("#enter");
let avgBtn = document.querySelector("#avg");

enterBtn.addEventListener("click", displayNums);

function displayNums() {
  let newNumber = inputEl.value;
  numArr.push(parseInt(newNumber));
  numbersEntered.innerHTML = "";
  for (let i = 0; i < numArr.length; i++) {
    numbersEntered.innerHTML += numArr[i] + ",";
  }
}

avgBtn.addEventListener("click", displayAvg);

// the below code is totally useless - I can't get the right sum 
function displayAvg() {
  let total = 0;
  for (let i = 0; i < numArr.length; i++) {
    total = total + numArr[i];
  }
  average.innerHTML = total/numArr.length
}

<input type="number" id="input" />
<button id="enter" type="button">Enter</button>
<p id="numbersEntered"></p>
<button id="avg" type="button">Average</button>
<p id="average"></p>

0

sojin 26 Янв 2022 в 16:39

Answer 2

Вы почти у цели... просто рассчитайте среднее значение за пределами for

let numbersEntered = document.querySelector("#numbersEntered");
let inputEl = document.querySelector("#input");
let numArr = [];


// buttons
let enterBtn = document.querySelector("#enter");
let avgBtn = document.querySelector("#avg");

enterBtn.addEventListener("click", displayNums);

function displayNums() {
  let newNumber = Number(inputEl.value);
  numArr.push(newNumber);
  numbersEntered.innerHTML = "";
  console.log(numArr);

  for (let i = 0; i < numArr.length; i++) {
    numbersEntered.innerHTML += numArr[i] + ",";
  }
}

avgBtn.addEventListener("click", displayAvg);

// the below code is totally useless - I can't get the right sum 
function displayAvg() {
  let total = 0;
  for (let i = 0; i < numArr.length; i++) {
    total += numArr[i];
  }
  // FIXED HERE
  console.log(total/numArr.length);
}

<input type="text" id="input" />
<button id="enter" type="button">Enter</button>
<p id="numbersEntered"></p>
<button id="avg" type="button">Average</button>
<p id="average"></p>
</div>

0

Patrick Ferreira 26 Янв 2022 в 16:40

Answer 3

В вашей функции displayNums

В настоящее время вы вводите массив в виде текстовых/строковых значений, и при добавлении он связывается с номерами, поскольку это текст. например «23», должно быть просто 23.

Измените его на:

 let newNumber = Number(inputEl.value);
 numArr.push(newNumber);

Рабочая скрипка здесь - https://jsfiddle.net/La8z52rn/

0

H_H 26 Янв 2022 в 16:42

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

–

TomDev

26 Янв 2022 в 16:32

Просто отобразите console.log из цикла for @TomDev после завершения расчета

–

innocent

26 Янв 2022 в 16:36

1

Добавлена рабочая демонстрация - jsfiddle.net/La8z52rn

–

H_H

26 Янв 2022 в 16:42

как добавить элементы массива вместо объединения их в строки

3 ответа

Похожие вопросы

Связанные вопросы

Новые вопросы

javascript