ユーザーテキスト入力を取得してページの要素にレンダリングするにはどうすればよいですか？

私はテキスト入力で何かを書くことができ、ページにそのレンダリングを行うことができます。私は、user-textというIDのテキスト入力と、IDがapply-buttonのサブミット入力と、エントリが入るターゲット<p>タグを持っています。基本的には、入力テキストを入力してボタンをクリックすると、ターゲットにレンダリングされます。しかし、それは私のために働いていない。ここに私のコードです。ユーザーテキスト入力を取得してページの要素にレンダリングするにはどうすればよいですか？

let userInput = document.querySelector('#user-text'); 
 
const applyButton = document.querySelector('#apply-button'); 
 
let userTarget = document.querySelector('#user-target'); 
 

 
applyButton.addEventListener('click',() => { 
 
     userTarget.textContent = userInput.nodeValue;      
 
});

<div> 
 
    <div> 
 
     <p><input type='text' id='user-text' placeholder="Type your day here."name='blogtext'><input type='submit' id='apply-button'value='Click to Apply'> 
 

 

 
    </div> 
 
    <div id='target'> 
 
     <p id='user-target'></p> 
 
    </div> 
 
</div>

ご質問があれば私に教えてください。

出典

2017-07-22 Aryaman D.

userInput.valueを入力フィールドから取得することができます。また、最初の<p>タグは閉じられていません。

<body> 
 
    <div> 
 
     <div> 
 
      <p><input type='text' id='user-text' placeholder="Type your day here."name='blogtext'><input type='submit' id='apply-button'value='Click to Apply'> 
 
      
 
      
 
     </div> 
 
     <div id='target'> 
 
      <p id='user-target'></p> 
 
     </div> 
 
    </div> 
 

 
    <script type='text/javascript'> 
 
     let userInput = document.querySelector('#user-text'); 
 
     const applyButton = document.querySelector('#apply-button'); 
 
     let userTarget = document.querySelector('#user-target'); 
 
     
 
     applyButton.addEventListener('click',() => { 
 
       userTarget.textContent = userInput.value;      
 
     }); 
 
    </script> 
 
</body>

出典

2017-07-22 08:04:00 Dij

ありがとうございました！ –

また、入力を保存する方法を知りたいと思います。ユーザーの入力がなくなったページを更新した後にこのコードを使用するとします。 –

あなたは機能上のクリックを行うときに、「のnodeValueは、」なぜあなたはそのはUIに来ていないHTMLに値を設定しようとしているという帰来ています。

<body> 
 
    <div> 
 
     <div> 
 
      <p><input type='text' id='user-text' placeholder="Type your day here."name='blogtext'><input type='submit' id='apply-button'value='Click to Apply'> 
 

 

 
     </div> 
 
     <div id='target'> 
 
      <p id='user-target'></p> 
 
     </div> 
 
    </div> 
 

 
    <script type='text/javascript'> 
 
    console.log('called'); 
 
     let userInput = document.querySelector('#user-text'); 
 
     const applyButton = document.querySelector('#apply-button'); 
 
     let userTarget = document.querySelector('#user-target'); 
 

 
     applyButton.addEventListener('click',() => { 
 
       userTarget.textContent = userInput.value;      
 
     }); 
 
    </script> 
 
</body>

出典

2017-07-22 08:04:24

let userInput = document.querySelector('#user-text'); 
 
const applyButton = document.querySelector('#apply-button'); 
 
let userTarget = document.querySelector('#user-target'); 
 

 
applyButton.addEventListener('click',() => { 
 
     userTarget.innerHTML = userInput.value;      
 
});

<div> 
 
    <div> 
 
     <p><input type='text' id='user-text' placeholder="Type your day here."name='blogtext'><input type='submit' id='apply-button'value='Click to Apply'> 
 

 

 
    </div> 
 
    <div id='target'> 
 
     <p id='user-target'></p> 
 
    </div> 
 
</div>

はtextarea valueを取得し、innerHTMLを使用して、要素にそれを置きます。

出典

2017-07-22 08:07:24 Escoute

ユーザーテキスト入力を取得してページの要素にレンダリングするにはどうすればよいですか？

答えて

関連する問題