I am using JavaScript for the first time.
Please give me detailed explanation and test code.
I would like to extract 'javascript: pdfdownload' next to 'onclick' in 'href = # function' under code.
<li><a href="#" onclick="javascript:pdfDownload('NAME.pdf'); return false;"><span class="on-clickboard">
<img src="IMG1.png" alt=""></span>NAME
<span class="icon-right"><img src="IMG.JPG" alt=""></span>
</a></li>
so i use under code that if i catch button_action then give a True to 'value' variale.
var button_action = "pdfDonwload"
if(window.loaction.href.indexOf(button_action) != -1){value = 'True'}
i don't know thos try is right, and Furthermore, it may be a completely wrong-directional coding.
please help me.
you first must select tag:
var els = document.getElementsByTagName("a"); // better is use getElementById()
then get getAttribute
var value = els[0].getAttribute('onclick');
now you can set it anywhere.
i suggest you read more...!
var onclickValue = document.getElementsByTagName('a')[0].getAttribute('onclick');
//javascript:pdfDownload('NAME.pdf'); return false;
var firstPart = onclickValue.split(';')[0];
//javascript:pdfDownload('NAME.pdf')
Related
I would like to get the value of the href i.e. the web link using the data attribute.
I have the following snippet of code
<div class="my-item-details">
<h3 class="my-item-title" data-item_item="x12">
<a href="http://link.com">
My Classic Box
</a>
</h3>
<span class="my-item-price" data-item_item="x12">
38.00
</span>
</div>
The following 2 snippets give the right output.
var price_val = $('.my-item-price[data-item_uuid=x12]').text();
price_val = $.trim(price_val)
console.log(price_val);
38.00
var item_name = $('.my-item-title[data-item_uuid=x12]').text();
item_name = $.trim(item_name)
console.log(item_name);
My Classic Box
However when I run this code
var item_link = $('.my-item-title[data-item_uuid=x12]').attr("href");
item_link = $.trim(item_link)
console.log(item_link);
I get an empty string instead of http://link.com
What am I missing?
.my-item-title[data-item_uuid=x12] selects the h3 element, which doesn't have an href attribute.
Only the a element has that.
Add a descendant combinator and a type selector:
.my-item-title[data-item_uuid=x12] a
You are trying to get the attribute href from a <h3> element without href property:
You could make a change on your selector this way to get the correct result:
var item_link = $('.my-item-title[data-item_uuid=x12] > a').attr("href");
This should give you the correct value.
Please forgive my awful coding style. I am learning to write a Chrome extension and can't figure out some JQuery stuff. I am trying to parse a document with some rows, each containing a (dynamically generated?) link, the HTML code looks like this:
<div class="row" id="rand">
<div class="display">
<div class="link">
<a name="actionLink" href="#" alt="action" onclick="listener.postAction('form', 'http://***/')" class="alink"><span>Confirm</span></a>
</div>
</div>
I am grabbing the info the following way:
$(".row").each(function(index)
{
var $itemArea = $(this).find(".display");
var id = $(this).attr("id");
var alink = $(this).find(".link").find("a");
var onclick = alink.attr("onclick");
console.log("id=" + id);
console.log("alink=" + alink);
console.log("onclick=" + onclick);
});
Here's the output from JSBin:
"id=rand"
"alink=[object Object]"
"onclick=listener.postAction('form', 'http://***/')"
However, when I debug this in Chrome, the value of "onclick" returned by my code is undefined. To make things more confusing, when I inspect the onclick attribute of alink, it shows the correct value? What am I doing wrong?
Try the following to get your var instead
var onclick = $('.link a:first',this).attr('onclick');
I am doing some beginner exercises with JavaScript in order to learn but I'm coming up with an issue.
What I am trying to accomplish is replacing text with a certain ID. I have a 3 links all with text "Quote" which with their own ID(q1,q2,q3). However the function that I am calling is replacing the first instance of "Quote" so the issue is obviously my function.
How can I make it so that it only replaces that ID "Quote".
This is my function:
function quotation(c){
if ( c == q1){
var x = document.getElementByID("q1");
document.body.innerHTML = document.body.innerHTML.replace(x.innerHTML, 'Hello World');
}
Based on your code, I framed the HTML as
<a id='q1'>Quota</a>
<a id='q2'>Quota</a>
<a id='q3'>Quota</a>
As per your code, you're changing the text of the q1 element. So it was working as expected. Due to some edge case I messed my answer. Now What you need to do is simply add a class to your a tags like
<a id='q1' class='q'>Quota</a>
<a id='q2' class='q'>Quota</a>
<a id='q3' class='q'>Quota</a>
And within your function, iterate each elements; so that you can replace for all the elements.
var x = document.getElementsByClassName("q");
for (var i = 0; i < x.length; i++) {
document.body.innerHTML = document.body.innerHTML.replace(x[i].innerHTML, 'Hello World');
}
JSFiddle
Hope you understand.
If I understand the question correctly, it is as simple as this JSFiddle:
<a id="q1" href="#">Quote</a>
<a id="q2" href="#">Quote</a>
<a id="q3" href="#">Quote</a>
<script type="text/javascript">
function quotation(id, text) {
var q = document.getElementById(id);
if (q) q.innerHTML = text;
}
quotation('q1', 'Hello World');
</script>
i'm trying to set new value to link href attribute..
<a title="main-picture" class="modal" href="test">
<?php echo $this->product->images[0]->displayMediaFull('class="product-image"',false,true); ?>
</a>
var mainImageLink = jQuery(".product-image").attr('src');
jQuery("a[title='main-picture']").attr("href") = mainImageLink;
It doesnt works, i dont see any errors in console. I tried to alert jQuery("a[title='main-picture']").attr("href") - it alerted "test"
Any tips?
var mainImageLink = jQuery(".product-image").attr('src');
jQuery("a[title='main-picture']").attr("href",mainImageLink);
Try instead:
jQuery("a[title='main-picture']").attr("href",mainImageLink);
To give the value to that attribute you need to use .attr(attrName, attrValue).
Read more here: .attr()
You can easily do it using simple javascript code like this.Let the links ID is link1
function changeLink(){
var ele = document.getElementById("link1");
ele.href = "newpage.html";
}
and now if you will click on that link you will be redirected at newpage.html
folks.
I have question about Jquery.append() method. I nothing found in documentation about my problem (or I doesn't search enough).
I have following HTML markup.
<li class="active bug-droppable" bugId="1">
<a href="#">Super Bug 1
<span class="badge badge-primary">2</span>
</a>
</li>
I using bootstrap and want to add span tag which represent icon to anchor tag.
I do following and this works good enough. But I want to create function which allow customize icon. ("this" references to "li")
var PLUS_ICON = '<span class="pull-right glyphicon glyphicon-plus-sign medium-icon"></span>';
$(this).find("a").append(PLUS_ICON);
I tried following, it's looks similar but it doesn't work.
var ICON_DUMMY = '<span class="glyphicon medium-icon"></span>'
var ICON_PLUS_CLASS = ".glyphicon-plus-sign";
var PULL_RIGHT = ".pull-right";
var $icon = $(ICON_DUMMY).addClass(ICON_PLUS_CLASS).addClass(PULL_RIGHT);
$(this).find("a").append($icon);
Who can explain why second case doesn't work?
Thanks for your time.
Because you have a period in front of the class name. That is invalid for class attribute.
Change like so and it should work.
var ICON_PLUS_CLASS = "glyphicon-plus-sign";
var PULL_RIGHT = "pull-right";
try
var ICON_PLUS_CLASS = "glyphicon-plus-sign";
var PULL_RIGHT = "pull-right";
var $icon = $('<span class="glyphicon medium-icon"></span>').addClass(ICON_PLUS_CLASS).addClass(PULL_RIGHT);