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开发人员中的新手。请不要用行话。

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 rects = $( "rect" ).slice( 1, 4 );
console.log(rects);

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;  

}

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>

如何将单选和文本字段的值获取到单个文本区域

3 个答案: