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