SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    Sep 2008
    Posts
    338
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Could someone help me tidy this mess up?

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

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

    Code:
      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. #2
    Non-Member
    Join Date
    Feb 2012
    Posts
    892
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    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:

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

  3. #3
    Non-Member
    Join Date
    Feb 2012
    Posts
    892
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    With the same reserve, that it's untested, I tried to include the default 20 to start with:

    Code:
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •