Adding parameters to function

Question

I just started to learn some oop and design patterns so I have this example:

function Img(imgId, imgSrc, imgClass) {
      this.imgId = imgId || '';
      this.imgSrc = imgSrc || '';
      this.imgClass = imgClass;
      
      let elm = document.createElement('img');
      elm.setAttribute('id', this.imgId);
      elm.setAttribute('src', this.imgSrc);
      elm.classList.add(this.imgClass);

      var xyz = document.getElementById('xyz');

      this.createImage = function() {
        xyz.appendChild(elm);
      }
    }

    var flowerImg = new Img('flower', 'http://via.placeholder.com/350x150', 'img').createImage();

    var airplane = new Img('airplane', 'http://via.placeholder.com/350x150', 'img img-wide').createImage();

<div action="" id="xyz">
      
  </div>

So if I try to use more than one class as function parameter, I get error.

I am trying to understand what and how to overcome it.

I don't see how that's a duplicate of this question. This isn't asking how to add a class; it's asking how to overcome a specific error related to adding classes. — , Dec 15 '17 at 15:30

score 2 · Answer 1 · answered Dec 15 '17 at 15:18

You need to split the classes into separate strings and apply each one separately

function Img(imgId, imgSrc, imgClass) {
      this.imgId = imgId || '';
      this.imgSrc = imgSrc || '';
      this.imgClass = imgClass;
      
      let elm = document.createElement('img');
      elm.setAttribute('id', this.imgId);
      elm.setAttribute('src', this.imgSrc);

      this.imgClass.split(' ').forEach(function(singleClass) {
          elm.classList.add(singleClass);
      })

      var xyz = document.getElementById('xyz');

      this.createImage = function() {
        xyz.appendChild(elm);
      }
    }

    var flowerImg = new Img('flower', 'http://via.placeholder.com/350x150', 'img').createImage();

    var airplane = new Img('airplane', 'http://via.placeholder.com/350x150', 'img img-wide').createImage();

<div action="" id="xyz">
      
  </div>

score 1 · Accepted Answer · 2017-12-15T15:26:05.457

1

You're getting an error because a space is not a valid character in a class name. Instead pass individual strings, and receive them as a rest parameter.

Then you can use spread syntax to pass the list of classes to classList.add().

 
// Receive all the classes--------v
function Img(imgId, imgSrc, ...imgClass) {
  this.imgId = imgId || '';
  this.imgSrc = imgSrc || '';
  this.imgClass = imgClass;

  let elm = document.createElement('img');
  //elm.setAttribute('id', this.imgId);
  //elm.setAttribute('src', this.imgSrc);

  // This is shorter than using `.setAttribute()`
  elm.id = this.imgId;
  elm.src = this.imgSrc;

  elm.classList.add(...this.imgClass); // Add all the classes

  var xyz = document.getElementById('xyz');

  this.createImage = function() {
    xyz.appendChild(elm);
  }
}

var flowerImg = new Img('flower', 'http://via.placeholder.com/350x150', 'img').createImage();

var airplane = new Img('airplane', 'http://via.placeholder.com/350x150', 'img', 'img-wide').createImage();

<div action="" id="xyz">

</div>

edited Dec 15 '17 at 15:26

answered Dec 15 '17 at 15:18

Thx, one more question, does that has to be last argument added? – youngster Dec 15 '17 at 15:21
@youngster: Yes. Another option would be simply to set the `.className` with your original string. `elm.className = this.imgClass`. But IMO, this syntax is nicer. – Dec 15 '17 at 15:23
Thank you, I learned something. – youngster Dec 15 '17 at 15:25
You're welcome. I also updated to set `id` an `src` properties directly instead of using `.setAttribute()`. – Dec 15 '17 at 15:26

score 0 · Answer 3 · answered Dec 15 '17 at 15:22

Just use the .className property. There you can set multiple classes at once.

For example:

elm.className = this.imgClass;

Or if there is already a class defined for the element just use it with the + operator, but be aware that you have to insert a space as separator:

elm.className += " " + this.imgClass;

Adding parameters to function

3 Answers3