We Keep Coding

Trying to learn JavaScript and use it to return only the address not the whole <a> tag

Hello and thank you in advance for any and all assistance.
I'm trying to teach myself the basics of JavaScript before I start a bootcamp. In the Prep course we are asked to return the header, first link text and first link href using document.querySelector(). The course showed us how to do the header and I was able to get the first link text. What I cannot seem to figure out is how to return JUST the address and NOT the whole tag.
Some of the things I've tried:
document.querySelector('a href')
document.querySelector('a href=')
document.querySelector('a href=""')
document.querySelector('a').innerHTML
document.querySelector('a').innerText
document.querySelector('a href').innerHTML
document.querySelector('a href').innerText
Thanks again.
John

First Understand that href is an attribute, not an element, anchor is an element that accepts href as the attribute to get this attribute value you need to first get that anchor element then get its attribute value. For example:
let anchor = document.querySelector("a");
let url = anchor.getAttribute("href");
console.log(url)
`
let anchor = document.querySelector("a");
let url = anchor.getAttribute("href");
console.log(url)
<a href='https://stackoverflow.com/' tittle='stackOverflow'Stack Overflow></a>
`

document.querySelector("a").getAttribute("href")

You can try something like this, to bring any attribute of the anchor tag
document.querySelector('a').attributes.href.value

How to set a custom href into a button when onClick?

I have a URL
http://localhost:8080/BIM/teacher/reports/section-exercise/assignment?x=1&y=2&z=3
I have 2 btns
I'm not sure how would I bind those 2 btn to the correct URL.
If the Remediation is clicked, I want to set the href to
http://localhost:8080/BIM/teacher/reports/section-exercise/remediation?x=1&y=2&z=3
The only different is the 4th segment, the rest stay the same.
Any helps / suggestions on them will be much appreciated !
I guess - I might have to :
grab the whole URL
re-construct the newURL, store it in a variable
bind that newURL to my btn.
I hope I'm in the right track for this.
Let me know if you guys, notice something.

Here you can change the URL to what ever you like.
I am using Replace fucntion to change the URL on the fly
var url='http://localhost:8080/BIM/teacher/reports/section-exercise/assignment?x=1&y=2&z=3'
$('button1').click(function() {
$(this).attr('href', url);
});
$('button2').click(function() {
$(this).attr('href', url.replace('assignment','remediation');
});

$(/*remediation button selector*/).click(function() {
$(/*assignment performance button selector*/).attr('href', 'http://localhost:8080/BIM/teacher/reports/section-exercise/remediation?x=1&y=2&z=3');
});
I'm not sure if you meant you want the Remediation button to change the href for the first button, or if you want them to just have different hrefs; if it's the latter, they can just have the different hrefs directly in the HTML, no JS needed.

Aminas answer is good, but in case the first URL isn't always the same I would recommend this function (using Regex) to change only the file name of an URL:
function changeFileName(strURL, strNewName) {
return strURL.replace(/[^\/?]*(?=\?|$)/, strNewName);
}
This (a) works no matter what the original file name was, and (b) won't cause problem if the path contains the file name.

How do I give an ID to part of the contents of a <title> tag?

I have a title tag that looks something like this:
<title>My Page Title - Photo #3</title>
I want to use JavaScript to change the numeric part of it, without having to hard code the "My Page Title - Photo #" string which is generated server side.
I tried wrapping the number in a span so that I could change the contents of the span:
<title>My Page Title - Photo #<span class="photoid">3</span></title>
But it seems HTML is not allowed in the title tag. I'd really like to pursue the class approach if possible as that would allow me to use a line of jquery such as this:
$('.photoid').html(new_photoid);
Did I mention that the photoid appears in several places on the page, which is why I want to be able to use this oneliner to change them all at the same time? For example:
<p>A paragraph also containing the number <span class="photoid">3</span></p>

A title can only have text, so you need to parse it out.
document.title = document.title.replace(/\d+$/, "new value");

title can't be set like that,
it's not a child of .html
some thing like
var num = 3;
document.title = "foo "+num
to set the title, then reuse num for these photoids.

Use the jQuery onDocumentReady syntax:
$(function () {
var elements = $('.contains_photoid');
elements.html(elements.html().replace("3", "4"));
$(document).attr('title', $(document).attr('title').replace("3", "4"));
});
You can't see the title change in this example, but that is the syntax. See Changing the page title with Jquery
The "3" and "4" can be changed to anything, so you can create the page with a unique character string in place of the real ID in order to easily replace it if it appears in text with numbers already in it.
http://jsfiddle.net/ZmXj5/1/

Javascript
var photoID = 355; //this assumes you have some code where you set this photoID value
var title = document.title;
title = title.substr(0,title.lastIndexOf('#')+1);
document.title = title+photoID;
See this fiddle for proof: http://jsfiddle.net/xrkhA/
(I used a div content because you can't use title in jsfiddle)

You can either use, but $('title') will fail in IE8
document.title="new title";
or
$('title').html('new title');
or
$(document).attr('title','new title');

Replace a href with a js function call

I want to replace an url in a href with a call of a function that needs to include the url.
example:
I have the following string:
Google
some other text
Wikipedia
I want to get back a string like this:
Google
some other text
Wikipedia
I have tested some ways with RegEx, but I'm not good with RegEx. Does anyone have a solution for my problem?
EDIT:
Sorry, I forgot to write. I'm building an appcelator application. I can't use jQuery or "document". I think the only way is a RegEx.

Give this regex a try:
/href="([^"]+)/g
Here is a sample of its usage (JsFiddle Demo)
var subject = 'Googlesome other textWikipedia';
var result = subject.replace(/href="([^"]+)/g, 'href="javascript:anyFunction(\'$1\')');

