Is loop a good choice instead of what I have created?

Question

I am learning JS by my own and I have created first little script :). Script is counting the number of signs for the tag tittle of a webpage to be between 50 and 60 etc.... Below there is one button that resets all the data in the script and its working 100% but I have a question - Can I use some kind of loop instead of that code that I have created? A loop that will be reseting all elements below. Thx for Your help :) and advice...

// reset Title tag check
document.getElementById("resetTitleBtn").addEventListener("click", function(){
  document.getElementById('inputTitleTag').value = "";
  document.getElementById('titleTag').innerHTML = "";
  document.getElementById('example').innerHTML = "";
  document.getElementById("tytul").style.color = "";
  document.getElementById("good").innerHTML = "";
});

Take a look at the accepted answer: [link](https://stackoverflow.com/questions/5338716/get-multiple-elements-by-id) — Pieter, Dec 08 '17 at 10:48
if all element needs reset with `innerHTML` loop is fine. But here you have other properties to be cleared. then it's better to continue with this rather than a loop. — Shalitha Suranga, Dec 08 '17 at 10:49

score 2 · Accepted Answer · answered Dec 08 '17 at 10:49

While I don't think in this case a loop is necassary, you could do something like this:

// reset Title tag check
document.getElementById("resetTitleBtn").addEventListener("click", function(){
  var tags = ['titleTag', 'example', 'good'];
  for(var i = 0; i < tags.length; i++){
    document.getElementById(tag).value = "";
  }
  document.getElementById('inputTitleTag').value = "";
  document.getElementById("tytul").style.color = "";
});

score 2 · Answer 2 · answered Dec 08 '17 at 10:52

Yes, it can be done with a loops:

var resets = [
  {id: 'inputTitleTag', props: ['value']},
  {id: 'titleTag', props: ['value']},
  {id: 'example', props: ['innerHTML']},
  {id: 'tytul', props: ['style', 'color']},
  {id: 'good', props: ['innerHTML']}
]
document.getElementById("resetTitleBtn").addEventListener("click", function(){
  resets.forEach(function(reset) {
    reset.props.length === 1 ? document.getElementById(reset.id)[reset.props[0]] = "" : document.getElementById(reset.id)[reset.props[0]][reset.props[1]] = "";
  });
});

score 1 · Answer 3 · answered Dec 08 '17 at 10:49

You can group these ids in an array and loop over the array for applying similar operation.

Since inputTitleTag and tytul do not share operation with others, there is no point in looping over them.

document.getElementById("resetTitleBtn").addEventListener("click", function(){
  var ids = ['titleTag', 'example', 'good'];
  document.getElementById('inputTitleTag').value = "";
  document.getElementById("tytul").style.color = "";
  ids.forEach(function(id){
      document.getElementById(id).innerHTML = "";
  });
});

score 1 · Answer 4 · answered Dec 08 '17 at 11:03

If what you are concerned about is being more dry. Or do not repeat yourself then you could alias a few of your more commonly used functions. Then looping mechanisms are also nice when a pattern is noticed such as all three of the same prop. Usually two or less of the same prop is pointless for a loop as a minimum loop is usually 2-3 lines to declare.

const clear = (element, prop) => element[prop] = "";
const get = (id) => document.getElementById(id);

get("resetTitleBtn").addEventListener("click", () => {
  ['titleTag', 'example', 'good'].forEach(id => clear(get(id), 'innerHTML'));
  clear(get('inputTitleTag'), 'value'));
  clear(get('tytul').style, 'color'));
});

This doesn't necessarily improve this sample segment of code but can lead to a more dry pattern throughout the project for commonly used functions.

score 1 · Answer 5 · answered Dec 08 '17 at 11:12

You might consider using classes to identify different elements requiring common initialization and select them that way.

var resetValueEls     = document.getElementsByClassName('initValue');
var resetInnerHTMLEls = document.getElementsByClassName('initInnerHTML');
var resetColorEls     = document.getElementsByClassName('initColor');

Array.prototype.forEach.call(resetValueEls,     function(x) {x.value     = ""})
Array.prototype.forEach.call(resetInnerHTMLEls, function(x) {x.innerHTML = ""})
Array.prototype.forEach.call(resetColorEls,     function(x) {x.style.color = ""})

then, each HTML tag that requires initialization gets a class or combination thereof e.g. <DIV class="initInnerHTML initColor"/>.

The benefit of this strategy is that if you have many tags to initialize, despite having many ids, you have a small number of classes to keep track of in your initializer.

This could also be combined with @Faly's solution to write the above in a more compact way. One line with an object relating class names to property/operations, and a loop over those containing a single `Array.prototype.forEach.call`. — Joshua R., Dec 08 '17 at 11:15

Is loop a good choice instead of what I have created?

5 Answers5