Javascript в HTML: Как автоматически вставить пользовательский ввод в середину строки?

Question

ProgLang: Javascript в HTML

Проблема: я получаю пользовательский ввод через поле комментария (их имя) и хочу, чтобы он вставлял средние строки в остальной части кода.Например: «Ты в порядке, имя, я волновался!»

Я пытался использовать ${firstname}, но оставшаяся строка не выводилась в появившемся окне комментария.

    Enter Your First Name
<br><input type="text" id=firstname name="firstname" onblur="addNameToCommentBox(this)"><br><br>
.
Opening Sentence <br>
    <input type="checkbox" onclick="addToCommentBox(this);" name="grade" value="statement1. statement1. " + ${firstname}.`+ "statement1. statement1.">Statement1. indentifier user read on page<br> 

    Second Sentence <br>
    <input type="checkbox" onclick="addToCommentBox(this);" name="grade" value="statement2. statement2.  ">Statement2. indentifier user read on page<br>
    <br>
...
Resulting Block<br>
    <textarea id="comment" rows="10" cols="80"></textarea><br>
</form>
<script>
function addNameToCommentBox(nameElement) {
    var comment = $("#comment");
        comment.val(comment.val() + " " + nameElement.value); }

function addToCommentBox(checkboxElement) {
    var comment = $("#comment");
    if (checkboxElement.checked === true) {
        comment.val(comment.val() + " " + checkboxElement.value);
    } else {
        var currentComment = comment.val();
        currentComment = currentComment.replace(checkboxElement.value, "");
        comment.val(currentComment);

Не могли бы вы посоветовать мне?

Answer 1

Вы можете установить свой шаблон как "statement1.statement1 {0} statement1. statement1."

, а затем написать функцию для получения сообщения путем передачи аргументов.

function getComment(template, args){
return args.reduce((acc, element) => {
    console.log(element);
    acc = acc.replace(/{\d}/, element);
    return acc;
}, template);}

Ссылка на коде: https://codepen.io/nithinthampi/pen/gOYJopP

Answer 2

Вы забыли использовать $ перед параметрами.Попробуйте это

<script>
    function addNameToCommentBox(nameElement) {
        var comment = $("#comment");
            comment.val(comment.val() + " " + $(nameElement).value); }

    function addToCommentBox(checkboxElement) {
        var comment = $("#comment");
        if (checkboxElement.checked === true) {
            comment.val(comment.val() + " " + $(checkboxElement).value);
        } else {
            var currentComment = comment.val();
            currentComment = currentComment.replace( $(checkboxElement).value), "");
            comment.val(currentComment);