Как получить содержание слова из элемента и добавить его в конец URL-адреса href?

Question

В Anki есть функция под названием «ссылка на словарь», как объясняется в руководстве:

Ссылки на словарь

Вы также можете использовать замену поля для создания ссылок на словарь.

Представьте, что вы изучаете язык, и ваш любимый онлайн-словарь позволяет искать текст с помощью веб-URL, например: http://example.com/search?q=myword

Вы можете добавить автоматическую ссылку, выполнив следующие действия вВаш шаблон:

{{myword}}

<a href="http://example.com/search?q={{myword}}">check in dictionary</a>

Приведенный выше шаблон позволит вам искать выражение каждой заметки, щелкая ссылку во время просмотра.

Сейчас я изучаю HTML + CSS + Javascript с нуля, я хотел бы добавить аналогичный инструмент на моем собственном сайте практики. Я хочу скопировать текстовое содержимое (слово, которое я хочу проверить в словаре) элемента, добавить его в конец URL-адреса. Когда я нажимаю на ссылку, появляется соответствующая страница словаря.

Например:

<span id="search">entry</span>

скопировать "запись" и добавить ее в конец

<a id="dictionary" href="http://example.com/search?q=">link</a>

Поскольку я начинающий, я еще не изучил jQuery или другие инструменты. Возможно ли сделать это только с помощью HTML и Javascript?

Answer 1

const search = document.getElementById("search");
const link = document.getElementById("dictionary");

link.href = `http://example.com/search?q=${search.innerText}`;

Вы должны присвоить новое свойство href для link, получив innerText из search элемента

Answer 2

document.getElementById("myLink").href = customLink установит ссылку на ваш a элемент

//get input element
var inputElement = document.getElementById('param-input');
// add event to listen every time a letter is introduced
inputElement.addEventListener("keyup", composeUrl);


function composeUrl() {
   // get value from input
   var param = inputElement.value;
   // compose url 
   var customLink = "http://example.com/search?q=" + param
   //set href 
   document.getElementById("myLink").href = customLink
   //get href
   var result = document.getElementById("myLink").href;
   //print link in a div
   document.getElementById("demoLink").innerHTML  = result.toString()
}
 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input id="param-input" />

<a id="myLink" />

<div id="demoLink"> url composed </div>

Answer 3

Попробуйте ссылку и попробуйте обойти

function clicks(){
 var foo = document.getElementById("dictionary").id
 $("a").attr("href", "http://example.com/"+foo+"?q=")
}

Answer 4

Вы пытались использовать эти апекс:

<a href=`http://example.com/search?q=${myword}`>check in dictionary</a>

В противном случае вам нужно построить ссылку с помощью js-скрипта, а затем присвоить элементу:

let link = 'http://example.com/search?q=' + customParam
// Fetch the tag <a>
let hrefElement = document.getElementById('#idElement');
// Change the href param with your link
hrefElement.href = link;