如何獲取用戶文本輸入並將其呈現給頁面上的元素？

所以我測試了這個東西，我可以在文本輸入中寫入東西，然後將其呈現給頁面。我有一個文本輸入，編號爲user-text，提交輸入的編號爲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」即將空那爲什麼你想設置值的HTML它不是對UI的到來。

<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

如何獲取用戶文本輸入並將其呈現給頁面上的元素？

回答

相關問題