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

Display or conceal form elements depending on the JSON response

Upon making an api call, a json Response is received with the following structure: {"Field":"Amount","FieldName":"Amount","FieldType":"Numeric","MaximumLength":128,"MinimumLength":0,"Options":"Mandatory"} This api call yields between 5-10 of these object ...

javascriptjqueryhtmljson

Maximizing Performance: Enhancing Nested For Loops in Angular with Typescript

Is there a way to optimize the iteration and comparisons in my nested loop? I'm looking to improve my logic by utilizing map, reduce, and filter to reduce the number of lines of code and loops. How can I achieve this? fill() { this.rolesPermiAdd = ...

javascriptangulartypescriptspring-bootnested-loops

Geoserver does not have the 'Access-Control-Allow-Origin' header

map.on('singleclick', function (evt) { document.getElementById('info').innerHTML = "Looks like you need to redo this :) !!!"; var view = map.getView(); var viewResolution = view.getResolution(); var source = hcm.getSource(); var url = s ...

javascripttomcatopenlayersgeoserver

Calls to the function are piling up

There is a bootstrap modal that displays a confirmation message. If the 'accept' button is clicked, a function is called with an id. If the 'cancel' or 'close' button is clicked, the modal closes. The problem arises when the m ...

javascriptjquerybootstrap-4bootstrap-modal

Utilizing JSON and CodeIgniter within HTML elements

I am interested in creating a private chatroom using CodeIgniter and JSON format. I want the JSON data retrieved to be displayed in a list structure like <ul><li>messageinJSON</li></ul>. This formatting will allow me to customize th ...

javascriptphpjqueryjsoncodeigniter

Modifying a Json file in a Node application, while retaining the previously stored data

In my node script, I have a simple process where I update the db.json file via a form. The file is successfully updated, but when I try to render it in response for a GET or POST request, it only shows the previous results. var cors = require('cors&ap ...

javascriptnode.jsexpress

Puppeteer - Issue with Opening Calendar Widget

Problem: Unable to interact with the calendar widget on a hotel website (). Error Message: Node is either not clickable or not an Element Steps Taken (code snippet below): const puppeteer = require('puppeteer') const fs = require('fs/promi ...

javascriptnode.jsweb-scrapingpuppeteer

Long taps do not activate the context menu in the mobile interface, as noted in the Google Maps API

During the development of my project, I encountered an issue with the Google Maps API not functioning correctly on mobile devices. I am utilizing GMaps.js, but even that example does not properly support right-click (long tap event). Here is a snippet of ...

javascriptapigoogle-mapsmapstouch

Conditionally defining variables in JavaScript only if they are currently undefined

I have been working on extracting two keywords from a URL in the following format: localhost:3000/"charactername"/"realmname" My goal is to extract "charactername" and "realmname" and assign them to variables. Here is the code snippet I am using: var c ...

javascripthttpurl

Is it possible for Angular and Flux to collaborate harmoniously?

Flux is a unique unidirectional data flow concept developed by the React team, offering various benefits such as Undo/Redo functionality, ease of testing, maintaining a single app state, and more. Exploring the idea of integrating Flux with AngularJs could ...

javascriptangularjsmodel-view-controllerfluxredux

JavaScript: Retrieving the names of children within a <div> element

Within my structure setup, there is a tower div with inner elements like this: <div class="tower"> <div class="E0">abc</div> <div class="GU">123</di </div> The challenge I am facing is that I need to access the in ...

javascripthtmlclass-names

Manipulate the visibility of div sections depending on the selected price and category checkboxes using JavaScript

I have a unique div setup where I'm defining data attributes to display a product list. Each div contains data attributes for category (data-category) and price (data-price). I want to be able to show or hide specific divs based on selections made usi ...

javascriptjqueryhtmlcsscheckbox

"Utilizing Material-UI in React to create a textfield input with number validation

I am currently working on an input field that should only accept values within a specified range of min and max. However, I have encountered an issue where manually entering a number bypasses this control mechanism. Is there a way to prevent this from happ ...

javascriptreactjsnumbersmaterial-uitextfield

My locale NUXT JavaScript files are being blocked by Content Security Policy

I've been working on implementing CSP headers for my website to ensure data is loaded from trusted sources. However, I'm facing an issue where CSP is blocking my local JS files. Here's a snippet from my nuxt.config.js: const self = 'lo ...

javascriptvue.jssecuritynuxt.js

Traverse a computed attribute in Vue.js

I am working with a component that contains a simple array as its data: data() { return { roles: [ { id: '1' , name: 'admin'}, { id: '2' , name: 'user'}, { id: &a ...

javascriptvue.js

Encountering an issue when using both the Google Maps API and Google URL Shortener API within the same program

Recently, I developed a program that involves passing data to an iframe through a URL. However, due to the limitation of Internet Explorer supporting only 2083 characters in a URL, I decided to use the Google URL Shorten API to shorten the URL before sendi ...

javascriptapigoogle-mapsurlgoogle-maps-api-3

Executing a Cron Job several times daily, each and every day

This is my current code snippet: const CronJob = require('cron').CronJob; new CronJob({ cursoronTime: '* * * * *', // every minute onTick: async function() { console.log(&ap ...

javascriptnode.jsnpmcron

When a link is right-clicked, the window.opener property becomes null

Currently, I am utilizing the window.opener property in JavaScript to update the parent window from a child window. The parent window simply consists of a table with data and a link to open the child window. When the child window is launched, a JavaScript ...

javascripthtmljspwindow.openercross-origin-opener-policy

A helpful guide on how to dynamically input database values into the href attribute of an 'a' tag

How do I successfully pass an ID to href in my code? When I try to return it via req.params, it keeps coming back as undefined. I need the ID from the URL in order to use the findOne method to access the data stored in the database. I've searched thr ...

javascriptnode.jsmongodbexpresspug

"Encountering issues with createReadStream function when handling large files, performance is significantly

Currently, I am utilizing the DropBox API for file uploads. The process involves several steps: Begin by uploading the file from a form to a local directory on the server. Read the file from the local directory using fs.createReadStream. Transfer the fil ...

javascriptnode.jsexpressdropbox-api