主页 / 问题 / 1092929
Accepted
StackOverflow
Asked:2020-03-10 19:30:27 +0000 UTC2020-03-10 19:30:27 +0000 UTC

用输入中输入的内容替换准备好的 url 并将其显示在 div 中

  • 772

学js有困难，需要在纯js上做：有输入框，有按钮。你需要这样做：

    • 在输入字段中输入数字和字母（例如 qy123456h）
    • 按下按钮
    • 该脚本采用预先准备好的url（例如 https://site.ru/track？）并在最后插入输入字段中输入的内容
    • 结果https://site.ru/track?qy123456h显示在div块中，如下所示：<div><a href="https://site.ru/track?123456">https://site.ru/track?qy123456h</a></div>

提供建议或更好的示例来说明如何实现这一点。

javascript

2 个回答

  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>

    • 2
  2. Best Answer

    如果您想在点击时添加而不是更改链接：

    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>

    • 2

相关问题