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!
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>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);