How to show arrays elements with map method-CodePudding

I want to show in the paragraph all elements from array named monday. How to change the code to fix it? and cany You help to understand how to join this methods?

Regards

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>

CodePudding user response：

For list.insertAdjacentHTML("afterend", <p>First Past List</p>); you need to make the second parameter as takePastList,it should be the actual parameter that you want to insert.

More details can be found at insertAdjacentHTML

Also,in your code,you have not declare where list come from,maybe the 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>