If you give your hrefs unique IDs you can do this:
var val = $("#myHref").attr("href");
$("#myHref").attr("href", "javascript:anyFunction('"+val+"');");
If you want to avoid unique IDs then you can do this (applied to all a's):
​$("a").each(function() {
var val = $(this).attr("href");
$(this).attr("href", "javascript:anyFunction('"+val+"');");
});​​​
If you want to avoid applying this to all hrefs you can give all the hrefs you want changed a class then use a selector like this: $(".hrefToModify")...

NEW:
If you can use javascript, then can you get access to the anchor tag itself? if so:
anchor_element.href = "javascript:anyFunction('" + anchor_element.href + "')";
OLD:
<a id="link1" href="www.google.com">Google</a>
some other text
<a id="link2" href="www.wikipedia.org">Wikipedia</a>
<script>
document.getElementById('link1').addEventListener('click', function(e) {
alert('hello');
e.preventDefault();
return false;
});
</script>

make hyperlink from javascript

I want to use a hyperlink string in HTML page which I want to declare source link (URL) in my js file. Please tell me how can I call that URL from my js into html.
Thanks

There are a number of different ways to do this. You could use document.createElement() to create a link element, and then inject the element into the DOM. Or you could use the .innerHTML property of an element that you already have on the page to insert the link using text. Or you could modify the "href" attribute of an existing link on the page. All of these are possibilities. Here is one example:
Creating/Inserting DOM Nodes with DOM Methods
var link = document.createElement('a');
link.textContent = 'Link Title';
link.href = 'http://your.domain.tld/some/path';
document.getElementById('where_to_insert').appendChild(link);
Assuming you have something like this in your HTML:
<span id="where_to_insert"></span>
Creating/Inserting DOM Content with innerHTML
And another example using innerHTML (which you should generally avoid using for security reasons, but which is valid to use in cases where you completely control the HTML being injected):
var where = document.getElementById('where_to_insert');
where.innerHTML = 'Link Title';
Updating the Attributes of a Named DOM Node
Lastly, there is the method that merely updates the href attribute of an existing link:
document.getElementById('link_to_update').href = 'http://your.domain.tld/path';
... this assumes you have something like the following in your HTML:
<a id="link_to_update" href="javascript:void(0)">Link Title</a>

Try this:
var alink = document.createElement("a");
alink.href = "http://www.google.com";
alink.text = "Test Link";
document.getElementsByTagName("body")[0].appendChild(alink)

From whatever I understand, You want to update href with JS variable.
You can use Jquery to achieve it.
try $("a").attr("href", js_variable)
Refer this for more details
How to change the href for a hyperlink using jQuery

It seems like you would be able to do something like this:
Using Javascript.
var col2= document.getElementById('id_Of_Control');
col2.innerHTML="<a href='page2.html?" + params + "'>Page 2</a>";
where col2 is another container control something like div,span, or any.
Using jQuery.
Here I will recommend you to Use jQuery. So you can be more dynamic.
$("#col2").append("Page 2");
OR
$("#col2").after("Page 2");
OR
$("#col2").before("Page 2");