addEventListener и функция onclick не работают - PullRequest
Новая
       6

addEventListener и функция onclick не работают

1 голос
/ 11 января 2020

Использование onclick и добавление прослушивателя событий к моей кнопке неправильно вызывает функцию.

Как я могу вызвать мою функцию нажатием кнопки в HTML. Я также добавил jquery, поэтому могу использовать синтаксис jquery также. 

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>

1 Ответ

3 голосов
/ 11 января 2020

Я редактировал где-то в вашем коде, например:

  • Используя document.querySelector вместо document.getElementById.

  • Исправление id с (fName_But вместо fName-group, emailOutput вместо theEmail1) в вашем коде js.

  • Редактирование способ получения значения от входа до оповещения.

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