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);
}

Answer 1

this in onclick="writeMail(this.emailInput)" will refer to the element itself. i:e input with type button .

Instead pass the value of other input using 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)">