addEventListener and onclick Function do not work

Question

Using onclick and adding an event listener to my button does not correctly call the function.

How can I call my function through a button press in the HTML. I also have jquery added so am able to use jquery syntax aswell.

document.getElementById("fName-group").addEventListener("click", writeFName, false);
function writeFName(fName-group) {
localStorage.setItem('fName-group', fName-group);
var cfmF = confirm("Did you mean to enter: \n" + fName-group + '?');
if (cfmF) {
    console.log(fName-group);
    window.alert('Success!');
    var theEmail1 = localStorage.getItem('fName-group');
    document.getElementById("theEmail1").innerHTML = theEmail1;
    console.log(theEmail1);
}
else {
    window.alert('Please Re-Enter Data');
}
}


    <div class="jumbotron">
    <h3> Add new email</h3>
    <form id="emailInputForm">
        <div class="fName-group">

            <label>First Name</label>
            <input type="text" class="form-control" id="fName_Input" placeholder="Enter candidate 
            first name ...">
            <div class="email-group-append">
                <input type="button" id ="fName_But"value="Submit First Name">

                <p id="emailOutput"></p>
      </div>

fName-group is not a valid variable name.

ggorlen
– ggorlen

2020-01-11 16:34:59 +00:00
Commented Jan 11, 2020 at 16:34 — ggorlen
– ggorlen, Commented Jan 11, 2020 at 16:34

Tân · Accepted Answer · 2020-01-11 16:42:02Z

I've edited somewhere in your code, such as:

Using document.querySelector instead of document.getElementById.
Correcting ids (fName_But instead of fName-group, emailOutput instead of theEmail1) in your js code.
Editing the way to get value from the input before alerting.

JavaScript:

document.querySelector("#fName_But").addEventListener("click", writeFName, false);

function writeFName() {

    var fNameGroup = document.querySelector('#fName_Input').value;

    localStorage.setItem('fName-group', fNameGroup);

    var cfmF = confirm("Did you mean to enter: \n" + fNameGroup + '?');

    if (cfmF) {
        console.log(fNameGroup);
        window.alert('Success!');

        var theEmail1 = localStorage.getItem('fName-group');

        document.querySelector("#emailOutput").innerHTML = theEmail1;
        console.log(theEmail1);
    } else {
        window.alert('Please Re-Enter Data');
    }
}

HTML:

<div class="jumbotron">
    <h3> Add new email</h3>
    <form id="emailInputForm">
        <div class="fName-group">

            <label>First Name</label>
            <input type="text" class="form-control" id="fName_Input" placeholder="Enter candidate first name ...">
            <div class="email-group-append">
                <input type="button" id="fName_But" value="Submit First Name">

                <p id="emailOutput"></p>
            </div>
        </div>
    </form>
</div>

The code is claiming "cannot add property addeventlistener of null"
@cola465 Make sure you're defining event for #fName_But, not fName-group. Just copy all of the code from my answer and run it.
I have copied the code and pasted it, yet it still refuses to run and claims "cannot add property addeventlistener of null". I am fairly new to coding and am sure the issue lies somewhere else in my code, if you could have a read through and give me tips on where I am mucking up it would be very appreciated. : codepile.net/pile/nkzNLgk8
@cola465 I've tested with the code you've refered, it's working fine. There is no error message like that. This is the screenshot
@cola465 Or maybe you're running the old code which made the error message. The code which contained fName-group and lName-group...

Collectives™ on Stack Overflow

addEventListener and onclick Function do not work

1 Answer 1

6 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Related