Could someone help me tidy this mess up?

JavaScript
1

I’m guessing it’s obvious what I mean.

If it were PHP then no problem, but it doesn’t seem easy with JS.


  var msg_1 = "";
  var msg_2 = "";
  var msg_3 = "";
  var msg_4 = "";
  var msg_5 = "";
  var msg_6 = "";
  var msg_7 = "";
  var msg_8 = "";
  var msg_9 = "";

  if(document.getElementById('canvas-message-line1')) {
  	var msg_1 = document.getElementById('canvas-message-line1').value;
  }
  if(document.getElementById('canvas-message-line2')) {
  	var msg_2 = document.getElementById('canvas-message-line2').value;
  }
  if(document.getElementById('canvas-message-line3')) {
  	var msg_3 = document.getElementById('canvas-message-line3').value;
  }
  if(document.getElementById('canvas-message-line4')) {
  	var msg_4 = document.getElementById('canvas-message-line4').value;
  }
  if(document.getElementById('canvas-message-line5')) {
  	var msg_5 = document.getElementById('canvas-message-line5').value;
  }
  if(document.getElementById('canvas-message-line6')) {
  	var msg_6 = document.getElementById('canvas-message-line6').value;
  }
  if(document.getElementById('canvas-message-line7')) {
  	var msg_7 = document.getElementById('canvas-message-line7').value;
  }
  if(document.getElementById('canvas-message-line8')) {
  	var msg_8 = document.getElementById('canvas-message-line8').value;
  }
  if(document.getElementById('canvas-message-line9')) {
  	var msg_9 = document.getElementById('canvas-message-line9').value;
  }

  if (context.fillText) {
    context.fillText(msg_1, 20, 20);
    context.fillText(msg_2, 20, 35);
    context.fillText(msg_3, 20, 50);
    context.fillText(msg_4, 20, 65);
    context.fillText(msg_5, 20, 80);
    context.fillText(msg_6, 20, 95);
    context.fillText(msg_7, 20, 110);
    context.fillText(msg_8, 20, 125);
    context.fillText(msg_9, 20, 140);
  }
2

This has little to do with PHP or Javascript, it has to do with the pseudo algorithm you start with.

A good programming technique is DRY: Don’t Repeat Yourself.

Here’s a suggestion:

  1. Create a loop for document.getElementById(‘canvas-message-line(i)’) (1<=i<=9)

  2. In that loop, get document.getElementById(‘canvas-message-line(i)’).value to fill the context.fillText at the current position (starts with 20)
    and increase the parameter’s value by 15: 20, 20+15 (35), 20+15+15 (50),…

My jQuery/Javascript is a bit rusty, but here’s an untested:

var j = 20;

if (context.fillText) {
    $('*[id*=canvas-message-line]').each(function() {
        context.fillText(this.value, 20, j) ;
        j = j + 15;
    });
};
3

With the same reserve, that it’s untested, I tried to include the default 20 to start with:


if (context.fillText) {
    $('*[id*=canvas-message-line]').each(function(j) {
        return function() {
            j = typeof j !== 'undefined' ? j : 20;
            context.fillText(this.value, 20, j) ;
            j = j + 15;
        }
    });
};

Or something like that :slight_smile: