Подставить заготовленному url то, что введено в input и вывести в div

Question

Возникли трудности при изучении js, нужно сделать на чистом js такое: Есть поле input и кнопка. Нужно сделать так:

- вводим цифры и буквы (например qy123456h) в поле input
- жмем кнопку
- скрипт берет заранее заготовленный url(например https://site.ru/track?) и вставляет в конец то, что введено в поле input
- полученный результат https://site.ru/track?qy123456h выводится в блоке div вот так: <div><a href="https://site.ru/track?123456">https://site.ru/track?qy123456h</a></div>

Помогите советом или лучше примером, как это реализовать.

Answer 1

function onClick() {
    let value = document.getElementById('input-box').value;

    let url = `https://site.ru/track/${value}`;
    
    let outputDiv =  document.getElementById('output');

    outputDiv.innerHTML = "";

    addLinkToContainer(outputDiv, url);
}

function addLinkToContainer(container, url){
    let newlink = document.createElement('a');
    newlink.setAttribute('href', url);
    newlink.innerHTML = url;
    container.appendChild(newlink);
}

<input id="input-box" type="text" /><button onclick="onClick()">Go</button>
<div id="output"></div>

Answer 2

Если необходимо добавлять, а не менять ссылку при нажатии:

add.onclick = function () {
    let val = document.getElementById('inp').value; // Получаем значение введённых данных
    let main = document.getElementsByClassName('main'); // Получаем блок родителя
    let div = document.createElement('div'); // Создаём div
    let a = document.createElement('a'); // создаём элемент a
    val = 'https://site.ru/track?' + val; // Добавляем к ссылке введённые данные
    a.innerText = val; // В текст <a> вставляем сформированную ссылку
    a.setAttribute('href', val); // Вставляем в href ссылку для кликабельности
    div.appendChild(a); // Добавляем атрибут a в div
    main[0].appendChild(div); // добавляем div в родительский блок.
}

<div class="main">
    <input id="inp">
    <button id="add">Добаивть ссылку</button>
</div>

БЛОГ НА HUSL

Подставить заготовленному url то, что введено в input и вывести в div

Ответы (2 шт):