onclick get thumbnail url id value - javascript

hopefully someone can help me.
i want to get a thumbnail id value when an onclick event happens, but no luck, any ideas? thanks
this is a small thumbnail image
Here is the js for swapping the thumbnail:
function swap(image) {
document.getElementById("main").src = image.href;
}
now i want to access the id at the end of the thunbnail url. note this url is not a location url. thanks

You can use the split() function to get the ID:
var url_split = image.href.split('=');
var id = url_split[1];
Why are you not using jQuery although you tagged your question this way?

Wrap your thumbnail imgs into anchors and set rel=<your_id> to them.
Then in jQuery you can access id via $('a.myclass').attr('rel'). So do I, maybe there are other better approaches.
Or maybe you provide some code here?

Related

Select all anchor tags based on href and Change it

i have a question regarding changing URL of anchor tags based on HREF.
What i do to select all anchor tags is like this:
var anchortags = document.querySelectorAll("a[href*='secureloan.asim.no']");
With this i select all anchor tags that refers to secureloan.asim.no
What i want also is to CHANGE the links when user click on it (i want to remove a parameter)
example of URL can be:
Example URL:www.secureloan.asim.no/oasis/index.html#/no/asim?lang=nb-no&product=lev&lanekilde=&campaigncode(etc....).
i want to remove "lanekilde=" from the parameter. im using this code:
String(document.location.href).replace("&lanekilde=", "");
This gives me right URL but how do i change it for all users on website when they click on it.
Code ive made til now:
var anchortags= document.querySelectorAll("a[href*='secureloan.remember.no']");
String(document.location.href).replace("&lanekilde=", "");
thank you :)
PS: NO Jquery please!
PS: im using tag manager if anyone has a idea of different way
You just need to iterate over the nodeset and change each one in turn:
var anchortags = document.querySelectorAll("a[href*='secureloan.asim.no']");
anchortags.forEach(function(tag) {
tag.href = tag.href.replace('&lanekilde=', '');
});

How to get background image of element on click event using jquery?

I try get value for style and also in side this tag values for background-image
I do this little script :
function url_image(id){
var valimg = jQuery("."+id+". cycle-slide").attr("src");
alert('' + valimg);
}
<div onclick="url_image('imm_1');" class="imm_1 cycle-slide" style="background-image:url('website.com/image.jpg')"></div>
The idea it´s that when i do click over the div, send the value of background-image to the script and show, but no get this because i don´t know how get the value from tag style. That´s all problem
You can use :
var valimg = jQuery("."+id+".cycle-slide").css("background-image")
Like #Musa mentioned in comment.
Hope this helps.

JS - Dynamic Href Change

Ive tried many way but im new to JS, I mainly do PHP.
Anyway the code:
<script>
var userinput = $('input[name="imdbid"]');
userinput.change(
function(){
$('#userimdb').attr('href')+$('input[name="imdbid"]').val();
}
);
</script>
Basically, the imdbid is gotten from a input tag, basically I want to append whatever the user types to a href of a tag, This doesnt seem to work doe. When I alert() it, it seems to give me the output of what its meant to but when I remove alert() it doesnt seem to change the href, I also tried .setAttribute() but that also just did nothing.
Please help me out im going insane right now.
Try this:
You need to assign it to href attribute..
var userimdb=$('#userimdb');
var baseURL=userimdb.attr('href');
$('input[name="imdbid"]').change(function()
{
var userimdb=$('#userimdb');
userimdb.attr('href', baseURL + $(this).val());
});
You're not setting the attribute right now, only accessing it. In addition, you need to store the original href attribute somewhere so you're not adding the same text repeatedly. Here's the updated code:
var userinput = $('input[name="imdbid"]');
var orighref = $('#userimdb').attr('href');
userinput.change(function(){
$('#userimdb').attr('href', orighref + userinput.val());
});

Use javascript to click all images based on src value only

I want to click all the links on a page that have a certain image src.
I know I can do the following if I know the id:
alert(document.getElementById('image').src);
But I know know the src and nothing else is there. No id, alt or title, nothing only src.
Anyone have any idea on how to do this? Thanks!
Easy.. though please read jquery's documentation when you get the chance:
$("img[src='src_goes_here']").trigger("click");
Assuming you want to click the link that has a child image with a particular source..
$("a img[src='src_goes_here']").parent().trigger("click");
I'm not sure what you mean with "clicking links with a certain image-src", as clicking would be a user-interaction and links don't tend to have a src - attribute like the <img>-tag
Anyhow, using jQuery as example, there is something called "Attribute-Selectors", in your case the Attribute Equals Selector (jQuery-API) should do the trick:
var yourSource = "/path/to/image.jpg";
var myImages = $('img[src="'+ yourSource +'"]');
So, for example, if your images are inside a link, all you'd need to do is:
myImages.parent().trigger('click');
but I really don't know what good that should do
$('img[src="' + yourKnownSrc + '"]').click();
In case you want to click links "having" an image:
$('a').has('img[src="' + yourKnownSrc + '"]').click();

How can I add "href" attribute to a link dynamically using JavaScript?

How can I add the href attribute to a link dynamically using JavaScript?
I basically want to add a href attribute to <a></a> dynamically (i.e. when the user clicks on specific image in the website).
So from:
<a>Link</a>
I need to go to:
Link
var a = document.getElementById('yourlinkId'); //or grab it by tagname etc
a.href = "somelink url"
I assume you know how to get the DOM object for the <a> element (use document.getElementById or some other method).
To add any attribute, just use the setAttribute method on the DOM object:
a = document.getElementById(...);
a.setAttribute("href", "somelink url");
document.getElementById('link-id').href = "new-href";
I know this is an old post, but here's a one-liner that might be more suitable for some folks.
First, try changing <a>Link</a> to <span id=test><a>Link</a></span>.
Then, add something like this in the javascript function that you're calling:
var abc = 'somelink';
document.getElementById('test').innerHTML = 'Link';
This way the link will look like this:
Link
More actual solution:
<a id="someId">Link</a>
const a = document.querySelector('#someId');
a.href = 'url';
I know there seems plenty good answers here, but none of them seemed simple enough for what I was "told" to do in the 2022 Udemy Web Development Bootcamp by Angela.
So I remembered how simple the use of scriplets was and figured to try it and it works just as well.
For those like me who are learning let me explain:
. - takes you to current URL
then static path
then dynamic variable generated for each post (its a blog website)
Read More
This is using JS inside an EJS page
same solution is also given in the solution lecture of the bootcamp here:
https://www.udemy.com/course/the-complete-web-development-bootcamp/learn/lecture/12385596#overview
Lecture 317
I came here because I wanted to dynamically set the link href after it's been clicked
<a id='dynamic'>link text</a>
document.getElementById("dynamic").addEventListener("click", onClick_dynamic)
function onClick_dynamic(e){
const nextPage = getNextPage()
document.getElementById("dynamic").href = _BASE_URL + "?nextPage=" + nextPage
// e.default processing sends user to href
}
Single line solution
<a id="yourId">Link</a>
document.querySelector("#yourId").href("URL")
enter code here javasicript added
var x = "www.google.com";
vay y = "550";
var z= x+y;
document.write('GONDER');

Categories

Resources