テキストボックスからユーザー入力を読み込み、javascriptの下に印刷しようとしていますか？

これを実行すると、「入力しました：ここにテキストを挿入」と表示され、消えてテキストボックスが消えます。私は3時間過ごしたので、私が間違いを犯している場所はわかりません。どんな助けもありがとう！ありがとう。テキストボックスからユーザー入力を読み込み、javascriptの下に印刷しようとしていますか？

<!DOCTYPE html> 
<html> 

<head> 
<title> Basic JavaScript </title> 

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

var firstWord= document.getElementById("Word1").value; 
document.write("You entered: " + firstWord); 

} 

</script> 

</head> 
<body> 


<form> 

Word Number 1: 
<input type = "text" id = "Word1" > 
<br> 

<button onclick = "Copier()">Copy Text Box 1</button> 

</form> 

</body> 

</html>

出典

2016-06-12 Luxpride

フォームタグは必要ありません。

あなたの入力の周りにformタグを使用している場合、ブラウザは次のように定義された方法が存在すべきであることを前提としていますとすぐあなたのJavaScriptが入力をつかんでいるよう

<form action="post/get" url="some-file.php">

、それはのはで洗い流しますファイルが指定されていないことを指しているフォーム（再）アクション。

フォームタグを残して、入力フィールド自体で値を取得してください。

<!DOCTYPE html> 
<html> 
<head> 
<title> Basic JavaScript </title> 
<style> 
input[type="text"] { 
    border: 1px solid #565656; 
    padding: 2px; 
    color: black; 
} 
#display { 
    position: relative; 
    top: 0; 
    width: 300px; 
    height: 30px; 
} 
</style> 
<script type = "text/javascript"> 
function Copier() { 
var firstWord= document.getElementById("Word1").value; 
var box = document.getElementById('display'); 
box.innerHTML = "You entered:" + firstWord; 
} 
</script> 
</head> 
<body> 
Word Number 1: 
<input type="text" id="Word1" > 
<br> 
<button onclick = "Copier()">Copy Text Box 1</button> 
<div id="display"></div> 
</body> 
</html>

出典

2016-06-12 20:03:13

ありがとうございます、フォームタグが私を捨てていました。 – Luxpride

ようこそ。 –

危険なので、document.write()は使用しないでください。独自のidと別個の要素を作成し、innerHTMLを使用します。

function Copier() { 
 
    document.getElementById("output").innerHTML = "You entered: " + document.getElementById("Word1").value; 
 
}

<form> 
 

 
    Word Number 1: 
 
    <input type = "text" id = "Word1" > 
 
    <br> 
 

 
    <button onclick = "Copier()">Copy Text Box 1</button> 
 
    <p id="output"></p> 
 
</form>

出典

2016-06-12 19:53:38

「user2521387」というユーザーがフォームタグについて語ったことを使用します。フォームタグを削除する必要があります。innerHTMLを使用したくない場合は、次のようにしてください。

出典

2016-06-12 20:32:06

テキストボックスからユーザー入力を読み込み、javascriptの下に印刷しようとしていますか？

答えて

関連する問題