Как сделать селект из ссылок и вывести результат?

Question

[devsetup]

Как вывести span название Test1 или Test1 в результат ?

<a class="menu-link px-3" data-bs-toggle="tab" href="#test1" role="tab">
    <span class="menu-title">Test1</span>
</a>
<a class="menu-link px-3" data-bs-toggle="tab" href="#test2" role="tab">
    <span class="menu-title">Test2</span>
</a>
 <span class="menu-title" id="result"></span>

Comments

[Михаил Р.]

Как сделать селект из ссылок и вывести результат?

Что такое "селект"? Что такое "вывести результат"?

[ProjectSoft]

let linkSpan = document.querySelectorAll('a > span');
linkSpan.forEach((e) => {
	console.log(e.textContent.trim());
});

Answer 1

[Геннадий]

Если нужно выводить при нажатии по ссылке, то вешаете событие на клик по ссылке и в коде выводите содержимое span в ссылке в результат.

let elements = document.getElementsByClassName("menu-link");

	let myFunction = function() {
	    let nodes = this.childNodes;
	    for (let node of nodes) {
	    	if (node.classList.contains("menu-title")) {
	    		let result = document.getElementById("result");
	    		result.innerText = node.innerText;
	    	}
	    }
	};

	for (let i = 0; i < elements.length; i++) {
	    elements[i].addEventListener('click', myFunction, false);
	}

Либо можно через JQuery:

$(".menu-link").click(function() {
		$("#result").text($(this).text());
	});

Как подключить JQuery, я думаю вам объяснять не надо. Даже, если не знаете, это гуглится за 2 минуты.

Comments

[devsetup]

спасибо