如何讀出並顯示用戶在輸入字段中鍵入的內容

Question

我剛開始使用html並想創建兩個輸入字段，用戶可以在其中輸入某種類型的文本，當他單擊“提交”按鈕時，會彈出一個小彈出窗口，顯示他剛剛在該字段中輸入的信息。

我知道這很簡單，就像給面包塗黃油一樣，但是我不能把頭纏在面包上，

 <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>分配[for]屬性和#id
• 將[for]屬性的值設置[for] <input>標記的#id

<input id=' ID'type ' type='text'>

<output id=' ANY'for ' for=' ID '></output>

現在， <output>和<input>相互關聯，這使它們更容易共享數據。

---

參考

• HTMLFormControlsCollection API和FormElement接口

• <output>標簽

• [for]屬性

• classList屬性

• CSS transform: scale() translate()

• 事件處理程序

---

演示

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

 <form id='ui' onclick="out.value = txt.value;"> <output id='out' for='txt'></output> <input id='txt' type='text'> <button type='submit'>GO</button> </form>