A helpful guide on displaying array elements using the map method

I'm struggling to display all the elements from the 'monday' array in the paragraph. How can I modify the code to achieve this and could you please explain how to combine these methods?

Thanks!

`

let mondayList = document.querySelector("firstPastList");

let monday = ["task1", "task2", "task3", "task4", "taks5", "task6", "taks7"];
let tuesday = ["task1", "task2", "task3", "task4", "taks5"];
let wendesday = ["task1", "task2", "task3", "task4", "taks5", "task6"];

const takePastList = monday
    .map((mondays) => `<p id ="firstPastList">${mondays}</p>`)
    .join("");

list.insertAdjacentHTML("afterend", <p>First Past List</p>);


 <h1>My Task</h1>
    <div id="tasks"></div>

    <main> </main>
    <p id="firstPastList">First Past List</p>

 <h2>Done</h2>

`

javascriptarraysarrow-functionsinsertadjacenthtml

Answer №1

If you want to use 

list.insertAdjacentHTML("afterend", <p>First Past List</p>);
, the second parameter must be specified as takePastList. This should be the actual parameter you wish to insert.

For more information, refer to insertAdjacentHTML.

Additionally, in your code, you have not defined where the variable list is coming from. Could it be related to tasks?

let mondayList = document.querySelector("firstPastList");

let monday = ["task1", "task2", "task3", "task4", "taks5", "task6", "taks7"];
let tuesday = ["task1", "task2", "task3", "task4", "taks5"];
let wendesday = ["task1", "task2", "task3", "task4", "taks5", "task6"];

const takePastList = monday
    .map((mondays) => `<p id ="firstPastList">${mondays}</p>`)
    .join("");
    
let list = document.querySelector('#tasks')

list.insertAdjacentHTML("afterend", `<p>${takePastList}</p>`);
<h1>My Task</h1>
    <div id="tasks"></div>

    <main> </main>
 <h2>Done</h2>

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

The webpack-bundle-analyzer tool reveals that running webpack -p does not eliminate the development dependency react-dom.development.js

Here is my custom webpack configuration: const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; const SO ...

javascriptreactjswebpackreact-domwebpack-bundle-analyzer

Converting JSON to an array in PHP, looping through the array, and displaying as a

Upon receiving the following JSON object in an HTTP request: { "name": "myjsonstring", "statisticalvalues": [ { "key_0":"677876" }, { "key_0":"0" } ], "commoditycodes": [ { "key_0":"90001000" }, { "key_0":"80001000" } ] } ...

phparraysjsonlaravel

Saving JSON Data into my HTML document

Currently, I am in the process of learning about API's at school which means my knowledge of jQuery is quite limited. However, I have a specific task that involves making an API call and using the retrieved information. Recently, I conducted an ajax ...

javascriptjqueryajaxjsonapi

Using JavaScript along with Ajax and JSON allows for sending complex data structures such as objects and

One of the features on my form allows users to input information about their clients. This versatile form enables users to add multiple phone numbers, email addresses, and physical addresses without any limitations. When adding a phone number or an email ...

javascriptjqueryajaxjson

having difficulty placing 3 pop-up windows on a single page

