Attempting to showcase a collection of values, specifically focusing on highlighting the even numbers within the array

const sampleArray = [
  469,
  " " + 755,
  " " + 244,
  " " + 245,
  " " + 758,
  " " + 450,
  " " + 302,
  " " + 20,
  " " + 712,
  " " + 71,
  " " + 456,
  " " + 21,
  " " + 398,
  " " + 339,
  " " + 882,
  " " + 848,
  " " + 179,
  " " + 535,
  " " + 940,
  " " + 472,
];



let mainDiv10 = document.getElementById("main");
let myParagraph10 = document.createElement("p");
let myTextNode10 = document.createTextNode("KATA 11");
myParagraph10.append(myTextNode10);
mainDiv10.append(myParagraph10);
let max9 = 100;
let oneToTwentyFive10 = [];
function array2() {
  if (sampleArray % 2 === 0) mainDiv10.append(sampleArray + "  ");
}
array2();

My HTML is all corret but I know something is wrong with my javascript syntax. I got the array to console.log and also appear on my HTML page but not the even numbers.

javascript

Answer №1

Hello, by adding a space before the number (" " + 755,), you will not be able to check if it is an even number. Additionally, you need to iterate through sampleArray to determine if each element is even.

An alternative approach would be to utilize the forEach function. Here is an example:

const sampleArray = [
  469,
  755,
  244,
  245,
  758,
  450,
  302,
  20,
  712,
  71,
  456,
  21,
  398,
  339,
  882,
  848,
  179,
  535,
  940,
  472,
];



let mainDiv10 = document.getElementById("main");
let myParagraph10 = document.createElement("p");
let myTextNode10 = document.createTextNode("KATA 11");
myParagraph10.append(myTextNode10);
mainDiv10.append(myParagraph10);
let max9 = 100;
let oneToTwentyFive10 = [];
function array2() {
  sampleArray.forEach(el => {
     if (el % 2 === 0) mainDiv10.append(el + "  ");
  })
  
}
array2();
<div id="main">

</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What steps can be taken to guarantee that React updates occur in the correct order?

I'm currently working on developing a multi-select dropdown and facing the issue of hiding the options once a user selects one. The problem arises when I try to update the selectedCategoriesData state and then hide the dropdown using setShowCategories ...

javascriptreactjs

Mastering the art of Promises and handling errors

I've been tasked with developing a WebApp using Angular, but I'm facing a challenge as the project involves Typescript and asynchronous programming, which are new to me. The prototype already exists, and it includes a handshake process that consi ...

javascriptangulartypescript

What is the best way to condense all JavaScript and CSS files in MEAN.JS for a production setting?

