HTML5で変数を印刷する

Question

私はHTML5で新しく、この質問は少しばかげているかもしれませんが、どうやってそれを行うのか分かりません。 私はフォームから名前を取得し、その名前を要求した同じページの下のテキストとして印刷しようとします。

<script> 
    function myFunction() 
    { 

    } 
</script> 

<form method="get"> 
     Name: <input name="fname" value="your name" type="text"><br> 
     <input onclick="myFunction()" value="Send"type="button"> 
</form> 

誰かが私を助けてくれますか？ ありがとう！

Answer 1

あなたは、次のいずれかの方法を使用することができ、あなたの入力にIDを追加し、次のスクリプト

<script> 
    function myFunction() { 
     document.getElementById('myOutput').innerText = document.getElementById('myInput').value 
    } 
</script> 

<form method="get"> 
    Name: <input id="myInput" name="fname" value="your name" type="text"><br> 
    <input onclick="myFunction()" value="Send" type="button"> 
</form> 

<div id="myOutput"></div> 

Answer 2

を使用することができます。入力要素にIDを割り当て、それを使用して値を取得するのは一般的にどこでも標準です。このeasy referenceもご覧ください。

<script> 
    function myFunction() 
      {  
       // Get the element by Id 
       alert(document.getElementById("fname").value); 
       // Get the element by Name and take the first from array it returns. 
       alert(document.getElementsByName("fname")[0].value); 
       // Select a particular element by Name 
       alert(document.querySelector("input[name='fname']").value); 
       // Select a particular element by Name and take first from array it returns. 
       alert(document.querySelectorAll("input[name='fname']")[0].value); 
      } 
</script> 

<form method="get"> 
     Name: <input name="fname" id="fname" value="your name" type="text"><br> 
     <input onclick="myFunction()" value="Send"type="button"> 
</form>