How to Append Value to an Array from Input Text in Javascript?-CodePudding

I'm finding DOM manipulation tricky. I have written a function that uses the filter method on an array with numbers that are divisible by two.

The function evenNums works. I want to use the push() method to push numbers from the input text field to the array and display the result from the function evenNums on the page.

HTML

<!DOCTYPE html>
<html>
  <head> </head>
  <body>
    <label for="text">Enter Text</label>
    <input id="myText" type="text" />

    <input type="radio" />
    <label for="function">Function 1</label>

    <input type="radio" />
    <label for="function">Function 2</label>

    <button id="btn">Click Me</button>

    <div id="result"></div>

    <script src="array.js"></script>
  </body>
</html>

ignore the radio buttons. This is my Javascript

const inputBtn = document.getElementById("btn")
const myText = document.getElementById("myText")
const result = document.getElementById("result")

//function 1 filter method on array. 
const nums = [1,2,3];
const answer = nums.filter(evenNums);  

function evenNums(nums) {

  if (nums%2 == 0) {
      return nums
        
  }  
  }
  result.innerHTML = answer;
  console.log(nums) // original array 
  console.log(answer) // array using filter method



//How do I push a value from the user to the array?  
inputBtn.addEventListener ("click", function() {

   nums.push(myText.value); 
   myText.value ='';
   evenNums(nums);

  });

This is how far I've got. How do I push a value from the user to the array and display it on the page? Am I close?

Thanks for all your help!

CodePudding user response：

Seems like you are on the right track. After you push the user's input to the array, you can display the result of filtered array on the page by setting the innerHTML attribute.

Just calling the function on its own is not going to do anything for you.

document.getElementById("result").innerHTML = nums.filter(evenNums);

CodePudding user response：

What you are doing is almost correct, just make sure you call the filter and set the textcontent when clicking the button. Also the value is a string, you will have to parseInt() it to do the even / odd calculation. It is also safer to use textcontent instead of innerHTML.

const inputBtn = document.getElementById("btn")
const myText = document.getElementById("myText")
const result = document.getElementById("result")

const nums = [1, 2, 3];
inputBtn.addEventListener("click", function() {
  nums.push(parseInt(myText.value));
  myText.value = '';
  const answer = nums.filter(evenNums);
  function evenNums(nums) {
    if (nums % 2 == 0) {
      return nums
    }
  }
  result.textContent = answer;
});

<label for="text">Enter Text</label>
<input id="myText" type="text" />
<button id="btn">Click Me</button>
<div id="result"></div>

Just a sidenote: filter() expects a boolean as return value, the reason your filter works is because you return nums which is seen as truthy.

This should be better.

const nums = [1, 2, 3];
const answer = nums.filter(evenNums);

function evenNums(nums) {
  if (nums % 2 == 0) {
    return true;
  }
}

console.log(answer);

You could simplify your filter to.

const nums = [1,2,3];
const answer = nums.filter(n => n % 2 === 0);  

console.log(answer);

Because (x === y) returns a boolean.

The short answer would be.

const inputBtn = document.getElementById("btn")
const myText = document.getElementById("myText")
const result = document.getElementById("result")

const nums = [1, 2, 3];
inputBtn.addEventListener("click", function() {
  nums.push(parseInt(myText.value));
  myText.value = '';
  result.textContent = nums.filter(n => n % 2 === 0);
});

<label for="text">Enter Text</label>
<input id="myText" type="text" />
<button id="btn">Click Me</button>
<div id="result"></div>

CodePudding user response：

Here is how to push and filter even numbers on click.

var numberEl = document.getElementById("number");
var buttonEl = document.getElementById("button");
var numbers = [];

buttonEl.addEventListener("click", function () {
  numbers.push(parseInt(numberEl.value, 10));
  numbers = numbers.filter(isEven);
  console.log(numbers);
  numberEl.value = "";
});

function isEven (x) {
  return x % 2 === 0;
}

<input id="number" type="number">
<button id="button">Push</button>

Looks like you think that you can call filter once for all, but you have to call it each time you push a new element to the array. Here is what filter does under the hood:

function filter (xs, predicate) {
  var ys = []; // new array
  for (let x of xs) {
    if (predicate(x)) {
      ys.push(x);
    }
  }
  return ys;
}

As you can see below, you can still push odd numbers to the evenNumbers array after filtering even numbers, so you have to filter again.

function isEven (x) {
  return x % 2 === 0;
}

> | numbers = [1, 2, 3, 4]
< | [1, 2, 3, 4]
> | isEven(numbers[0])
< | false
> | isEven(numbers[1])
< | true
> | evenNumbers = filter(numbers, isEven)
< | [2, 4]
> | evenNumbers.push(3)
< | 3
> | evenNumbers
< | [2, 4, 3]
> | evenNumbers = filter(evenNumbers, isEven)
< | [2, 4]