У вас возникли проблемы с заменой и хранением чисел в массиве с помощью текстового поля

У меня возникли проблемы с тем, что мой onchange не работает и не хранит числа в массиве через текстовое поле.
Что я хочу сделать код - это получить статистику по номерам, введенным в текстовое поле. Я делаю это, вводя номера пользователей в текстовое поле и нажав клавишу Enter, чтобы отобразить эти числа. Цифры должны быть помещены в массив, прежде чем помещаться в список для отображения введенных чисел. Тем не менее, я продолжаю получать эту ошибку, когда onchange не запускается при нажатии клавиши Enter или нажатии текстового поля.У вас возникли проблемы с заменой и хранением чисел в массиве с помощью текстового поля

Here is an image of the error I am getting when inspecting the code

С номерами, хранящихся в массиве, я хочу, чтобы попытаться получить среднее значение чисел. Но я продолжаю получать ошибку «NaN», которая заставляет меня думать, что мои номера не хранятся в массиве должным образом.

Вот код:

<html> 
<head> 
    <title>Stats</title> 
</head> 

<p>Array is called numbers. numbers.sort();</p> 

<div id="stats"> 

    <input type ="text" id="value" onchange="list()"> <!-- Getting the Onchange Error here --> 

    <button id="button1" onclick = "list()">Enter</button> 

    <ul id="list1"> 
    </ul> 

<button id="stat_button" onclick="calculateMean()">Get Statistics</button> 

<p id="mean">Mean= </p> 

</div> 



<script> 

function list() { 

     var liElement = document.createElement("li"); //Creating new list element// 

     var ulElement = document.getElementById("list1"); //Get the ulElement// 

     var input = document.getElementById("value").value; //Get the text from the text box// 

     var numbers = []; //create Array called numbers 
     numbers.push(input);//adds new items to the array 

     //for loop// 
     for(var i=0; i < numbers.length; i++) { 
     liElement.innerHTML = numbers[0]; //Puts the array into the list for display// 
     ulElement.appendChild(liElement); //add new li element to ul element// 
     } 
    } 


function calculateMean() { 

     var meanTotal = 0; 
     var meanAverage = 0; 
     var meanArray = []; 

     for (var i = 0; i < meanArray.length; i++) { 
     meanTotal += meanArray[i]; 
     } 
     meanAverage = (meanTotal/meanArray.length); 

     document.getElementById("mean").innerHTML = meanAverage; 

} 

</script>

источник

2016-10-13 Mizan Shaikh

Не уверен, что о 'onchange' проблемы, но' numbers.push (вход) 'добавит * один * элемент массива, строка, содержащая whatev пользователь вводит в поле. Вероятно, вам нужно что-то вроде 'numbers = input.split (/ [,] + /)', чтобы создать массив, разделив строку на запятую и/или пробелы. – nnnnnn

Попробуйте добавить его через addEventListener вместо встроенного так:

document.getElementById('value').addEventListener('change', function(e){ 
    list() 
})

источник

2016-10-13 23:02:46

Эй, большое вам спасибо за ваш вклад. Добавление прослушивателя событий вместо встроенного исправления этой ошибки. –

Причина Mean всегда NaN потому, что ваш средний массив всегда пустой массив, когда вы начинаете. Я думаю, вы ссылались на массив numbers.

Вам придется объявить массив вне сферы действия двух функций, так как он является общим для обоих.

И всегда лучше отделить Javascript и HTML. Свяжите свои события в JS вместо встроенных обработчиков событий.

Примечание: Когда вы читаете значение со входа, это строка, поэтому преобразуйте ее в число перед сохранением в массиве numbers.

HTML

<p>Array is called numbers. numbers.sort();</p> 

<div id="stats"> 

    <input type="text" id="value"> 
    <!-- Getting the Onchange Error here --> 

    <button id="button1">Enter</button> 

    <ul id="list1"> 
    </ul> 

    <button id="stat_button">Get Statistics</button> 

    <p id="mean">Mean= </p> 

</div>

document.getElementById('value').addEventListener('change', list); 
document.getElementById('button1').addEventListener('click', list); 
document.getElementById('stat_button').addEventListener('click', calculateMean); 

var numbers = []; 

function list() { 
    var liElement = document.createElement("li"); //Creating new list element// 

    var ulElement = document.getElementById("list1"); //Get the ulElement// 

    var input = document.getElementById("value").value; //Get the text from the text box// 

    numbers.push(input); //adds new items to the array 

    //for loop// 
    for (var i = 0; i < numbers.length; i++) { 
    liElement.innerHTML = numbers[0]; //Puts the array into the list for display// 
    ulElement.appendChild(liElement); //add new li element to ul element// 
    } 
} 

function calculateMean() { 

    var meanTotal = 0; 
    var meanAverage = 0; 

    for (var i = 0; i < numbers.length; i++) { 
    meanTotal += numbers[i]; 
    } 
    meanAverage = (meanTotal/numbers.length); 

    document.getElementById("mean").innerHTML = meanAverage; 
}

jsFiddle

источник

2016-10-13 23:06:58

Эй! Спасибо за совет о прослушивании событий, а не inline. Это, казалось, очистило ошибку, связанную с обменом. Объявление массива вне функций также имеет большой смысл, потому что я буду использовать его для нескольких функций. –

@MizanShaikh Добро пожаловать :) –

В вашем jsFiddle я заметил, что цифры, которые вы помещаете в массив, отображаются как 1 вместо введенного числа. Также Средство, по-видимому, не правильно вычисляется. Есть ли способ, который вы можете обновить, чтобы я мог лучше понять, как вычислить Среднее значение с числами в массиве? Спасибо вам! –

У вас возникли проблемы с заменой и хранением чисел в массиве с помощью текстового поля

ответ

Смежные вопросы