CODEWITHSUNDEEP
javascriptfunctiondomalertaddeventlistener
PineNuts0
PineNuts0

Reputation: 5234

JavaScript & HTML: Event Listener Is Not Producing Text Alert As Expected; ReferenceError: button is not defined

I am trying to implement an Event Listener on a DOM (webpage) that produces an alert when a user submits an input inside an input box.

Here is my HTML code: 

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">
    <title>DOM Examples</title>
    <!--  <link rel="stylesheet" href="main.css"></link>  -->

</head>


<body>

    <h1 id="title">This is my Title </h1>

    <input type="text" placeholder="some text">
    <button id='submit-text-btn'>Submit</button>

    <p>
        This is the text that is going to display. 
        I really need to figure out how to balance the next week out. 
        Maybe just pour myself into this and finish recursion, classes, plus guessing game quickly. 
    </p>


    <script src="dom.js"></script>


</body>


</html>

Here is my JS code: 

function getInputAndUpdate(inputElement){
    const text = inputElement.value;
    inputElement.value = '';
    alert(text);
}

button.addEventListener('click', function(){

    const inputElement = document.querySelector('input');

    getInputAndUpdate(inputElement); 

});

Below is a screen shot of my resulting webpage:

enter image description here

My problem is nothing happens when I type text into the input box and click submit. No Alert message pops up at all.

Below is the error I see in the console: 

dom.js:10 Uncaught ReferenceError: button is not defined

enter image description here

Upvotes: 0

Views: 393

Answers (2)

Edric
Edric

Reputation: 26750

That's because the button variable you're adding the event listener on hasn't been initialised.

To get a reference of an element in the DOM, use document.getElementById (which retrieves the element that has the ID - note that IDs must be unique), document.getElementsByClassName (which retrieves all elements that have the class) or document.getElementsByTagName (which retrieves all elements by their tag name).

In this case, since you're already using an ID on the button, you can retrieve the element with document.getElementById:

function getInputAndUpdate(inputElement){
    const text = inputElement.value;
    inputElement.value = '';
    alert(text);
}

var button = document.getElementById('submit-text-btn');
button.addEventListener('click', function(){

    const inputElement = document.querySelector('input');

    getInputAndUpdate(inputElement); 

});
<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">
    <title>DOM Examples</title>
    <!--  <link rel="stylesheet" href="main.css"></link>  -->

</head>


<body>

    <h1 id="title">This is my Title </h1>

    <input type="text" placeholder="some text">
    <button id='submit-text-btn'>Submit</button>

    <p>
        This is the text that is going to display. 
        I really need to figure out how to balance the next week out. 
        Maybe just pour myself into this and finish recursion, classes, plus guessing game quickly. 
    </p>


    <script src="dom.js"></script>


</body>


</html>

Upvotes: 1

Stepan Vanzuriak
Stepan Vanzuriak

Reputation: 304

Just select your button like this 

const button = document.getElementById("submit-text-btn");

Upvotes: 1

Related Questions