Struggling to implement multiple popups on my page, each with a unique ID assigned. Any assistance would be greatly appreciated. Here is the code snippet: .fa { font-size: 50px; cursor: pointer; user-select: none; } .fa:hover { font-size:20px; t ...

javascripthtmljquerycss

The ng-change directive in Angular is failing to trigger for checkboxes

I am facing an issue with my code. The ng-change event of individual checkboxes is not triggered when I click the Select All button, but it works fine when I select them individually. I want the itemChecked method to be called when the Select All button is ...

javascripthtmlangularjscheckbox

Why is webpack attempting to package up my testing files?

In my project, I have two main directories: "src" and "specs". The webpack configuration entrypoint is set to a file within the src directory. Additionally, the context of the webpack config is also set to the src directory. There is a postinstall hook in ...

javascriptnode.jstypescriptnpmwebpack

Stop an item from being included based on a boolean value

I need to iterate through an array of IDs called "world". The idea is that if the ID value in world exists in myArray[n].id, then I want to remove the entire element from myArray. If it doesn't exist, then I want to add it to myArray. world = ["124241 ...

javascriptbooleanpush

Looking for a way to automatically load an aspx page when the browser is closing

Hey there, I'm struggling to load an aspx page when the browser is closed. I thought I had the code right, but it's not working. Can someone please lend a hand? Thanks! var clicked = false; function CheckBrowser() { ...

javascriptc#jqueryasp.net

Dealing with extensive arrays in Swift

Managing a massive array of 275,000 English words for my iOS app in Swift has become a challenge due to Xcode's limitations. The file size exceeds 3 MB, causing Xcode to struggle opening it and compile indefinitely without success. How can I effective ...

arraysswiftxcode

Strength Indicator for Passwords - Utilizing Html & Javascript/Ajax

Anyone know of a Password Strength Visualizer tool that provides a visual representation similar to Gmail's when creating a new account? I'm interested in displaying the password strength visually for users. If you have any source code you' ...

javascripthtmlajax

Finding the number of ways to extract arrays with 7 elements from a larger array of 49 elements in Javascript

I have a task to create unique groups of 7 elements from an array of 49 and determine the number of possible outputs. For example: [A,a,B,b,C,c,D,d,E,e,F,f,G,g,H,h,I,i,J,j,K,k,L,l,M,m,N,n,O,o,P,p,Q,q,R,r,S,s,T,t,U,u,V,v,W,w,X,x,Y] The desired outputs are ...

javascriptarrays

Get the package from a Lerna-managed monorepository using a git URL

Currently working on a project using yarn. The project has a dependency that is part of a larger monorepo managed by lerna. Despite the subpackage being updated, it has not been published yet and I require access to that unreleased code. Is there a method ...

javascriptnpmyarnpkglernamonorepo

Adding labels to a JavaScript chart can be done by using the appropriate methods

https://i.stack.imgur.com/uEgZg.png https://i.stack.imgur.com/y6Jg2.png Hey there! I recently created a chart using the Victory.js framework (check out image 1) and now I'm looking to incorporate labels similar to the ones shown in the second image ab ...

javascripthtmlcssreactjsvictory-charts

What is the best way to adjust the sprite's position in real-time

Look at this cool sprite I discovered! .common-spinner.common-spinner-40x55 { height: 55px; width: 40px; } .common-spinner { background: url("images/loading-sprite.png") no-repeat scroll 100% 100% transparent; } <div class="loading"> ...

javascriptjqueryhtmlcss

JSON containing attributes represented by Unicode characters

During the development of my web application, I am interested in utilizing JSON objects with Unicode attributes as shown below: a = { ονομα:"hello" } Subsequently, I would like to access it in this manner: a.ονομα Alternatively, exploring lo ...

javascriptjsonwebunicodeattributes

PHP tutorial: Removing a file from an array that includes a certain word

Within the directory messages, there are several .txt files. Each file consists of 6 lines, formatted as follows: id_20197456 // identity Friends //category Test // title 10 Feb 2020 22:28 // date John // writer Lorum ipsum.... // message The category na ...

phparraysforeach

Is the 'match()' method available in node.js? If it is, what is the proper syntax to use it?

I attempted to utilize the .match() method in node.js, but encountered an error stating that has no method 'match'. Here is the section of code where I invoke the method: fs.readFile('proxy.txt', function (err, data) { if (data.mat ...

javascriptnode.js

instructions for executing this javascript within the <p> tag

This is the code I have written : <p onload=javascript:alert('sss')>www</p> Unfortunately, the code does not alert 'sss', Can someone please tell me what's wrong with my code? Thank you ...

javascripthtml

"Implementing a method to update an object by its Id within a nested array that includes children, and then managing the state in

How can I dynamically toggle the isExpanded property on click based on an element's ID in a React project? Below is the JSON data structure I am working with const handleExpandOutlineItem = (id: string) => {} This is the structure of my JSON data: ...

javascriptreactjs