Welcome to Software Development on Codidact!
Will you help us build our independent community of developers helping developers? We're small and trying to grow. We welcome questions about all aspects of software development, from design to code to QA and more. Got questions? Got answers? Got code you'd like someone to review? Please join us.
Move to the edit webpage of a webpage via the keyboard with vanilla JavaScript
The webpage example.com has an edit webpage (from which one can edit example.com itself).
example.com/index.php?title=עמוד_ראשי&action=edit
I want that after I click ALT+Shift+E, I would immediately be transferred to that edit page.
What console command could I run to move myself from example.com to example.com's edit page?
I didn't figure out a code but I assume that such code would be very similar to this:
let domain = window.location.hostname;
let h1 = document.getElementsByTagName("h1");
window.addEventListener('keydown', function(event) {
if (event.altKey && event.shiftKey && event.key === 'e') {
window.location.href === "domain?title=h1&action=edit"
}
});
1 answer
The following users marked this post as Works for me:
| User | Comment | Date |
|---|---|---|
| user56529 | (no comment) | Apr 21, 2022 at 08:57 |
You're getting close, just need a few adjustments.
Instead of using the hostname property, I prefer to use host, because it also includes the port (in case the URL has one) - check the documentation for more info.
You should also get the protocol (which can be http, https, etc), to build the full URL. Without it, you might not get what you want: suppose the current page is https://software.codidact.com/posts/286256. If I run this code:
let domain = window.location.host;
window.location.href = domain + '?abc=1';
The result will be the URL https://software.codidact.com/posts/software.codidact.com?abc=1. Only by including the protocol at the beggining (before the domain), I get the correct URL (https://software.codidact.com/?abc=1).
To set the URL you should use =, not === (the difference is explained here).
Not sure how you're using the h1 element, I guess you wanted to get its text? I included an example below, that gets the innerText property, which contains whatever text is inside the h1 tag.
And finally, when the shiftKey property is set, the corresponding key will be uppercased, so instead of checking for e, you actually should check for E.
The final code:
let domain = window.location.host;
let protocol = window.location.protocol;
let h1 = document.querySelector("h1");
window.addEventListener('keydown', function(event) {
if (event.altKey && event.shiftKey && event.key === 'E') {
window.location.href = `${protocol}//${domain}?title=${h1.innerText}&action=edit`;
}
});
Note that I used template strings to put the variables values inside a single string. Note that the delimiter is the character ` - you're using double quotes, so "domain?title=h1&action=edit" doesn't put the value of the domain variable in the string (instead, it puts the word "domain", which is not what you want).
But you could also use old-style concatenation:
window.location.href = protocol + '//' + domain + '?title='+ h1.innerText + '&action=edit';
1 comment thread
0 comment threads