Как добавить данные из одного input в любой блок (по выбору: 1-ый, 2-ой, 3-ий или 4-ый)?

Question

[loony2m]

Нужно сделать возможность добавления текста из элемента input в отдельные блоки. (Сейчас текст выводится из-за заранее выбранного класса (class="textOutput3"), нужно чтобы пользователь сам выбирал куда ему вывести данные - в 1-ый, 2-ой, 3-ий или 4-ый блок.

Из идей - создать ещё один input с type = "number" или select от 1 до 4 и объединить его с уже имеющимся input который есть, чтобы пользователь писал текст, выбирал цифру и функция на js выводила значение из входных данных (не знаю как реализовать).
Либо просить пользователя ввести в input в начале предложения цифру и функция на js выводила текст в блок согласно цифре которую написал пользователь в начало предложения - 1, 2, 3 или 4 (тоже не знаю как реализовать).

<div class="container">
        <div class="item item_1">
            1. Срочное и важное
            <ul class="textOutput1"></ul>
        </div>
        <div class="item item_2">
            2. Не срочное и важное
            <ul class="textOutput2"></ul>
        </div>
        <div class="item item_3">
            3. Срочное и не важное
            <ul class="textOutput3"></ul>
        </div>
        <div class="item item_4">
            4. Не срочное и не важное
            <ul class="textOutput4"></ul>
        </div>
    </div>

first("button").addEventListener("click", function() {
    let val = first(".myInput").value.trim();
    if (!val) return; // ничего не ввели? Прервать.

    

    first(".textOutput3").insertAdjacentHTML("beforeEnd", prepare(val));
    first(".myInput").value = '';
  });
  
  function prepare(text) {
    return "<li>" + text.split(/\s+/).map(wrap_span).join(" ") + "</li>";

    function wrap_span(word) {    
      let color = /[!@#$&*%]/.test(word) ? "red" : word.length > 5 ? "green" : "orange";
  
      return `<span style="color: ${ color }">${ word }</span>`;
    }
  }
  
  function first(str) {
    return document.querySelector(str);
  }

Comments

[VoidVolker]

loony2m Правила, пункт 3.8

Answer 1

[Nik Faraday]

HTML:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">

<div class="row">
    <div class="col-lg-11" style="padding-top: 10px; padding-bottom: 10px; padding-left: 30px;">
        <input type="text" id="text" class="form-control" />
    </div>
    <div class="col-lg-1" style="padding-top: 10px; padding-bottom: 10px;">
        <input type="button" value="Append" id="append-text" class="btn btn-primary" />
    </div>
</div>
<div class="row">
    <div class="col-lg-3" id="container-1">
        <input type="radio" id="item-1" checked="checked" />
        1. Срочное и важное
    </div>
    <div class="col-lg-3" id="container-2">
        <input type="radio" id="item-2" />
        2. Не срочное и важное
    </div>
    <div class="col-lg-3" id="container-3">
        <input type="radio" id="item-3" />
        3. Срочное и не важное
    </div>
    <div class="col-lg-3" id="container-4">
        <input type="radio" id="item-4" />
        4. Не срочное и не важное
    </div>
</div>

JS:

<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"></script>

<script>
    let checkedItemId = 'container-1';
    let radios = $('[id|=item]');

    for(let i = 0; i < radios.length; i++) {
        $('#' + radios[i].id).on('click', () => {
            if($('#' + radios[i].id).prop('checked')) {
                for(let j = 0; j < radios.length; j++) {
                    if (i != j) {
                        $('#' + radios[j].id).prop('checked', false);
                    }
                }
                checkedItemId = radios[i].parentElement.id;
                console.log(checkedItemId);
            }
        })
    }

    $('#append-text').on('click', () => {
        let text = $('#text').val();
        $('#text').val('');
        document.getElementById(checkedItemId).innerHTML += '<br/>' + text;
    });
</script>