JavascriptはID divにコードを配置していません

私は最近、入力フォームにテキストを貼り付けるプログラムを作成していたJavascriptで初心者の問題について投稿しました。今私はフォームが消えないように特定のdiv要素にテキストを配置するプログラムを取得しようとしています。私はこれに新しいです、そして、私が間違ってやっていることを知らないので、あなたがそれが助けになるなら、それは素晴らしいでしょう。私のプログラムの目的は、入力に基づいて私のためのコードを書くことになっています。JavascriptはID divにコードを配置していません

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <title>YAML Generator</title> 
 
    </head> 
 
    <body> 
 
    <form class="yamlform" action="index.html" method="post"> 
 
     <input type="text" name="appname" value="Name"> 
 
     <button type="submit" onclick="writeAppName()">Submit</button> 
 
    </form> 
 
    <div id="appnameSpace"> 
 

 
    </div> 
 
    <script type="text/javascript"> 
 
    var appnamelocation = document.getElementById('appnameSpace') 
 
    function writeAppName() { 
 
     var appname = document.getElementsByName("appname")[0].value 
 
     document.getElementById(appnameSpace) 
 
     document.write(appname) 
 
    } 
 
    </script> 
 
    </body> 
 
</html>

出典

2017-05-01 cpdev

は、PHPは、このためのより良いのではないでしょうか？ – Sank6

@SankarshMakam私はPHPを知らないので、私が知っているところに書きました。 – cpdev

、これを試してみてください。特にsubmitボタン付きのformタグを使用すると、サーバーにデータを送信します。この場合、データを提出する必要はありません。最終コードです。

HTML

<body> 
    <input type="text" id="appname" value="Name"> 
    <button onclick="writeAppName()">Submit</button> 
    <div id="appnameSpace"> 
    </div> 
</body>

ここ

var appnamelocation = document.getElementById('appnameSpace'); 
function writeAppName() { 
    var appname = document.getElementById('appname').value; 
    var appnameSpaceElement = document.getElementById('appnameSpace'); 
    appnameSpaceElement.innerHTML = appname; 
}

作業例：

https://jsfiddle.net/

あなたの最終的なコードは以下のようになります。

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>YAML Generator</title> 
    </head> 
    <body> 
    <input type="text" id="appname" value="Name"> 
     <button onclick="writeAppName()">Submit</button> 
     <div id="appnameSpace"> 
     </div> 
    <script type="text/javascript"> 
    var appnamelocation = document.getElementById('appnameSpace'); 
    function writeAppName() { 
     var appname = document.getElementById('appname').value; 
     var appnameSpaceElement = document.getElementById('appnameSpace'); 
     appnameSpaceElement.innerHTML = appname; 
    } 
    </script> 
    </body> 
</html>

出典

2017-05-01 15:44:58 quirimmo

Errr、リンクが機能しません。（JSフィドル） – Sank6

jsfiddleは私のコードを公開していません.- btwあなたの例でコピーして貼り付けるとうまくいくはずです – quirimmo

navbarでsaveをクリックしてください。（家を除いて左から2番目） – Sank6

function writeAppName() { 
     var appname = document.getElementsByName("appname")[0].value; 
     document.getElementById('appnameSpace').innerHTML = '<h1>'+appname+'</h1>'; 
    }

出典

2017-05-01 15:40:35 noyanc

いくつかの問題があります

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>YAML Generator</title> 
    <script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function(){ 
$("#btn").click(function(){ 
$("#appnameSpace").html($("#appname").val()); 
}); 
}); 
    </script> 
    </head> 
    <body> 
     <input type="text" id="appname" name="appname" value="Name"> 
     <button type="submit" id="btn">Submit</button> 
    <div id="appnameSpace"> 

    </div>  
    </body> 
</html>

出典

2017-05-01 15:44:51 Matt

正しくありません。フォーム内に送信ボタンがあり、送信ボタンがトリガーされます。 – quirimmo

@quirimmoありがとう。編集されました。 – Matt

appnamelocation.innerHTMLでのdocument.writeを置き換えます

appnamelocation.innerHTML = appnameの

出典

2017-05-01 15:45:47

「Enter」キーは、あまりにも、提出することができるように、私はフォームのsubmitイベントハンドラにこれを変更します。次に、あなたの変数を少し違って参照し、document.writeの代わりにinnerHTMLを使ってdivを設定します。

<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>YAML Generator</title> 
 
</head> 
 

 
<body> 
 
    <form class="yamlform" action="index.html" method="post" onsubmit="return writeAppName()"> 
 
    <input type="text" name="appname" value="Name"> 
 
    <button type="submit" >Submit</button> 
 
    </form> 
 
    <div id="appnameSpace"> 
 

 
    </div> 
 
    <script type="text/javascript"> 
 
    function writeAppName() { 
 
     var appname = document.getElementsByName("appname")[0].value, 
 
     appnamelocation = document.getElementById("appnameSpace"); 
 
     appnamelocation.innerHTML = appname; 
 
     return false; 
 
    } 
 
    </script> 
 
</body> 
 

 
</html>

出典

2017-05-01 15:51:33

JavascriptはID divにコードを配置していません

答えて

関連する問題