CODEWITHSUNDEEP
buttonvuejs2documentselectors-apimounted-volumes
SFDC_Learner
SFDC_Learner

Reputation: 139

Error : document.queryselector is not a function

In the code below, the button labeled Add More 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:

Uncaught TypeError: document.queryselector is not a function

Page Code

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

Upvotes: 1

Views: 21598

Answers (1)

Bert
Bert

Reputation: 82469

Its document.querySelector. Note the capital S in querySelector.

You also have a mispelling with addEventListner. It should be addEventListener.

Upvotes: 6

Related Questions