Get .innnerhtml and alert text from form

Question

I am trying to create form where I can submit two answers.

Alongside the form I would like to create an alert where the alert takes the input from the form when one of the buttons are clicked. That works fine.

Alongside the form I would like to create another button that displays the text from the form in html.

function htmlText(argument) {
  document.getElementById("fname").innerHTML = alertText();
  document.getElementById("lname").innerHTML = alertText();
}

function alertText(argument) {
  return "Your name is: " +
    document.getElementById("fname").value + " " +
    document.getElementById("lname").value + ".";
}

<form>
  <label>Name :</label><input type="text" id="fname"> <br>
  <label>Name2 :</label><input type="text" id="lname"> <br>
</form>

<button onclick="htmlText()">html</button>

<button onclick="window.alert(alertText())">alert</button>

the second time you'll call alertText(), fname will not exists anymore — Kevin Gilbert, Sep 30 '21 at 12:29
An `` has a `.value`, not an `.innerHTML`. You'll probably want to create a div instead, then set the alarmText as its innerHTML. Why insert the full name into the field for first name and last name? Makes no sense. — , Sep 30 '21 at 12:30

score 0 · Answer 1 · answered Sep 30 '21 at 12:41

You likely meant to do this

Note the user of recommended eventListeners instead of inline event handlers

window.addEventListener("load", function() { // on page load
  function getText() {
    return "Your name is: " +
      document.getElementById("fname").value + " " +
      document.getElementById("lname").value + ".";
  }
  document.getElementById("htmlButton").addEventListener("click", function() {
    document.getElementById("fullName").innerHTML = getText();
  });
  document.getElementById("alertButton").addEventListener("click", function() {
    alert(getText());
  });

});

<form>
  <label>Name :</label><input type="text" id="fname"> <br>
  <label>Name2 :</label><input type="text" id="lname"> <br>
</form>

<button type="button" id="htmlButton">html</button>

<button type="button" id="alertButton">alert</button>

<sid id="fullName">
  </div>

Get .innnerhtml and alert text from form

1 Answers1