I recently finished creating a basic MEAN.JS application. When using MEAN.JS, I can use the command grunt build to minify the js and css files located in specific folders: css: [ 'public/modules/**/css/*.css' ], js: [ 'public/config ...

javascriptnode.jsmeanjs

Utilizing PHP Variables in Ajax Calls: Transferring Data between JS and PHP

I've been struggling to grasp how to pass information from PHP to JavaScript and vice versa. I've spent an entire night trying to figure this out and would really appreciate it if someone could help me understand how to send two variables to an a ...

javascriptphpjqueryajax

What could be causing the jQuery spritely animation to display an additional frame upon the second mouseenter event?

I have been experimenting with CSS sprites and the jQuery plugin called spritely. My goal is to create a rollover animation using a Super Mario image. When the mouse hovers over the Super Mario <div>, I want the animation to play forward. And when t ...

javascriptjquerycss-sprites

What is an alternative way to show the contents of a JSON file without directly accessing it

Recently, I stumbled upon an amazing website - where I have been exploring to learn something new. The website prominently features the use of Ajax and some fascinating javascript without any additional libraries. Within a single javascript file on this ...

javascriptajaxjson

What is the best way to send form data to MongoDB using React?

I am seeking guidance on how to pass the values of form inputs to my MongoDB database. I am unsure of the process and need assistance. From what I understand, in the post request within my express route where a new Bounty is instantiated, I believe I need ...

javascriptmongodbreactjsexpresspost

using javascript to target a specific css selector attribute

I have a CSS file with the following code: .datagrid table tbody td { color: #00496B; border-left: 1px solid #E1EEF4; font-size: 16px ;font-weight: normal; } Is there a way to use JavaScript to dynamically change the font size? The code below worked ...

javascriptcss

Exploring the Possibilities: Incorporating xlsx Files in Angular 5

Is there a way to read just the first three records from an xlsx file without causing the browser to crash? I need assistance with finding a solution that allows me to achieve this without storing all the data in memory during the parsing process. P.S: I ...

javascriptangulartypescriptxlsx

What is the solution for the error message "this.filters is not a function" in Vue.js 2?

Here is the code for my component: <script> import _ from 'lodash' export default{ props:['search','category'], data(){ return{ price_min:'', ...

javascriptvue.jslaravel-5.3vuejs2vue-component

Experiencing difficulties connecting with aspx while using Ext JS 4.2

Currently, I am facing an issue with making a call to an ASPX URL as the return keeps coming back as a failure. I have successfully used this URL in previous programming projects, but this is my first time utilizing it with Ext JS. Despite researching dif ...

javascriptasp.net.netcssextjs

How can I create a JSON string that exactly matches the data source needed for a pie chart? Any tips

received JSON string: "{Date:'15/05/2015',y:'6'}, {Date:'01/08/2015',y:'6'}, {Date:'02/08/2015',y:'6'}, {Date:'08/08/2015',y:'72'}, {Date:'09/08/2015',y:&apo ...

javascriptjqueryajaxchartshighcharts

Combining a standard JSS class with Material-UI's class overrides using the classnames library

I am exploring the method of assigning multiple classes to an element in React by utilizing the classnames package from JedWatson, along with Material-UI's "overriding with classes" technique. For reference, you can see an instance in MUI's docu ...

javascriptcssreactjsmaterial-ui

Determine the quantity of items that meet specific criteria

The initial state of my store is set as follows: let initialState = { items: [], itemsCount: 0, completedCount: 0 }; Whenever I dispatch an action with the type ADD_ITEM, a new item gets added to the items array while also incrementing the count in ...

javascriptreactjsreduxreact-redux

Unusual host value being returned by next/headers in Next.js version 13

In my current Next.js project, I am utilizing next/headers to dynamically set a baseUrl for calls to my API. const baseUrl = () => { const protocol = process?.env.NODE_ENV === "development" ? "http" : "https"; const ...

javascriptnext.jsrequest-headers

Uploading files asynchronously in Internet Explorer 8

Currently, I am on the lookout for sample code that allows asynchronous file uploads in IE8 using Ajax. While having upload progress would be a bonus, it is not essential. Moreover, I specifically need PHP code to handle the uploaded files on the server ...

phpjavascriptajaxinternet-explorer-8

VueJS does not support certain characters in its JavaScript replace function

In my current situation, I am utilizing the replace method in the following manner: <code v-html="'/<try>/'.replace(/(?:\r\n|\r|\n)/g, 'testing')"></code> As I work with a longer string t ...

javascriptvue.jsvuejs2vuejs3

Working with Typescript to map and sort the key values of a new datasource object

Managing a large datasource filled with objects can be challenging. My goal is to rearrange the order of objects in the array based on new values for each key. Whenever a new value for a key is found, I want the corresponding object to move to the top of t ...

javascriptarraystypescriptforeachundefined

Tips for invoking a Laravel Model function with a parameter in a Vue.js template

I'm facing an issue with displaying stock quantities for products in a Vue.js template. I have a product table and stock table where data about product sale and purchase are stored. I need to calculate the stock of each product based on purchase and s ...

javascriptphplaravelvue.js

What could be the reason behind encountering an NaN error while using these particular functions?

I recently delved into the world of JavaScript, starting my learning journey about two months ago. While going through a few tutorials, I stumbled upon an intriguing project idea. However, I've hit a roadblock that's impeding my progress. Every t ...

javascripthtml