How to assign the innerHTML of array elements to the values in another array?

Question

const posterTitle2 = document.getElementById('poster-2-title');
const posterTitle3 = document.getElementById('poster-3-title');
const posterTitle4 = document.getElementById('poster-4-title');

const posterTitleList = [posterTitle1, posterTitle2, posterTitle3, posterTitle4];

const titleList = ["The Last Days of American Crime", "Becky", "The Rising Hawk", "7500"];

I want to set the innerHTML of each posterTitle array element to the corresponding value in the titleList array:

eg

posterTitle1.innerHTML = "The Last Days of American Crime"

I can only figure out how to do it for one element in the array (below). I know there will be a simple solution but I just can't see it!

posterTitleList.forEach(element => element.innerHTML = titleList[0]);

Read the [documentation of `forEach`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach). The method has an `index` argument. — Sebastian Simon, Jun 06 '20 at 17:04
Imho that shouldn't be ids but a common class for all the titles (`e.g. .post-title`). Then iterate over the titles (`document.querySelectorAll(".post-title").forEach((element, index) => { ... })`) and use the index to assign a value from `titleList` (if there are enough titles) — Andreas, Jun 06 '20 at 17:13
@user4642212 thank you, that was what I was looking for but couldn't see it for looking! — Mark Archer, Jun 06 '20 at 18:28

score 1 · Accepted Answer · edited Jul 07 '20 at 18:47

Rather try it this way, give all the titles the same className say titles and use the className to access all of them, you can completely omit the id's if you are not going to use them anywhere.

const titleList = ["The Last Days of American Crime", "Becky", "The Rising Hawk", "7500"]

let titles = document.getElementsByClassName('titles')

for(let i = 0; i < titles.length; i++){
    titles[i].innerHTML = titleList[i]
}

<div class="container">
    <div class="titles" id='poster-2-title'></div>
    <div class="titles" id='poster-3-title'></div>
    <div class="titles" id='poster-4-title'></div>
</div>

Thanks, I went with this version and it worked as expected, thanks for your time — Mark Archer, Jun 06 '20 at 18:29

Sven.hig · Answer 2 · 2020-06-06T17:50:18.280

0

posterTitleList.forEach(x=>{
x.innerHTML=titleList.shift()
})
console.log(posterTitleList)

jsfiddle

edited Jun 06 '20 at 17:50

answered Jun 06 '20 at 17:44

Sven.hig

4,449
2
8
18

3

While this code may resolve the OP's issue, it is best to include an explanation as to how your code addresses the OP's issue. In this way, future visitors can learn from your post, and apply it to their own code. SO is not a coding service, but a resource for knowledge. Also, high quality, complete answers are more likely to be upvoted. These features, along with the requirement that all posts are self-contained, are some of the strengths of SO as a platform, that differentiates it from forums. You can edit to add additional info &/or to supplement your explanations with source documentation – ysf Jun 06 '20 at 21:49
1

The code is self explanatory , I know what SO ,and I am aware it's not a coding service since i am not expecting to be paid – Sven.hig Jun 06 '20 at 21:56
1

@ysf point was that posting code without explanations is discouraged as it has little long term value for the platform or future visitors. Also, code only answers tend to encourage use of SO as a "just give me the code" Q &A, which has been a problem in the past, and takes a lot of effort by community moderators to remove. YSF is simply guiding you on how to make our platform better, how to keep quality of SO Abusers high, and how to provide the most value to the community. Adding explanations HELPS maximum number of visitors, and increases time for understanding the helpful code you provided. – SherylHohman Jun 07 '20 at 02:28
1

It is the policy of SO to discourage code-only answers. YSF was performing his moderation "duties" as is recommended. Your A was not removed, or down voted. Instead, encouragement and guidance was offered, should you like to maximize the benefits of your contributions. Doing so would also provide excellent examples to others on how to help the most people when writing Answers. You are free to ignore the suggestion. It is not an attack on you in any way. More like mentoring, should you be open to helping the community even more than you already do. We do appreciate your contributions. – SherylHohman Jun 07 '20 at 02:37

How to assign the innerHTML of array elements to the values in another array?

2 Answers2