从表单中获取 .innerhtml 和警报文本答案

【问题标题】：Get .innnerhtml and alert text from form从表单中获取 .innerhtml 和警报文本
【发布时间】：2021-11-22 07:03:27
【问题描述】：

我正在尝试创建可以提交两个答案的表单。

除了表单之外，我还想创建一个警报，当单击其中一个按钮时，警报会从表单中获取输入。效果很好。

除了表单，我想创建另一个按钮，以 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>

【问题讨论】：

第二次调用 alertText()，fname 将不再存在
一个<input> 有一个.value，而不是一个.innerHTML。您可能希望创建一个 div，然后将 alarmText 设置为其 innerHTML。为什么在名字和姓氏的字段中插入全名？没有意义。

标签： javascript html forms innerhtml

【解决方案1】：

你可能有意这样做

注意用户推荐的事件监听器而不是内联事件处理程序

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>

【讨论】：