0

Возникли трудности при изучении 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>

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

2
  • А с чем именно у вас проблемы? Что уже пытались сделать? 10 мар 2020 в 11:46
  • Как возникла проблема с конкатенацией двух строк?
    – lezhni
    10 мар 2020 в 12:36

2 ответа 2

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>

1
  • 1
    Благодарю за решение и отдельно за комментарии к коду, они помогли мне понять как что работает) 11 мар 2020 в 10:28
2

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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.