how can I simplify this code (by using a loop?)

Question

I use the following code to create accordeon-elements on a webpage:

document.getElementById('accordeon1').innerHTML += '<div class="akkordeon"><ul><li><input type="checkbox" checked="checked" /> <i>&#160;</i><h2 class="header_content header_content1"></h2><p class="content1"></p></li></ul></div>'

document.getElementById('accordeon2').innerHTML += '<div class="akkordeon"><ul><li><input type="checkbox" checked="checked" /> <i>&#160;</i><h2 class="header_content header_content2"></h2><p class="content2"></p></li></ul></div>'

document.getElementById('accordeon3').innerHTML += '<div class="akkordeon"><ul><li><input type="checkbox" checked="checked" /> <i>&#160;</i><h2 class="header_content header_content3"></h2><p class="content3"></p></li></ul></div>'

...

document.getElementById('accordeon50').innerHTML += '<div class="akkordeon"><ul><li><input type="checkbox" checked="checked" /> <i>&#160;</i><h2 class="header_content header_content50"></h2><p class="content50"></p></li></ul></div>'

...can anyone please help me to simplify the code? Thanks a lot!

Use a class? Why use a loop, classes are there for this exact reason. ID is for unique things and classes are for a class of items — ggdx, Oct 29 '18 at 16:13
To understand how you could simplify this code, you should look up how for loops work and how template literals work. There are lots of ways to refactor this but these would get you moving in the right direction. — OliverRadini, Oct 29 '18 at 16:22

OliverRadini · Answer 1 · 2018-10-29T16:43:55.977

This kind of question isn't really very good for stack overflow; it's opinion based, and quite broad. Stackoverflow works best when you can be a bit more specific about what you want to do. Though I'll answer the question, I also think it should probably be closed.

This isn't great or even good code, but it does show you a way in which this can be refactored:

const makeAkkordeonElement = numberIn => `<div class="akkordeon"><ul><li><input type="checkbox" checked="checked" /> <i>&#160;</i><h2 class="header_content header_content${numberIn}"></h2><p class="content${numberIn}"></p></li></ul></div>`

for (let i = 0; i < 100; i++) {
  const el = document.getElementById(`accordeon${i}`)

  el && (el.innerHTML += makeAkkordeonElement(i))
}

<div id="accordeon1"></div>
<div id="accordeon2"></div>
<div id="accordeon50"></div>
<div id="accordeon99"></div>

score 0 · Answer 2 · answered Oct 29 '18 at 16:59

Using jQuery... Since the question is tagged with.

You can look for attribute selector and get the "unique" part of the id.

I agree with @OliverRadini about the «opinion based, and quite broad» aspect of your question. I think the very start of your question should be about to properly use classes on dynamic content. And that would definitely end with some comments saying "read tutorials and try!".

Because why you do this is a question that can be asked...

Anyway, here is an example using a jQuery loop. But that also is bad code for sure.

$("[id^='accordeon']").each(function(){
  var unique = $(this).attr("id").substr(9);
  //console.log(unique);
  $(this).html('<div class="akkordeon"><ul><li><input type="checkbox" checked="checked" /> <i>&#160;</i><h2 class="header_content header_content'+unique+'"></h2><p class="content'+unique+'">TEXT HERE?</p></li></ul></div>');
});

p.content1{
  color:blue;
}
p.content2{
  color:red;
}
p.content3{
  color:green;
}
p.content4{
  color:yellow;
}
p.content5{
  color:cyan;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="accordeon1">accordeon #1</div>
<div id="accordeon2">accordeon #2</div>
<div id="accordeon3">accordeon #3</div>
<div id="accordeon4">accordeon #4</div>
<div id="accordeon5">accordeon #5</div>

how can I simplify this code (by using a loop?)

2 Answers2