如何將單選文本區域中的無線電和文本字段的值獲取

Question

我試圖將單選按鈕和輸入字段的值設置為單個文本區域字段

我已經嘗試在幾個網站上搜索一些代碼，但我無法讓它工作

 document.mainForm.onclick = function() { var gender = document.querySelector('input[name = gender]:checked').value; result.innerHTML = 'Dear ' + gender; } function myInput() { var y = document.getElementById('textarea').value; document.getElementById('result').innerHTML = y; } 

 <p>Select Email templates below</p> <form id="mainForm" name="mainForm"> <input type="radio" name="gender" value="Mr." />Mr. <input type="radio" name="gender" value="Mrs." />Mrs. </form> <br> <textarea id="textarea" placeholder="please input your texts here" oninput="myInput()" /></textarea> Real time generated email template <textarea class="form-control" rows="5" id="result" name="text"></textarea> 

在文本區域選擇單選按鈕+用戶輸入字段，然后輸出

選中單選按鈕+用戶輸入字段示例：Stackover先生

但當我選擇單選按鈕時，它會轉到輸出文本區域，然后當我在文本區域字段上輸入文本時，它刪除了單選按鈕並創建了一個新文本

順便說一句，我是web dev的新手。 請不要用行話。

Answer 1

您必須使用+=來保留元素的先前文本。

更改

document.getElementById('result').innerHTML = y;

至

document.getElementById('result').innerHTML += y;

另外，如果文本不包含任何HTML，我建議您使用textContent或innerText 。

 var radios = document.querySelectorAll('input[name=gender]'); radios.forEach(function(r){ r.addEventListener('change', function(){ var gender = document.querySelector('input[name = gender]:checked').value; document.getElementById('result').textContent = 'Dear '+ gender; }); }); function myInput(){ var y = document.getElementById('textarea').value; document.getElementById('result').textContent += y; } 

 <p>Select Email templates below</p> <form id="mainForm" name="mainForm"> <input type="radio" name="gender" value="Mr."/>Mr. <input type="radio" name="gender" value="Mrs." />Mrs. </form> <br> <textarea id="textarea" placeholder="please input your texts here" oninput="myInput()"/></textarea> Real time generated email template <textarea class="form-control" rows="5" id="result" name="text"></textarea> 

Answer 2

您可以在變量中指定值，稍后使用如下所示。

 var static_label = ''; document.mainForm.onclick = function(){ var gender = document.querySelector('input[name = gender]:checked').value; static_label = 'Dear '+gender; document.getElementById('result').innerHTML = static_label; } function myInput(){ var y = document.getElementById('textarea').value; document.getElementById('result').innerHTML = static_label + y; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <p>Select Email templates below</p> <form id="mainForm" name="mainForm"> <input type="radio" name="gender" value="Mr." />Mr. <input type="radio" name="gender" value="Mrs." />Mrs. </form> <br> <textarea id="textarea" placeholder="please input your texts here" oninput="myInput()"/></textarea> Real time generated email template <textarea class="form-control" rows="5" id="result" name="text"></textarea> 

Answer 3

這段代碼適合你

 document.mainForm.onclick = function(){ renderYourText() } function renderYourText(){ var gender = document.querySelector('input[name = gender]:checked').value; var y = document.getElementById('textarea').value; document.getElementById('result').innerHTML ='Dear '+gender + y; } 

 <p>Select Email templates below</p> <form id="mainForm" name="mainForm"> <input type="radio" name="gender" value="Mr." />Mr. <input type="radio" name="gender" value="Mrs." />Mrs. </form> <br> <textarea id="textarea" placeholder="please input your texts here" oninput="renderYourText()"></textarea> Real time generated email template <textarea class="form-control" rows="5" id="result" name="text"></textarea>