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

Utilizing REACT to extract values from deeply nested JSON structures

"Clicking on the 'View More' button within a foreach loop is only functional for the

QuickCopy - Capture only what's in view

What is causing the width discrepancy in my header section on mobile devices?

Creating a unique seal, badge, or widget in Django is a fun and rewarding project

Creating dynamic pagination in React using a variable length loop

"Maximizing Efficiency: Chaining Several Actions Using the JavaScript Ternary Operator

"Incorporate multiple data entries into a table with the help of Jquery

Is there a way to properly dissect or iterate through this?

Tips on converting deeply nested JSON into an excel file using Node.js

Is there a way to retrieve MongoDB count results in Node.js using a callback function?

Placing a pseudoelement amidst the track and thumb of a range input type

Prevent lengthy headers from disrupting the flow of the list items

Utilize the inverse mapping method along with conditional statements inside a mapping function

Add a plethora of images to the canvas

Testing a React component's function within the confines of a Redux Provider component

Discovering the geometric boundaries of a body of text

Retrieve all the items listed in the markdown file under specific headings

What's the best way to unpack the gzip data that Ajax sends to JavaScript?

Combining Laravel with React