エラー：document.queryselectorが関数ではありません

Question

以下のコードではというラベルのボタンが追加されましたが期待どおりに機能していません。理想的には、ページ上の順序付けられていないリストに入力値を追加する必要があります。代わりに、私は次のエラーを取得する：

Uncaught TypeError: document.queryselector is not a function

ページコード

<div id="root"> 
    <input type="text" id="input" v-model="message"/> 

    <p>The value of the input is : {{message}}</p> 

    <ul> 
     <li v-for="n in names" v-text="n"></li> 
    </ul> 

    <input id="input1" type="text"/> 

    <button id="button"> Add More </button> 
</div> 

<script> 
    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 = ''; 
    }); 

</script> 

Answer 1

そのdocument.querySelector。大文字のSはquerySelectorにあることに注意してください。

また、間違っているのはaddEventListnerです。それはaddEventListenerでなければなりません。