CODEWITHSUNDEEP
javascriptloops
Hubert Kubasiewicz
Hubert Kubasiewicz

Reputation: 375

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

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 = "";
});

Upvotes: 2

Views: 100

Answers (5)

Joshua R.
Joshua R.

Reputation: 2302

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.

Upvotes: 1

John Rodney
John Rodney

Reputation: 175

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.

Upvotes: 1

Faly
Faly

Reputation: 13356

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]] = "";
  });
});

Upvotes: 2

Danmoreng
Danmoreng

Reputation: 2367

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 = "";
});

Upvotes: 2

Rohit Agrawal
Rohit Agrawal

Reputation: 1521

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 = "";
  });
});

Upvotes: 1

Related Questions