Input value to new array

Question

Cześć,

Tworzę prosty kalkulator średnej i mam problem z dodaniem value inputów do array.

Za każym razem tworzy mi nową array. Muszę mieć jedną całą tablicę  liczbami aby wyliczyć średnią..

Druga sprawa jak zrobić maxlenght na input type number i czy jest to możliwe,

i ostatnia jak czyścić input po kliknięciu w btn/enter

<form> 
        <label for="grade">Enter your grade</label>
        <input type="number" name="grade" id="grade" minlength="2" autocomplete="off">
        <button type="submit" class="count">Click</button>
    </form>
    <p class="result"></p>
    <p class="avg"></p>

const btn = document.querySelector(".count");
const result = document.querySelector(".result");
const avg = document.querySelector(".avg");

btn.addEventListener('click', (e) => {
    e.preventDefault();
    const input = document.getElementById("grade").value;
    result.innerHTML = `${input}`;
    const gradeArr = [];
    gradeArr.push(input);
    console.log(gradeArr);
    // avg.innerHTML = `[${gradeArr}]`;

});

 

Answer 1

nie mam odstępów między liczbami jest 1,2,3 zamiast 1, 2, 3.

użyj array.join()

result.textContent = `${gradeArr.join(', ')}`;

 

zostało mi maxlenght na input type number

użyj atrybutów min i max i zdarzenia np.  oninput na <input type="number"> np:

input.addEventListener('input', (e) => {
  const maxlength = 3;
  if (e.target.value.length > maxlength) {
    e.target.value = e.target.value.slice(0, maxlength); 
  }
});

 

gdy próbuję zrobić averge value zbiera mi dane nwm skąd

taki zapis i po sprawie

gradeArr.push(parseInt(input.value));

console.log(typeof input.value);
console.log(typeof parseInt(input.value));

 

 

clear po każdym kliknięciu.

const input = document.querySelector("#grade")

...

btn.addEventListener('click', (e) => {

...

  input.value = '';
});

dodałbym takie zabezpieczenie, gdy input jest "... clear po każdym kliknięciu"  

btn.addEventListener('click', (e) => {
  e.preventDefault();

  if (input.value.length == 0) return false;

...
});

 

Wszystko razem (zmiany), propozycja

<form> 
  <label for="grade">Enter your grade</label>
  <input type="number" name="grade" id="grade" autocomplete="off" min="1" max="999" />
  <button class="count">Click</button>
</form>
<p class="result"></p>
<p class="avg"></p>

const input = document.querySelector("#grade"),
      btn = document.querySelector(".count"),
      result = document.querySelector(".result"),
      avg = document.querySelector(".avg");

const gradeArr = [];

input.addEventListener('input', (e) => {
  const maxlength = 3;
  if (e.target.value.length > maxlength)
    e.target.value = e.target.value.slice(0, maxlength);
});

btn.addEventListener('click', (e) => {
  e.preventDefault();

  if (input.value.length == 0) return false;

  gradeArr.push(parseInt(input.value));
  result.textContent = `${gradeArr.join(', ')}`;

  const reducer = gradeArr.reduce((preValue, currValue) => preValue + currValue);
  const avgValue = reducer / gradeArr.length;
  avg.textContent = avgValue.toFixed(2);
  console.log(`Average value: ${avgValue.toFixed(2)}`);

  const minValue = Math.min(...gradeArr);
  const maxValue = Math.max(...gradeArr);
  console.log(`Lowest value: ${minValue}`);
  console.log(`Highest value: ${maxValue}`);

  input.value = '';
});

 

Answer 2

ok, pierwsze  mi się udało, wystarczyło przenieść pusty array powyżej addEventListener'a.

Teraz mi ładnie dodaje do array liczby z inputu. tylko nie mam odstępów między liczbami jest 1,2,3 zamiast 1, 2, 3.

mam też problem gdy próbuję zrobić averge value zbiera mi dane nwm skąd..

code:

btn.addEventListener('click', (e) => {
    e.preventDefault();

    const input = document.getElementById("grade").value;
    const avg = document.querySelector(".avg");
    
    // result.innerHTML = `${input}`;

    gradeArr.push(input);
    result.innerHTML =  `${gradeArr}`;


    let minValue = Math.min(...gradeArr);
    let maxValue = Math.max(...gradeArr);

    
    
    let reducer = gradeArr.reduce((preValue, currValue) => preValue + currValue);
    console.log(gradeArr);
    let avgValue = reducer / gradeArr.length;
    console.log(`Average value: ${avgValue}`);
    
    avgValue = Math.round(avgValue);
    console.log(`Lowest value: ${minValue}\nHighest value: ${maxValue}`);

});

 

zostało mi maxlenght na input type number i clear po każdym kliknięciu.

Chciałbym też zrobić jakieś ogranicznenie jak duży ma być array( chodzi mi o length )

Comments

Nie musisz przy każdym kliknięciu (addEventListener) "pobierać" element

const avg = document.querySelector(".avg");

to też może być: powyżej addEventListener-a.

Jeśli nie dodajesz do elementu kodu html lepiej jest użyć textContent zamiast innerHTML