I'm learning how to write a chrome extension, and I'm fairly new to javascript.
Here's some html:
<div class="button data" style="">
<a class="button1 whiteColor" href="http://link1.com">VIEW This</a>
<a class="button2 redColor" href="http://link2.com">VIEW That</a>
</div>
What I want to do is open link2.com by automatically clicking button2 using javascript.
I'm using the following, but it's not working :/
document.getElementByClassName("button2 redColor").click();
Any help would be appreciated!!
document.getElementsByClassName("button2 redColor")[0].click();
You need select index, because getElementsByClassName return the array
Related
You guys always help with my questions and I'm forever grateful for that!
I'm still new to programming and I'm having an issue with an HTML button. It's supposed to be a "message us" button that will connect to FB and then people can send a message to the fan page. The button works on just one page but we want to place this is some other pages where we're getting traffic but when I add it, it doesn't let me click on it, like it's just an image. I attached the code below.
You guys rock! Thank you in advance for your great suggestions!
<style>
.msgbtn{padding:0 16px;border-radius:6px;background:#4fa7f9;color:white;font-weight:bold;width:120px;}
.msgbtn img{height:32px;width:36px;padding:4px 0;float:left;}
.msgbutoon a{color: white; text-decoration:none;}
.msgbutoon{padding:6px 10px;}
</style>
<div class="msgbutoon">
<a href="https://m.me/903262919698329" target="popup"
onclick="window.open('https://m.me/903262919698329','popup','width=600,height=500'); return false;">
<div class="msgbtn">
<img src="https://www.feelsocial.io/images/fbmsgr.png">
<span style="height:40px; line-height:40px;">Message Us</span>
</div>
</a>
</div>
Try adding this href to your anchor tag href="javascript:void(0);"
<div class="learnmore">
<a href="https://linktovideo" target="_self"
onclick="window.open('https://linktovideo','_self','width=600,height=600');
return false;" class="learn-btn">
Watch Video
</a>
</div>
Im still learning jQuery, but currently this is still opening the link in a new window. I thought applying the "_top" attribute opens the window on the current page. Is target_top not compatible with jQuery or am I over thinking this, thank you stack for any help!
Is there a specific reason you're trying to use jquery or javascript for this task? Simple html code will get what you want I believe.
<div class="learnmore">
<a href="https://d25ixnv6uinqzi.cloudfront.net/year3/uotw74.3.mp4" target="_self" class="learn-btn">
Watch Video
</a>
</div>
<div class="button">
<a class="testclass" href="javascript:actionx(objectId);"></a>
</div>
So the question is how do I initiate JavaScript bit using jQuery, I have tried:
window.location = javascript:actionx(objectId);
And some other similar variations, but they do not seem to work.
By the way, class is universal and all the buttons have it. The only thing that changes is the objectId.
If you are trying to redirect then you can try this:
html:
<div class="button">
<a class="testclass" href=" javascript:actionx(1234);">Redirect</a>
</div>
script:
function actionx(data){
//rest of the code without return
window.location="d3.php";//here your location to redirect
}
I'm working on a vanilla javascript project so I cannot use jQuery. I'm trying to use the following to move some HTML from one placement to another:
parent.appendChild(element);
I'm trying to place the forms into a different placement as I placed in the comment in my HTML code. I'm trying this but it's not working at all.
Javascript:
var loginButton = document.querySelector('[data-login-header-button]');
var loginDropdown = document.querySelector('[data-login-dropdown]');
var shopCartButton = document.querySelector('[data-shopping-cart-header-button]');
var shopCartDropdown = document.querySelector('[data-shopping-header-cart]');
shopCartButton.parentNode.appendChild(shopCartDropdown);
loginButton.parentNode.appendChild(loginDropdown);
HTML:
<header>
<nav data-nav-services>
<ul class="nav-services">
<li data-test>
<a class="icon icon-shopping-cart icon-arrow-down" href="#" data-shopping-cart-header-button>
shopping cart
</a>
<!-- PLACEMENT FOR data-shopping-header-cart -->
</li>
<li>
<a class="icon icon-user icon-arrow-down" href="#" data-login-header-button>
Login
</a>
<!-- PLACEMENT FOR data-login-dropdown -->
</li>
</ul>
</nav>
<form class="login-dropdown" data-login-dropdown>
...CONTENT...
</form>
<form class="shopping-cart" data-shopping-header-cart>
..CONTENT..
</form>
</header>
The strange thing is that if I turn around the selectors (as here below) it does work and I cannot explain why...
shopCartDropdown.parentNode.appendChild(shopCartButton);
shopCartDropdown.parentNode.appendChild(loginButton);
When you do:
shopCartButton.parentNode.appendChild(shopCartDropdown);
loginButton.parentNode.appendChild(loginDropdown);
It actually works. It is just not showing anything since the forms are empty. Check your Dev Tools and inspect your HTML.
For anybody who wish to know, the code was perfect. The issue was that I was appending this form elsewhere of my code. So there was a conflict as one had a priority over the other. I could use .cloneNode(true) as a solution. I ended transforming that appending to my new goal and solved the issue.
Anybody out there... check all the code for any other appending of the same element. Good advice ;)
First of all, I want to say that I have seen some topics already with similar question. I have tried withe the responses of these topics, but I have not been able to find a solution for my problem. Maybe the difference is that I am using AngularJS
(HTML)
<li class="article-list_item" ng-repeat="noticia in news" >
<article class="article_news" id="newsBlock{{noticia.id}}" >
<header>
<h1 class="article_newsTitle">
<a href="http://www.google.es" rel="tooltip" title="{{noticia.title}}"
data-toggle="modal" ng-bind-html-unsafe="noticia.shortTitle"></a>
</h1>
</header>
</article>
(JS)
$(document).ready(function () {
$(".article_news").click(function (event) {
$(this).addClass("approved");
});
});
What I am trying to do is to add the class "Approved" to the object I am clicking.
But when I click the link inside the <article> , I dont want to add the Class. Instead, I want the browser to open the URL.
How can I do this? Must I use stopPropagation(), preventDefault() or similar? How should I use them?
Thanks in advance
Well, Angular automatic filter link action if you implement it in angular way. For implementing it in angular way you should create directive to bind click event which handles your issue. Still you can solve it like this.
ng-click="$event.stopPropagation()"
Your HTML
<article class="article_news" id="newsBlock{{noticia.id}}" >
<header>
<h1 class="article_newsTitle">
<a ng-click="$event.stopPropagation()" href="http://www.google.es" rel="tooltip" title="{{noticia.title}}"
data-toggle="modal" ng-bind-html-unsafe="noticia.shortTitle"></a>
</h1>
</header>
</article>