append createTextNodeメソッドを使用してユーザーがテキストを入力しました

今は、ユーザーが入力テキストフィールドに入力した内容に応じてCREATED p要素にCREATEDテキストを追加する方法を理解しようとしています。 createTextElementメソッドの後にテキストを設定すると、ボタンをクリックしたときに正しく表示されます。しかし、私が欲しいのは、ユーザーが入力フィールドにテキストを入力した後、ボタンをクリックすると、テキストgetが "mydiv"のIDを持つdivタグの最後に追加されます。どんな助けもありがとうございます。append createTextNodeメソッドを使用してユーザーがテキストを入力しました

HTML：

<body> 
    <div id="mydiv"> 
     <p>Hi There</p> 
     <p>How are you?</p> 
     <p> 
      <input type="text" id="myresponse"> 
      <br> 
      <input type="button" id="showresponse" value="Show Response"> 
     </p> 
     <hr> 
    </div> 
</body>

はJAVASCRIPT：あなたはあなたが見ることができるようにするには、入力フィールドの値を読み取る必要がcreateTextNode機能

に引数を適用する必要が

var $ = function(id) { 
    return document.getElementById(id) 
} 

var feelings = function() 
{  
    $("myresponse").focus(); 

    var mypara = document.createElement("p"); 
    var myparent = $("mydiv"); 

    myparent.appendChild(mypara); 

    var myText = document.createTextNode($("myresponse").value); 

    mypara.setAttribute("id", "displayedresponse"); 

    mypara.appendChild(myText); 

    $("displayedresponse").appendChild(myText);  
} 

window.onload = function() { 

    $("showresponse").onclick = feelings; 
}

出典

2017-11-19 TRS7

テキスト

あなたはすべてのクリックでmydivを参照しますので、私は親スコープにmydiv変数を移動すると、超便利良く

var $ = function (id) { 
    return document.getElementById(id) 
} 
let mydiv = $('mydiv'); 
$("showresponse").addEventListener('click', feelings); 

function feelings() { 
    let textInput = $('myresponse').value; 
    var mypara = document.createElement("p"); 
    var myText = document.createTextNode(textInput); 
    mypara.setAttribute("id", "displayedresponse"); 
    mypara.appendChild(myText); 
    mydiv.appendChild(mypara); 
$("displayedresponse").appendChild(myText); 
}

出典

2017-11-19 22:00:55 Flaugzig

あなたに合うだろうと思い、うまくいきました。私はあなたの答えに投票しました。ありがとうございました！！ – TRS7

うれしい私は助けることができる:) – Flaugzig

append createTextNodeメソッドを使用してユーザーがテキストを入力しました

答えて

関連する問題