title: 'Uncaught TypeError: Cannot read property 'selectionStart' of undefined' in object
body: <p>I have a working formatter that inserts basic html elements to text selected on textarea tag.
  But now I have to have one set of buttons that will a few textareas. And when i tried to do it with objects I get 'Uncaught TypeError: Cannot read property 'selectionStart' of undefined' error to each connected textarea object.</p>
  
  <pre><code>function Formatter(velem, vb_h, vb_b, vb_i, vb_a, vb_img)
  // args: textarea elem to connect, header button, bold button, italic button, link button and image button
  {
      if(!velem || !vb_h || !vb_b || !vb_i || !vb_a || !vb_img)
          alert("NULL argument!");
  
      this.elem = velem;
      this.b_h = vb_h;
      this.b_b = vb_b;
      this.b_i = vb_i;
      this.b_a = vb_a;
      this.b_img = vb_img;
  
      this.f_h = function() 
      { 
              if (this.elem.selectionStart != undefined)
              {
                  var startPos = this.elem.selectionStart;
                  var endPos = this.elem.selectionEnd;
                  var selectedText = this.elem.value.substring(startPos, endPos);
  
                  this.elem.value = this.elem.value.substring(0, startPos) + '&lt;h1&gt;' + selectedText + '&lt;/h1&gt;' + this.elem.value.substring(endPos);
              }
      }
  
      this.f_b = function() 
      {
              if (this.elem.selectionStart != undefined)
              {
                  var startPos = this.elem.selectionStart;
                  var endPos = this.elem.selectionEnd;
                  var selectedText = this.elem.value.substring(startPos, endPos);
  
                  this.elem.value = this.elem.value.substring(0, startPos) + '&lt;b&gt;' + selectedText + '&lt;/b&gt;' + this.elem.value.substring(endPos);
              }
      }
  
      this.f_i = function() 
      {
              if (this.elem.selectionStart != undefined)
              {
                  var startPos = this.elem.selectionStart;
                  var endPos = this.elem.selectionEnd;
                  var selectedText = this.elem.value.substring(startPos, endPos);
  
                  this.elem.value = this.elem.value.substring(0, startPos) + '&lt;i&gt;' + selectedText + '&lt;/i&gt;' + this.elem.value.substring(endPos);
              }
      }
  
      this.f_a = function() 
      {
              if (this.elem.selectionStart != undefined)
              {
                  var startPos = this.elem.selectionStart;
                  var endPos = this.elem.selectionEnd;
                  var selectedText = this.elem.value.substring(startPos, endPos);
                  var name = prompt("Podaj nazwę dla tego linku: ", "link");
  
                  this.elem.value = this.elem.value.substring(0, startPos) + '&lt;a href="' + selectedText + '"&gt;' + name + '&lt;/a&gt;' + this.elem.value.substring(endPos);
              }
      }
  
      this.f_img = function() 
      {
  
              if (this.elem.selectionStart != undefined)
              {
                  var startPos = this.elem.selectionStart;
                  var endPos = this.elem.selectionEnd;
                  var selectedText = this.elem.value.substring(startPos, endPos);
  
                  this.elem.value = this.elem.value.substring(0, startPos) + '&lt;img src="' + selectedText + '" /&gt;' + this.elem.value.substring(endPos);
              }
      }
  
      this.b_h.addEventListener('click', this.f_h);
      this.b_b.addEventListener('click', this.f_b);
      this.b_i.addEventListener('click', this.f_i);
      this.b_a.addEventListener('click', this.f_a);
      this.b_img.addEventListener('click', this.f_img);   
  }
  </code></pre>
  
  <p>And in HTML:</p>
  
  <pre><code>Numer testu: &lt;input type="number" name="testnum" id="testnum" /&gt;&lt;br /&gt;&lt;br /&gt;
  
              &lt;fieldset&gt;&lt;legend&gt;Formatowanie&lt;/legend&gt;
              &lt;button type="button" id="b2_h1" &gt;Nagłówek&lt;/button&gt; &lt;button type="button" id="b2_b" &gt;&lt;b&gt;Pogrubienie&lt;/b&gt;&lt;/button&gt; &lt;button type="button" id="b2_i" &gt;&lt;i&gt;Pochylenie&lt;/i&gt;&lt;/button&gt; &lt;button type="button" id="b2_a" &gt;Link&lt;/button&gt; &lt;button type="button" id="b2_img" &gt;Obrazek&lt;/button&gt;
              &lt;br /&gt;
              &lt;/fieldset&gt;&lt;br /&gt;
              &lt;fieldset&gt;&lt;legend&gt;Nowe pytanie&lt;/legend&gt;
              Pytanie:&lt;br /&gt;
              &lt;textarea id="q_q" cols="95" rows="2"&gt;&lt;/textarea&gt;&lt;br /&gt;
              Odpowiedź A:&lt;br /&gt;
              &lt;textarea id="q_aa" cols="95" rows="2"&gt;&lt;/textarea&gt;&lt;br /&gt;
              Odpowiedź B:&lt;br /&gt;
              &lt;textarea id="q_ab" cols="95" rows="2"&gt;&lt;/textarea&gt;&lt;br /&gt;
              Odpowiedź C:&lt;br /&gt;
              &lt;textarea id="q_ac" cols="95" rows="2"&gt;&lt;/textarea&gt;&lt;br /&gt;
              Prawidłowa odpowiedź:&lt;br /&gt;
              &lt;input type="radio" id="q_an" value="A"/&gt;A &lt;input type="radio" id="q_an" value="B"/&gt;B &lt;input type="radio" id="q_an" value="C" /&gt;C&lt;br /&gt; 
              &lt;button type="button"&gt;OK&lt;/button&gt;
              &lt;/fieldset&gt;&lt;br /&gt;
  
              Podgląd: &lt;br /&gt;
              &lt;textarea name="val2" id="val2" cols="95" rows="50"&gt;&lt;/textarea&gt;
              &lt;script type="text/javascript"&gt;
                  var b2_h1 = document.getElementById('b2_h1'),
                      b2_b = document.getElementById('b2_b'), 
                      b2_i = document.getElementById('b2_i'), 
                      b2_a = document.getElementById('b2_a'),
                      b2_img = document.getElementById('b2_img');
  
                  var f2 = new Formatter(document.getElementById("q_q"), b2_h1, b2_b, b2_i, b2_a, b2_img);
                  var f2 = new Formatter(document.getElementById("q_aa"), b2_h1, b2_b, b2_i, b2_a, b2_img);
                  var f3 = new Formatter(document.getElementById("q_ab"), b2_h1, b2_b, b2_i, b2_a, b2_img);
                  var f4 = new Formatter(document.getElementById("q_ac"), b2_h1, b2_b, b2_i, b2_a, b2_img);
                  var f5 = new Formatter(document.getElementById("q_an"), b2_h1, b2_b, b2_i, b2_a, b2_img);
                  var f6 = new Formatter(document.getElementById("val2"), b2_h1, b2_b, b2_i, b2_a, b2_img);
              &lt;/script&gt;
  </code></pre>
  
  <p>(sorry for Polish in code but I didn't want to translate it and it isn't important)</p>