I am beginner web developer. I have small problem with my code:
var nodes = document.querySelectorAll('.breadcrumb-item');
if(nodes != undefined && nodes !=''){
var first = nodes[0];
console.log('xxxxxx' , first);
}
It's return me:
[Log] xxxxxx
<li role="presentation" class="breadcrumb-item">
<a href="#/" class="router-link-active" target="_self"> Home </a>
</li>
I need check:
How can I make it?
I have dynamic string. For example:
<li role="presentation" class="breadcrumb-item">
<a href="#/" class="router-link-active" target="_self"> Home </a>
</li>
<li role="presentation" class="breadcrumb-item">
<a href="#/dogs" class="router-link-active" target="_self"> Dogs </a>
</li>
<li role="presentation" class="breadcrumb-item">
<a href="#/calls" class="router-link-" target="_self"> calls </a>
</li>
<li role="presentation" class="breadcrumb-item">
<a href="#/catds" class="router-link-" target="_self"> cats </a>
</li>
I need replace URL ONLY for Home
I've written assuming that <a href="#/">Home </a> will always be first in order. If you're going to change its order, you'll will have to change the index for nodes inside if block.
const nodes = document.querySelectorAll(".breadcrumb-item");
if (nodes.length > 0) {
const first = nodes[0].firstElementChild;
first.href = "/dashboard";
console.log(first);
}
Previous answer is correct. Maybe the following gives you a clearer understanding:
const nodes = document.querySelectorAll('.breadcrumb-item');
if (nodes.length > 0) {
const first = nodes[0].firstElementChild;
let currentUrlTitle = first.text.trim().toLowerCase();
if (currentUrlTitle == 'home') {
console.log(first.text);
first.href = '/dashboard';
console.log(first.href);
} else {
console.log(currentUrlTitle);
}
}