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>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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