Javascript HTML and DOM-CodePudding

Question: On-Page load, display John's current email, create a 'Change email' button and input field for John to enter his new email and click the button, John's email will change to the new email instantly without page refresh.

I feel that I am so near yet so far. Any kind soul to help me out? :) Thanks in advance!

CodePudding user response：

function changeEmail() {
  const email = document.getElementById("myEmail").value;
  // use .textContent to avoid XSS (unlikely, but still ...)
  document.getElementById("demo").textContent = email;
}
/* attach the event handler like so */
document.getElementById("go").addEventListener("click", changeEmail);

input:invalid {
  box-shadow: 0 0 5px #800;
}

<h1><strong>Question 2, FS102-Assignment 2</strong></h1>
<form>
  <div>
    <!-- an output tag to display the output of the change -->
    <output id="demo"> Email: [email protected] </output><br>
    <input input type="email" id="myEmail" placeholder="Enter New Email"><br>
    <br>
  </div>
  <!-- be sure to use type="button" to avoid a submit, add an id -->
  <button type="button" id="go"> Change Email </button>
</form>

CodePudding user response：

Try this:

function myFunction() {
  var x = document.getElementById("myEmail").value;
  document.getElementById("demo").innerText = x;
}