Как взять ввод формы пользователя и использовать его для элемента события?

Question

Как мне взять входные данные в формах и применить их к событиям «Имя» и «Их Имя»?

Пробовал различные коды от пользователей, которые не работали.

Я пытаюсь заставить входы "name" и "их имя" применить к элементам с пробелами (____), когда я нажимаю кнопку Fill Names

function myFunction() {
  var str = document.getElementById("myname").innerHTML;
  var res = str.replace("_____", "Name");
  document.getElementById("myname").innerHTML = res;
}

function myFunction2() {
  var str = document.getElementById("theirname").innerHTML;
  var res = str.replace("_____", "Their Name");
  document.getElementById("theirname").innerHTML = res;
}

<form>
  <p>Name<br><input type="text" name="name">
    <br>
  </p>
  <p>Their Name<br><input type="text" name="theirname">
</form>
<p>This is a test for replacing "_____" with "Name" Name and "Their Name" for other name, for sentences with names and greetings.</p>
<p id="myname">Thank you for helping me with those shelves, by the way my name is _____. Would you like to help me with these boxes?</p>
<p id="theirname">There's customer outside who needs help bring a table inside. His name is _____. I'm going to go help him.</p>
<button onclick="myFunction();myFunction2();">Fill Names</button>

Answer 1

Когда вы делаете str.replace("_____", "Name");, вы передаете буквенную строку Name в функцию замены, когда вместо этого вы хотите получить значение текстового поля. Вы можете использовать document.querySelector() для этого:

function myFunction() {
  var str = document.getElementById("myname").innerHTML;
  var res = str.replace("_____", document.querySelector('input[name="name"]').value);
  document.getElementById("myname").innerHTML = res;
}

function myFunction2() {
  var str = document.getElementById("theirname").innerHTML;
  var res = str.replace("_____", document.querySelector('input[name="theirname"]').value);
  document.getElementById("theirname").innerHTML = res;
}

<form>
  <p>Name<br><input type="text" name="name">
    <br>
  </p>
  <p>Their Name<br><input type="text" name="theirname">
</form>
<p>This is a test for replacing "_____" with "Name" Name and "Their Name" for other name, for sentences with names and greetings.</p>
<p id="myname">Thank you for helping me with those shelves, by the way my name is _____. Would you like to help me with these boxes?</p>
<p id="theirname">There's customer outside who needs help bring a table inside. His name is _____. I'm going to go help him.</p>
<button onclick="myFunction();myFunction2();">Fill Names</button>