title: Error : document.queryselector is not a function
body: <p>In the code below, the button labeled <strong>Add More</strong> is not functioning as expected. Ideally it should add the input value to the unordered list on the page. Instead, I get the following error:</p>
  
  <blockquote>
    <p>Uncaught TypeError: document.queryselector is not a function</p>
  </blockquote>
  
  <p><strong>Page Code</strong></p>
  
  <pre><code>&lt;div id="root"&gt;
      &lt;input type="text" id="input" v-model="message"/&gt;
  
      &lt;p&gt;The value of the input is : {{message}}&lt;/p&gt;
  
      &lt;ul&gt;
          &lt;li v-for="n in names" v-text="n"&gt;&lt;/li&gt;
      &lt;/ul&gt;
  
      &lt;input id="input1" type="text"/&gt;
  
      &lt;button id="button"&gt; Add More &lt;/button&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
      var app = new Vue ({
          el : '#root',
          data : {
              message : 'Hello World!',
              favourite : 'author',
              names : ['Sunil' , 'Anis' , 'Satyajit']
          },
      });
  
      document.queryselector('#button').addEventListener('click', function(event) {
          var n = document.queryselector('#input1');
          app.names.push(n.value);
          n.value = '';
      });
  
  &lt;/script&gt;
  </code></pre>