Tips for appending the id of an active element to a URL

Question

Tips for appending the id of an active element to a URL

My goal was to include the id value of the active element in a URL and then redirect to that URL with a button click.

HTML

<div class="icon" tabindex="0" id="company">
    <img src="company.png">
</div>
<button type="submit" onclick="myFunction()">jump</button>

Javascript

function myFunction(){
   var x = document.activeElement.id;
   location.href = "apps-online.html?page=" + x;
}

When clicking the button, my expectation was to be redirected to:

"apps-online.html?page=company"

However, the url ended up being:

"apps-online.html?page="

I'm puzzled as to why the value of x wasn't added to the url.

Hello everyone. I have now realized why this issue occurred. Each time the button is clicked, it becomes the last active element.

Is there a way to solve this and achieve my desired result?

javascript jquery html css

Answer 1

Answer №1

Make sure to verify the value of x to see if it is empty. If x is empty, then the URL will have no value. Try troubleshooting the code or utilize console.log.

function myFunction(){
   var x = document.activeElement.id;
   console.log(x);
   location.href = "apps-online.html?page=" + x;
}

This will display the value of x in the console for verification purposes.

Answer 2

Make sure to verify the value of x to see if it is empty. If x is empty, then the URL will have no value. Try troubleshooting the code or utilize console.log.

function myFunction(){
   var x = document.activeElement.id;
   console.log(x);
   location.href = "apps-online.html?page=" + x;
}

This will display the value of x in the console for verification purposes.

Answer 3

Answer №2

Looks like your button is missing an id.

Add id="company" to the button element.

<div class="icon" tabindex="0">
  <img src="company.png">
</div>
<button id="company" type="submit" onclick="myFunction()">jump</button>

Answer 4

Looks like your button is missing an id.

Add id="company" to the button element.

<div class="icon" tabindex="0">
  <img src="company.png">
</div>
<button id="company" type="submit" onclick="myFunction()">jump</button>

Answer 5

Answer №3

When you press the button, the highlighted element is the button itself. Let's say you have multiple divs and you want to pass the id of the selected element. There needs to be a way to transfer the id to the function.

Check out the example below for one possible solution.

HTML

<div class="icon" tabindex="0" id="company">
    <img src="company.png">
</div>
<div class="icon" tabindex="1" id="something">
    <img src="something.png">
</div>
<button type="submit" onclick="myFunction()">jump</button>

JS

let tabID = null;
let icons = document.getElementsByClassName('icon');

for (icon of icons) 
{
    icon.onclick = function() 
    {
        tabID = document.activeElement.id;
    }
}

function myFunction()
{
    window.open("apps-online.html?page=" + tabID);
}

Answer 6

When you press the button, the highlighted element is the button itself. Let's say you have multiple divs and you want to pass the id of the selected element. There needs to be a way to transfer the id to the function.

Check out the example below for one possible solution.

HTML

<div class="icon" tabindex="0" id="company">
    <img src="company.png">
</div>
<div class="icon" tabindex="1" id="something">
    <img src="something.png">
</div>
<button type="submit" onclick="myFunction()">jump</button>

JS

let tabID = null;
let icons = document.getElementsByClassName('icon');

for (icon of icons) 
{
    icon.onclick = function() 
    {
        tabID = document.activeElement.id;
    }
}

function myFunction()
{
    window.open("apps-online.html?page=" + tabID);
}

Tips for appending the id of an active element to a URL

Answer №1

Answer №2

Answer №3

Similar questions

Using AngularJS to manage cookies along with arrays

Adjusting the size of the jQuery window in Google Chrome

How to align an unordered list vertically in the center using Bootstrap?

Analyzing all the <option> elements within a <select> tag with jQuery

Is there a way to run a node script from any location in the command line similar to how Angular's "

What is the best way to iterate through an array of objects in React and JavaScript, adding a new property to each object in order to generate a new array

ng-repeat and $scope problem

Creating a flexible image layout within a container with relative positioning

Creating a complete webpage using HTML

Display a loading dialog when an AJAX request is made

On certain websites, the footer may appear distorted or incorrectly displayed when viewed in the IE 9 web browser

The issue of passing state in React Router v4 Redirect unresolved

vertically centering a div specifically on laptops

Tips for looping through nested JSON data in Google Sheets

Retrieve the key{index} property from the .map method in React for the element that was just clicked

Updating an array in Vue.js without the need to reload all the data

Incorporating an HTML/Javascript game into a reactJS website: A step-by-step

Display the loading status while fetching data

How come the inclusion of a DOCTYPE tag impacts the styling of my CSS?

Exploring ways to retrieve items from a JSON array in Node.js, ideally avoiding traditional iteration methods