Breadcrumb

[loktoy]

anu po kaya mali dito sa code ko ayaw po magpakita sa console.log yun output
ito po code ko

<ul class="dropdown-menu text-small shadow" id="idnav">
<li><a class="dropdown-item" href="#"></a></li>
<li><a class="dropdown-item" href="#">Settings</a></li>
<li><a class="dropdown-item" href="#">Edit Profile</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="../login.php">Sign out</a></li>
</ul>
</div>
</div>
</div>
</nav >
<!-- End Nav -->
<!-- Start breadcrumb -->
<div class="pt-5 mt-3" id="brredcrumb">
<nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
<ul class="breadcrumb" id="brdcrumb">
<li class="breadcrumb-item active" aria-current="page"><a href="../user/dashboard.php">Home</a></li>
</ul>
</nav>
</div>
<script>
var breadcrumb = document.getElementById("brdcrumb");
var page = document.getElementById("idnav");
page.addEventListener("change",function(){
console.log(page.value);
});
</script>

 

[🤖]

The issue with your code is that you are trying to access the value property of an <ul> element (page.value). The value property is typically used with form elements like <input> or <select>, not with <ul>.

To fix this issue, you need to change your code to access the textContent property of the <a> element inside the <li>. Here's the corrected code:

<script>
    var breadcrumb = document.getElementById("brdcrumb");
    var links = breadcrumb.getElementsByTagName("a");

    for (var i = 0; i < links.length; i++) {
        links[i].addEventListener("click", function() {
            console.log(this.textContent);
        });
    }
</script>

This code retrieves all the <a> elements inside the <ul> element with the id "brdcrumb" and adds a click event listener to each of them. When a link is clicked, it logs the text content of that link to the console.

 

[loktoy]

The issue with your code is that you are trying to access the value property of an <ul> element (page.value). The value property is typically used with form elements like <input> or <select>, not with <ul>.

To fix this issue, you need to change your code to access the textContent property of the <a> element inside the <li>. Here's the corrected code:

<script>
    var breadcrumb = document.getElementById("brdcrumb");
    var links = breadcrumb.getElementsByTagName("a");

    for (var i = 0; i < links.length; i++) {
        links[i].addEventListener("click", function() {
            console.log(this.textContent);
        });
    }
</script>

This code retrieves all the <a> elements inside the <ul> element with the id "brdcrumb" and adds a click event listener to each of them. When a link is clicked, it logs the text content of that link to the console.

<ul class="dropdown-menu text-small shadow" id="idnav">
<li><a class="dropdown-item" href="#"></a></li>
<li><a class="dropdown-item" href="#">Settings</a></li>
<li><a class="dropdown-item" href="#">Edit Profile</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="../login.php">Sign out</a></li>
</ul>
</div>
</div>
</div>
</nav >
<!-- End Nav -->
<!-- Start breadcrumb -->
<div class="pt-5 mt-3" id="brredcrumb">
<nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
<ul class="breadcrumb" id="brdcrumb">
<li class="breadcrumb-item active" aria-current="page"><a href="#">Home</a></li>
</ul>
</nav>
</div>
<script>
var breadcrumb = document.getElementById("brdcrumb");
var link = document.getElementsByTagName("a");
for (var i = 0; i <link.length; i++){
link.addEventListener("click",function(){

var currentPage = this.value;
var li = document.createElement("li");
li.setAttribute("class","breadcrumb-item");
li.setAttribute("aria-current","page");
li.innerText = currentPage;
breadcrumb.appendChild(li);
});
}
</script>


ganito po undefined lumalabas

 

[🤖]

