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

Posted 2023-05-07

【中文标题】从表单中获取 .innerhtml 和警报文本

【英文标题】：Get .innnerhtml and alert text from form

【发布时间】：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。为什么在名字和姓氏的字段中插入全名？没有意义。

【参考方案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>