如何读出并显示用户在输入字段中键入的内容

Question

我刚开始使用html，想创建两个输入字段，用户可以在其中输入某种类型的文本，当他单击“提交”按钮时，会弹出一个小弹出窗口，显示他刚刚在该字段中输入的信息。 / p>

我知道这很简单，就像在给面包涂黄油一样，但是我不能把头包起来-

 <script type="text/javascript">
 function showInfo()
 {

    var Größe=Number(document.getElementById("Größe").value);
    var Gewicht=Number(document.getElementById("Gewicht").value);

    return window.alert("Sie haben als Körpergröße document.getElementById("Größe") und als Gewicht document.getElementById("Gewicht")

}

<p>Körpergröße:
<input type="text" id="Größe"/>
</p>   
<p>Körpergewicht: 
<input type="text" id="Gewicht"/>
</p>

<input type="submit" value="showInfo" onclick="showInfo()">

Answer 1

首先尝试并扩展。

function showResult() {
  var el = document.getElementById('userInput');
  var val = el.value;
  if (!val) {
    window.alert("No value was entered");
  } else {
    window.alert(val);
  }
}

<input type="text" id="userInput">
<button type="button" onclick="showResult()">Show Result</button>

Answer 2

对不起-不是我的语言，而是..

<script type="text/javascript">
 function showInfo()
 {

    var Größe=Number(document.getElementById("Größe").value);
    var Gewicht=Number(document.getElementById("Gewicht").value);

    return window.alert("Sie haben als Körpergröße " + Größe + " und als Gewicht " + Gewicht)

}
</script>

Answer 3

我会在警报中使用模板文字。为了确保Größe和Gewicht不是NaN，我还放弃了Number（）演员。

function showInfo() {
    var Größe=document.getElementById("Größe").value;
    var Gewicht=document.getElementById("Gewicht").value;

    return window.alert(`Sie haben als Körpergröße ${Größe} und als Gewicht ${Gewicht}`);
}

<p>Körpergröße:
<input type="text" id="Größe"/>
</p>   
<p>Körpergewicht: 
<input type="text" id="Gewicht"/>
</p>

<input type="submit" value="showInfo" onclick="showInfo()">

Answer 4

尝试以下功能：

function showInfo()
{
  var Größe=document.getElementById("Größe").value;
  var Gewicht=document.getElementById("Gewicht").value;
  alert("Größe "+Größe+" Gewicht "+Gewicht);
}

Answer 5

<output for="">

• 将所有内容包装在<form>标记中
• 添加一个<output>标签
• 为<output>的{​​{1}}属性和[for]
分配
• 将#id属性的值设置为[for]标签的#id

  

<input> ID <input id='

     

' type='text'>任何<output id=' ID ' for='

现在'></output>和<output>相互关联，这使它们更容易共享数据。

---

参考

  

  

• HTMLFormControlsCollection API和FormElement Interface

  

• <output> Tag

  

• [for] Attribute

  

• classList Property

  

• CSS transform: scale() translate()

  

• On-Event Handlers

  

---

演示

<input>

var ui = document.forms[0];

ui.onsubmit = popUp;

function popUp(e) {
  e.preventDefault();
  ui.out.classList.toggle('open');
}

#out {
  display: block;
  position: absolute;
  z-index: 1;
  transform: scale(0);
  transition: 0.6s;
}

#out.open {
  transform: scale(3) translate(50%, 100%);
  transform-origin: left bottom;
  font-size: 10vw;
  transition: 0.8s;
}