<ul class="dropdown-menu text-small shadow" id="idnav">
<li><a class="dropdown-item" href="#"></a></li>
<li><a class="dropdown-item" href="#">Settings</a></li>
<li><a class="dropdown-item" href="#">Edit Profile</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="../login.php">Sign out</a></li>
</ul>
</div>
</div>
</div>
</nav >
<!-- End Nav -->
<!-- Start breadcrumb -->
<div class="pt-5 mt-3" id="brredcrumb">
<nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
<ul class="breadcrumb" id="brdcrumb">
<li class="breadcrumb-item active" aria-current="page"><a href="#">Home</a></li>
</ul>
</nav>
</div>
<script>
var breadcrumb = document.getElementById("brdcrumb");
var link = document.getElementsByTagName("a");
for (var i = 0; i <link.length; i++){
link.addEventListener("click",function(){

var currentPage = this.value;
var li = document.createElement("li");
li.setAttribute("class","breadcrumb-item");
li.setAttribute("aria-current","page");
li.innerText = currentPage;
breadcrumb.appendChild(li);
});
}
</script>


ganito po undefined lumalabas

The issue with your code is that you are trying to access the value property of the <a> element (this.value) when it doesn't have a value attribute. Instead, you need to access the text content of the <a> element using the textContent property.

Here's the corrected code:

<script>
    var breadcrumb = document.getElementById("brdcrumb");
    var links = document.querySelectorAll("#brdcrumb a");

    for (var i = 0; i < links.length; i++) {
        links[i].addEventListener("click", function() {
            var currentPage = this.textContent;
            var li = document.createElement("li");
            li.setAttribute("class", "breadcrumb-item");
            li.setAttribute("aria-current", "page");
            li.innerText = currentPage;
            breadcrumb.appendChild(li);
        });
    }
</script>

In this code, I've used document.querySelectorAll("#brdcrumb a") to select all the <a> elements inside the <ul> element with the id "brdcrumb". Then, I iterate through the links and add a click event listener to each one. When a link is clicked, I retrieve its text content using this.textContent and create a new <li> element to append to the breadcrumb.

 

[loktoy]

The issue with your code is that you are trying to access the value property of the <a> element (this.value) when it doesn't have a value attribute. Instead, you need to access the text content of the <a> element using the textContent property.

Here's the corrected code:

<script>
    var breadcrumb = document.getElementById("brdcrumb");
    var links = document.querySelectorAll("#brdcrumb a");

    for (var i = 0; i < links.length; i++) {
        links[i].addEventListener("click", function() {
            var currentPage = this.textContent;
            var li = document.createElement("li");
            li.setAttribute("class", "breadcrumb-item");
            li.setAttribute("aria-current", "page");
            li.innerText = currentPage;
            breadcrumb.appendChild(li);
        });
    }
</script>

In this code, I've used document.querySelectorAll("#brdcrumb a") to select all the <a> elements inside the <ul> element with the id "brdcrumb". Then, I iterate through the links and add a click event listener to each one. When a link is clicked, I retrieve its text content using this.textContent and create a new <li> element to append to the breadcrumb.

wala po lumabas

 

[🤖]

wala po lumabas

Apologies for the confusion earlier. After reviewing your code, I noticed that you are trying to dynamically add breadcrumb items when a link is clicked. However, there is a mistake in your event listener assignment.

The issue lies in the line page.addEventListener("change", function(){...}). You are using the "change" event, which is typically used with form elements like inputs or selects. In this case, you need to use the "click" event instead, as you want to trigger the code when a link is clicked.

Here is the corrected code:

<script>
    var breadcrumb = document.getElementById("brdcrumb");
    var links = document.querySelectorAll("#brdcrumb a");

    for (var i = 0; i < links.length; i++) {
        links[i].addEventListener("click", function(e) {
            e.preventDefault(); // Prevent the default behavior of the link
            var currentPage = this.textContent;
            var li = document.createElement("li");
            li.setAttribute("class", "breadcrumb-item");
            li.setAttribute("aria-current", "page");
            li.innerText = currentPage;
            breadcrumb.appendChild(li);
        });
    }
</script>

In this code, I've modified the event listener assignment to use the "click" event. Additionally, I added e.preventDefault() to prevent the default behavior of the link, so that the page doesn't navigate to a new URL.

Now, when you click on a link within the breadcrumb, it should add a new breadcrumb item with the corresponding page name.