javascript - Unable to Returning function to main HTML body javascript

Question

I call the function from a click of the submit button here, and retrieving the entered text works fine.

<button class="btn btnEmail" id="emailBtn" onclick="emailUser.getEmailInput();">Submit</button>
<input type="button" value="submit" onclick="writeMail(this.emailInput)" />

It seems the function is not able to return the value of emailInput to html main body as I cannot use it with my writemail function.

the getEmail function:

let emailUser = {
    getEmailInput: function() {
        this.emailInput = document.getElementById('emailInput').value;
        document.getElementById("emailOutput").innerHTML = this.emailInput;
        return(this.emailInput);
    }
};

the writeMail function:

function writeMail(email) {
    console.log(email);
    localStorage.setItem('email',email);
    let theEmail = localStorage.getItem('email');
    console.log(theEmail);
}

标签： javascriptfunction

Answer 1

thisinonclick="writeMail(this.emailInput)"将引用元素本身。我：e input with type button。

而是使用传递其他输入的值document.getElementById('emailInput').value)。

function writeMail(email) {
  console.log(email);
  localStorage.setItem('email', email);
  let theEmail = localStorage.getItem('email');
  console.log(theEmail);
}

<input type="email" id="emailInput">
<input type="button" value="submit" onclick="writeMail(document.getElementById('emailInput').value)">