So, I have some links in my page (< a > type), marked with different ID-s. They have those attributes:
id - the unique id of each link
href - the URL, that will open in new tab /!important -> The link needs to be opened in new tab!/
target="_blank" - for the link to open in new tab
So, the links look like:
<a id="a1" href="thelink" target="_Blank">Link1</a>
<a id="a2" href="thelink" target="_Blank">Link2</a>
<a id="a3" href="thelink" target="_Blank">Link3</a>
etc..
I want when one link is clicked, the URL to open in a new tab, and the link in the original page to be disabled, but not that way:
<a id="a3" href="#" target="_Blank">Link1</a
I tried using onclick to remove the "href" attribute and onclick to empty the "href" attribute but the link doesnt open, as the onclick fires first and removes the "href" element, before the link opens in new tab and the effect is not the one that i want.
Got some Ideas guys?
You can do it like this
<a id="a3" href="http://stackoverflow.com" onclick="a(this);">Link3</a>
<a id="a4" href="http://google.com" onclick="a(this);">Link4</a>
<a id="a5" href="http://wikipedia.org" onclick="a(this);">Link5</a>
<script>
function a(t) {
var href = t.getAttribute("href");
if(href==null || href=="") return;
window.open(href,'_blank');
t.removeAttribute("href");
}
</script>
How about
window.onload=function() {
document.getElementById("a1").onclick=function() {
setTimout(function() {document.getElementById("a1").disabled=true;},10)
}
}
You can do it through events using a class name as an indicator
http://jsfiddle.net/pyQV2/
In this example I added every link a class, just to indicate the function to target it. Then, on page load I attach an onclick event to each link.
var links = document.getElementsByClassName('notclicked');
for (var i=0; i<links.length; i++) {
links[i].onclick = function(e) {
if (e.target.className == 'notclicked')
e.target.className = 'clicked';
else {
if (e.preventDefault)
e.preventDefault();
else /* for IE */
e.returnValue = false;
}
}
}
If it has the old class, just change it for future clicks. If it has the new class, just stop the event.
Related
So I have something like this in my html:
<a id="one" href="/index.html"> HOME </a>
<a id="two" href="/something.html"> SOMETHING </a>
<a id="three" href="/again.html"> AGAIN </a>
and if for example user is on page linked "..../index.html" and tries to click on "HOME" link button, it does nothing or fake redirects or its disabled to be clickable, same goes for other href buttons if the user is already on the page the buttons are redirecting to, and user tries to click on them, I have been looking everywhere but all solutions for this problem requires you to use JQuery, and I would like to not use libraries as much as possible, any solutions?
For simplicity, add a class to all menu links in which you want this behavior
<a class="locationLink" id="one" href="/index.html"> HOME </a>
<a class="locationLink" id="two" href="/something.html"> SOMETHING </a>
<a class="locationLink" id="three" href="/again.html"> AGAIN </a>
And check this:
var links = document.getElementsByClassName("locationLink");
for (var i = 0; i < links.length; i++) {
var link = links[i];
if (link.classList.contains('locationLink') && location.href == link.href) {
link.addEventListener("click", function (event) {
event.preventDefault();
});
break;
}
}
Basically, you get all links and check only your locationLinks. If the current url is equals to the href, you add an event listener that blocks the navigation. Maybe you need some debugging in the "location.href == link.href" because relative/absolute urls (you can refer to https://stackoverflow.com/a/44547904/18452174) but it's working.
If your menu can change dynamically, you can try this other approach:
document.addEventListener("click", function (event) {
var link = event.target;
if (link.classList.contains('locationLink') && location.href == link.href) {
link.addEventListener("click", function (event) {
event.preventDefault();
});
}
}, false);
You do the same but check the condition in each document click instead only one time in document load.
I want to single out the href="" tag from the following a tag
<a class="details" href="examplelink.php">Example</a>
On top of that i want to change that href with a javascript function
Appreciate any help.
You can use setAttribute() to set the property and getAttribute() to get the property:
var el = document.querySelector('.details');
el.setAttribute('href','https://stackoverflow.com/');
console.log(el.getAttribute('href'));
<a class="details">Stackoverflow</a>
You can add onClick function to a tag , it fires before the href so it will change before the page is opened, you need to make the function handle the window opening like so:
<a onClick="changeLink">Click to set href</a>
function changeLink() {
var link = document.getElementById("mylink");
window.open(
link.href,
'_blank'
);
link.innerHTML = "facebook";
link.setAttribute('href', "http://facebook.com");
return false;
}
I've got about 10 buttons of class "serviceButton" that also contain a custom attribute called "about". They look like this:
<li>
<button type="button" class="serviceButton serviceButton-red" about="http://blabla">Identity Service</button>
</li>
<li>
<button type="button" class="serviceButton serviceButton-red" about="http://secondLink,etc">VPN</button>
</li>
I've also got some javascript on the page which loops through all buttons of that class and attaches a listener to them that is going to get the value of the about attribute and open up a new window by that. (I am trying to make the site work both on mobile/touch events and desktop/click events).
var classname = document.getElementsByClassName("serviceButton");
var open = function() {
var attribute = this.getAttribute("about");
alert("start");
var win = window.open(attribute, '_blank');
win.focus();
alert("stop");
};
for (var i = 0; i < classname.length; i++) {
classname[i].addEventListener('touchstart', open, false);
}
The first alert gets called successfully, whereas the second one does not; neither does a new tab open. How can I solve this issue by using just js?(No jQuery etc...)
Avoid attaching multiple eventListeners like this, and add it the parent instead.
Here's an exemple, with onclick event, you can adapt it to your problem and it should do the trick.
http://jsfiddle.net/3r7rq8vc/
<ul>
<li about="http://www.google.com">Google</li>
<li about="http://www.devrant.io">Devrant</li>
</ul>
<script>
var listParent,
listenerId,
openLink;
openLink = function(e) {
var targetLink = e.target.getAttribute('about');
// Trying to open
window.open(targetLink, '_blank')
}
// Prefer adding event listener to the parent
listParent = document.querySelector('ul');
listenerId = listParent.addEventListener('click', openLink);
</script>
This is the code of a button in one html page
<a class="btn" role="button" href="#">Click me</a>
I have this javascript code to click a button with a certain class
var clickBtn = document.getElementsByClassName('btn');
for(var i=0;i<clickBtn.length;i++)
{
clickBtn[i].click();
}
This code clicks every button with the class "btn" in ALL the page.
But there are some other buttons in the same page with the same class.
So i want my javascript code to be modifided to click
only a certain button in a certain div.
The code with the div is
<div class="inside">
<span>
<a class="btn" role="button" href="#">Click me</a>
</span>
</div>
Any idea of how can i modify my javascript code to click only the button inside that div??
Thanks for your time.
You can use querySelectorAll()
Array.from(document.querySelectorAll('.inside .btn')).forEach(btn => {
alert(btn.innerHTML)
btn.click();
});
Or without es6:
[].slice.call(document.querySelectorAll('.inside .btn')).forEach(function(btn) {
alert(btn.innerHTML)
btn.click();
});
DEMO
Updated for your comment (Can you update your code that if there is an id in the span like not to click the button?):
[].slice.call(document.querySelectorAll('.inside .btn')).forEach(function(btn) {
if (btn.parentNode.id != 'clicked') {
alert(btn.innerHTML);
btn.click();
}
});
or you can use querySelectorAll() with a :not condition to avoid the if check:
Array.from(document.querySelectorAll('.inside span:not([id="clicked"]) .btn'))
.forEach(btn => {
alert(btn.innerHTML)
btn.click();
});
If you want a non-jQuery solution, you can use getElementById to get the div, and then getElementsByClassName to get all the buttons within that div.
var insideDiv = document.getElementById("inside");
var buttonsInsideDiv = insideDiv.getElementsByClassName();
var parentDiv = clickBtn[i].parentNode;
var clickBtn = document.getElementsByClassName('btn');
for(var i=0;i<clickBtn.length;i++)
{
var parentDiv = clickBtn[i].parentNode;
if(parentDiv == yourDiv)
{
clickBtn[i].click();
}
}
I am not sure, var parentDiv = clickBtn[i].parentNode will work. But the idea is the same.
I'm trying to automate a click when visting a website. This is the HTML I'm looking at.
<div class="box_wrapper">
<a id="itemcode_11094414" class="box">7.5</a>
<a id="itemcode_11094415" class="box">8</a>
<a id="itemcode_11094416" class="box">8.5</a>
</div>
when I select the size, say for instance size 8, the class= tag turns to "box active" like so,
<div class="box_wrapper">
<a id="itemcode_11094414" class="box">7.5</a>
<a id="itemcode_11094415" class="box active">8</a>
<a id="itemcode_11094416" class="box">8.5</a>
</div>
How can I go loop through the class and select a desired size? Also, I was just tinkering around and noticed that I had a hard time simulating a click on the add to cart and other buttons. For the add to cart the HTML looks like this,
<div class="add_to_cart">
<div class="add_to_cart_left">
<img id="add_to_bag_btn" alt="Add To Bag" src="/images/add_to_bag.gif"></img>
<img id="add_to_bag_btn_processing" alt="" src="/images/add_to_bag_processing.gif"></img>
</div>
</div>
Is this the correct chunk of HTML I should be looking at for a simulation of a click?
Since it's Christmas and you sounded excited to see jQuery in action I created a fiddle for you. Here is a sample of what you (could) want using jQuery: http://jsfiddle.net/akkJ5/2/
The code for selecting sizes and twiddling active classes is as follows:
var selectedSize = '';
$(".box").click(function(){
$(".box").removeClass('active');
$(this).addClass('active');
selectedSize = $(this).html();
$("#messages").html(selectedSize +" was selected");
});
In it I create an event listener for clicks on all box class elements. Since only one should be active I remove the active class from all box class elements then add active to the clicked box. I save the innerHTML of the selected link as selectedSize, and write it to an element for display sake.
In terms of simulating a click on a button you could do something like this:
$(".add_to_cart").click(function(){
alert('cart clicked');
});
$(".add_to_cart").trigger('click');
Updated
To attach event to all the classed you can do
var selectedvalue = '';
for(var i = 0; i < document.getElementsByClassName('box').length; i++ ) {
var d = document.getElementsByClassName('box')[i];
d.onclick = function (e) {
selectedvalue = this.text;
this.className = this.className + " active";
}
}
Check http://jsfiddle.net/raunakkathuria/Nv8t2/2/
To navigate through classes and add your class to the link that has same value
JS
var value = 8;
for(var i = 0; i < document.getElementsByClassName('box').length; i++ ) {
var d = document.getElementsByClassName('box')[i];
if(d.text == value) {
d.className = d.className + " active";
}
}
To simulate the click handler for the add to cart you can enclose them to
<a href="javascript:void(0)" onclick="myJsFunc();">
<img id="add_to_bag_btn" alt="Add To Bag" src="/images/add_to_bag.gif"></img>
</a>
If you want to send it some link update this href="javascript:void(0)" onclick="myJsFunc();" to href="your_link"
Check http://jsfiddle.net/raunakkathuria/Nv8t2/1/