New to JS, just dipping in to solve a problem (I bet everyone says that!). I need to write a script to select an anchor and insert an <img>.
There are several <a>'s within a div that has an id of _nwa_social_logins. I need to add an img tag to one of those. I'm not sure of the best way of doing this.
It's a captive portal page served up by a product we use, and the bit I'm interested in looks like this:
<div id="_nwa_social_logins">
<a class="btn btn-facebook" href="<url>/guest/social-media.php?oauth_init=1&oauth=facebook" title="">
<i class="icon-facebook"></i> Facebook
</a>
<a class="btn btn-linkedin" href="https://<url>/guest/social-media.php?oauth_init=1&oauth=linkedin" title="">
<i class="icon-linkedin"></i> LinkedIn
</a>
<a class="btn btn-google" href="https://<url>/guest/social-media.php?oauth_init=1&oauth=google" title="">
<i class="icon-google"></i> Google
</a>
<a class="btn btn-twitter" href="https://<url>/guest/social-media.php?oauth_init=1&oauth=twitter" title="">
<i class="icon-twitter"></i> Twitter
</a>
<a class="btn btn-github" href="https://<url>/guest/social-media.php?oauth_init=1&oauth=azure" title=""><img src="images/icon-microsoft.png" align="middle">Microsoft Azure AD
</a>
<a class="btn btn-github" href="https://<url>/guest/social-media.php?oauth_init=1&oauth=amazon" title="">Amazon</a>
</div>
So far I have
let items = document.querySelector('#_nwa_social_logins a');
To be honest I don't know how to even check if that has selected anything.
I need to select the Amazon anchor and set an <img> for the button. If the selection above gives me a list of <a>s (objects?) can I loop through them and look for one that has an href value that ends with 'amazon'?
Thank you
You can do this:
<script>
window.addEventListener('load', () => {
let links = document.querySelectorAll('#_nwa_social_logins a');
links.forEach((link, index) => {
if (link.getAttribute("href").toLowerCase().lastIndexOf('amazon') >= 0)
link.innerHTML = '<img src="someimage">';
});
});
</script>
Related
I have the following piece of code in a script tag that I need to get working for all #tel ID elements on the page. I can only get it to work for the first #tel element. I've been trying to use .each function - but no luck...
The reason being is that I can't seem to get the ACF repeater URL to suit my needs here. The Advanced section of the dynamic content link part is not displaying. So I am trying to make a hack in an HTML widget for this.
But I need it to work for all buttons with button ID #tel.
Here's the code:
var link = document.getElementById('tel');
var href = link.getAttribute('href');
link.setAttribute('href', href.replace('http://', 'tel:'));
<div class="elementor-button-wrapper">
<a href="http://44400907" class="elementor-button-link elementor-button elementor-size-xs" role="button" id="tel">
<span class="elementor-button-content-wrapper">
<span class="elementor-button-text elementor-inline-editing" data-elementor-setting-key="text" data-elementor-inline-editing-toolbar="none">
44 40 09 07
</span>
</span>
</a>
</div>
In HTML/javascript element IDs must be unique. So in your case you can use class for that:
var links = document.querySelectorAll('.tel');
for(let i = 0; i < links.length; i++)
{
let link = links[i];
var href = link.getAttribute('href');
link.setAttribute('href', href.replace('http://', 'tel:'));
}
<div class="elementor-button-wrapper">
<a href="http://44400907" class="elementor-button-link elementor-button elementor-size-xs tel" role="button">
<span class="elementor-button-content-wrapper">
<span class="elementor-button-text elementor-inline-editing" data-elementor-setting-key="text" data-elementor-inline-editing-toolbar="none">44 40 09 07</span>
</span>
</a>
</div>
<div class="elementor-button-wrapper">
<a href="http://44400908" class="elementor-button-link elementor-button elementor-size-xs tel" role="button">
<span class="elementor-button-content-wrapper">
<span class="elementor-button-text elementor-inline-editing" data-elementor-setting-key="text" data-elementor-inline-editing-toolbar="none">44 40 09 08</span>
</span>
</a>
</div>
<div class="elementor-button-wrapper">
<a href="http://44400909" class="elementor-button-link elementor-button elementor-size-xs tel" role="button">
<span class="elementor-button-content-wrapper">
<span class="elementor-button-text elementor-inline-editing" data-elementor-setting-key="text" data-elementor-inline-editing-toolbar="none">44 40 09 09</span>
</span>
</a>
</div>
I am trying to scrape out some links from a site using javascript. In the below HTML I have some links in the 'a' tag. And I am using the following JS.
The problem is that I am not able to get the links from the myChildList.
When I console.log myDownloadDiv, it shows me the output as object HTMLElement. When I console.log the myChildList (i.e the children of the HTMLElement) I get something like a HTMLCollection [a.dropdown-item.disabled] in which the length is 2 and with both the anchor tags and with all their properties in it with the links.
When I want to console.log all the elements using a loop, it shows only one element and the output is like this:
<a class="dropdown-item disabled"></a>
I don't understand if I am doing something wrong while parsing out the HTMLCollection List.
var myDownloadDiv = document.getElementById("pickDownload");
var myChildList = myDownloadDiv.children;
console.log(myChildList);
for (var j of myChildList) {
console.log(j);
}
<div class="col-12 col-sm-3">
<div class="dropup">
<a href="" class="btn btn-secondary btn-block dropdown-toggle" id="downloadMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Download
</a>
<div class="dropdown-menu" id="pickDownload" aria-labelledby="downloadMenu">
<a href="https://fainbory.com/4eQM" class="dropdown-item" target="_blank">
<span class="badge badge-primary">BD</span> Elysium - 720p (129 MB)
</a>
<a href="https://fainbory.com/4eQP" class="dropdown-item" target="_blank">
<span class="badge badge-primary">BD</span> Elysium - 1080p (239 MB)
</a>
</div>
</div>
</div>
EDIT:
I tried the solutions. They work perfectly in the snippets but they are not working on the site which I am trying to scrape.
Your loop seems to work.
Perhaps you meant this
const links = [...document.querySelectorAll("#pickDownload a")].map(link => link.href);
console.log(links);
<div class="col-12 col-sm-3">
<div class="dropup">
<a href="" class="btn btn-secondary btn-block dropdown-toggle" id="downloadMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Download
</a>
<div class="dropdown-menu" id="pickDownload" aria-labelledby="downloadMenu">
<a href="https://fainbory.com/4eQM" class="dropdown-item" target="_blank">
<span class="badge badge-primary">BD</span> Elysium - 720p (129 MB)
</a>
<a href="https://fainbory.com/4eQP" class="dropdown-item" target="_blank">
<span class="badge badge-primary">BD</span> Elysium - 1080p (239 MB)
</a>
</div>
</div>
</div>
Here is a bookmarklet
javascript:(function() { const links = [...document.querySelectorAll("#pickDownload a")].map(link => link.href); console.log(links))()
your code is correct and works properly on my machine, I think there's an issue with your console object.
Please try to remove this import https://static.lalaping.com/online.js?ver=2.0.0:formatted
I suspect the console object is overwritten there.
You can verify this on you site, just running in the browser console the following commands:
// Restore console object:
var i = document.createElement('iframe');
i.style.display = 'none';
document.body.appendChild(i);
window.console = i.contentWindow.console;
// Run your code:
var myDownloadDiv = document.getElementById("pickDownload");
var myChildList = myDownloadDiv.children;
console.log(myChildList);
for (var j of myChildList) {
console.log(j);
}
jQuery on click function to tweet current quote doesn't want to work. What is wrong here. I have to build random quote machine and tweet current quote. I've managed to do JSON API but cannot figure out how to tweet current quote. Please help.
HTML:
<div class="container-fluid">
<div class = "well">
<div class="row">
<h2 class="text text-center"><i class="fa fa-quote-left"> </i> Hey, what when and why there is no and yes?</h2>
<p class="author">-Alina Khachatrian</p>
<div class="buttons">
<div class="row">
<div class="col-xs-6">
<a id="tweet-quote" title="Tweet current quote" target="_blank" href="#">
<i class="fa fa-twitter fa-2x"></i>
</a>
</div>
<div class="col-xs-6">
<button type="button" class="btn btn-default btn-transparent" id ="getNewQuote" title="Get a new quote">New Quote</button>
</div>
</div>
<footer class="text-center">
<hr>
<p>Written and coded by Edgar Kiljak.</p>
</footer>
</div>
</div>
JS:
$(document).ready(function(){
$(".btn").on("click", function(){
$.getJSON("http://quotes.stormconsultancy.co.uk/quotes.json", function (json) {
var html = "";
var len = json.length;
var index = Math.floor(Math.random() * len);
var val = json[index];
html += "<div class = 'newQuote'>";
html += "<h3>'" + val.quote + "'</h3>";
html += "</div>";
$(".author").text(val.author);
$(".text").html(html);
$('#tweet-quote').on("click",function(){
window.open("https://twitter.com/intent/tweet?text="+
$(val.quote).text() +"&via=your-app-name&original_referer=your-url");
});
});
});
});
First problem I had was that I couldn't even see the link to Tweet Current Quote. I had to add the text in the anchor:
<a id="tweet-quote" title="Tweet current quote" target="_blank" href="#">
<i class="fa fa-twitter fa-2x"></i>
TWEET CURRENT QUOTE
</a>
Second: it was popping up the new Twitter window, but not filling the text. In your onclick code, the $(val.quote).text() was unnecessary - just use val.quote
Third: you'll see that in addition to opening the new Twitter window, it is opening another occurrence of your own page. This has to do with how you have the tweet-quote anchor defined in your html, but the easiest way to stop it is to add return false in your onclick so that the target in the anchor doesn't fire:
$('#tweet-quote').on("click",function(){
window.open("https://twitter.com/intent/tweet?text="+
val.quote +"&via=your-app-name&original_referer=your-url");return false;
});
Fourth: if you load a second 'New Quote', and then click the 'Tweet This Quote', you'll see that it opens two new windows -- it is tweeting both the old and the new quotes. This is because the on("click") is cumulative. You should clear out any existing function before setting the new one:
$('#tweet-quote').unbind("click");
$('#tweet-quote').on("click",function(){
window.open ...
Fifth: Usually when you post a question here, "doesn't work" is not a sufficient explanation. You should explain what's not working, or what is working differently than you want it to. Error messages if there are any. What you saw in the console logs. Some people get real sticky about that. And some people will probably get sticky about me doing your homework for you. Good luck though!
<button id="search-district" type="button" class="btn btn-sm btn-success" data-toggle="popover" data-placement="bottom" title="<a href='#' class='pull-right popover-close' onclick='$("#search-district").popover("hide");'>×</a>" data-html="true" data-content="
<a id='id_district_100' href='#' onclick='ChangeDistrictSelection("100");'>District123</a>
"><span class="glyphicon glyphicon-plus"></span> Dsitricts <span id="district_bracket" style="display:none;">[<span id="count_districts_">0</span>]</span></button>
and JavaScript function
function ChangeDistrictSelection(id)
{
$('#id_district_'+id).addClass("selected");
}
When I'm clicked to District123, my JavaScript add Class "active"... But, after that when action popover on show, popover reset my class :(
What ever your selected css is you have to mark it with !important in order to override existing one.
Example
.selected {
background-color:gray !important;
}
Your question is not clear much. Please explain it we can help you so.
And also please not this also.
You are passing '100' to the function using onclick and then you are trying to get the element by id. But is already is equal to the id.
WHY??
You are doing wrong here. See your codes.
<a id='id_district_100' href='#' onclick='ChangeDistrictSelection("100");'>District123</a>
and you function also have a look
function ChangeDistrictSelection(id) {
//id will be 100 as your code.
//again you are trying to get the element by id. see your html <a id="id_district_100">
//It's already equal to $('#id_district_'+100) - why do you passing that 100 and trying to get element by id??
$('#id_district_'+id).addClass("selected");
}
If you want to add the class to that element you can use this.
function ChangeDistrictSelection(id){
//alert(id);
$(id).addClass('selected');
}
In html pass like that
<a id='id_district_100' href="#" onclick='ChangeDistrictSelection(id)'>District123</a>
ok... v2
html:
<button id="search-district" type="button" class="btn btn-sm btn-success" data-toggle="popover" data-placement="bottom" title="<a href='#' class='pull-right popover-close' onclick='$("#search-district").popover("hide");'>×</a>" data-html="true" data-content=" <a id='id_district_100' href='#' onclick='ChangeDistrictSelectionCss("100");'>District123</a> ... ">
js:
function ChangeDistrictSelectionCSS(id){
$('#id_district_'+id).css("color","red");
}
It's work, but when clicked button (id="search-district") again, css color is not red
Hi im doing a PHP loop where I set a class, this loop make a list of items, and each one of them will have a "share" button that will open a window, (div display:none) the javascript open this div, and it works perfect..
My problem is that in this moment I have inserted the <script> code inside the loop so each item has its own <script></script> code...
Is there any way to do just one and take that code out of the php loop, so I can improve the code.
<script>
$('a.sharebtnc').click(
function(event) {
event.stopPropagation();
$('div.redescompartir').fadeToggle(300);
}
);
</script>
In the Loop well I just add to the class the id like this (id :32 )
<script>
$('a.sharebtnc32').click(
function(event) {
event.stopPropagation();
$('div.redescompartir32').fadeToggle(300);
}
);
</script>
How can I make this script works for all elements no matter the id number, I have no idea, but I know this is the correct way of doing this , right?
The HTML is very simple, its the same for each item... I mean each item has its own div with for <a href="" > </a> elements
<a href="#" class="sharebtnc(id)">
<div class="redescompartir(id)">
<a href="" >Twitter </a>
<a href="" >Facebook </a>
<a href="" >Google </a>
<a href="" >Foursquare </a>
</div>
Add a new class and attribute to the input element like
instead of
<a class="sharebtnc32" />
use
<a class="sharebtnc sharebtnc32" data-id="32"/>
then
jQuery(function ($) {
$('.sharebtnctl').click(function (event) {
event.stopPropagation();
$('.redesopenclose' + $(this).data('id')).fadeToggle(300);
});
})
My preferred method: PHP to generate link between the two elements, then a small snippet of JS to grab which particular one was clicked.
PHP:
$num = 100;
for ($x = 0; $x < $numItems; $x++) {
echo "
<a href='#' class='sharebtn' target='$x'>Share</a>
<div class='redescompartir' id='$x'>
<a href=''>Twitter</a>
<a href=''>Facebook</a>
<a href=''>Google</a>
<a href=''>Foursquare</a>
</div>
";
}
HTML output:
<a href="#" class="sharebtn" target='32'>Share</a>
<div class="redescompartir" id='32'>
<a href="" >Twitter </a>
<a href="" >Facebook </a>
<a href="" >Google </a>
<a href="" >Foursquare </a>
</div>
JS:
$('a.sharebtn').on('click', function(e) {
e.stopPropagation();
var target = $(e.currentTarget).attr('target');
$('#'+target).fadeToggle(300);
});
This way you only need a single <script></script> tag, which your user's broswers will thank you for. :)