Changing the href attribute on checked - javascript

I'm working on a web page that contains a radio buttons group.
When one of these buttons get checked I need to change the href attribute of a link element (use different CSS file), How can I do that using Java script and html?
I tried getElementById() but the innerHtml attribute doesn't help, do you have any simple solution?

This should work:
document.getElementById('myStylesheet').href = 'http://example.com/new/href/link';

var input = document.getElementById("inputid");
if (input.checked){
var aElem = document.getElementById("aid");
aElem.href = "newurl";
}

Related

How can i edit the href of this specific class via Javascript?

I can figure out how i can change this href link via Javascript, can you guys help me?
The link i want to change is the above:
Html Screenshot of the Link here
<div class="view-project vp-global font_rs0r6bbli">SABER MAIS</div></div><div class="section">
You can use document.querySelector('.view-project.vp-global.font_rs0r6bbli a').href to set the href value of the a tag in that class. Use browser's inspect element on that link to check the href value being changed.
var newHref = 'www.google.com';
document.querySelector('.view-project.vp-global.font_rs0r6bbli a').href = newHref;
<div class="view-project vp-global font_rs0r6bbli">SABER MAIS
You can fetch elements using the query selector..
let element = document.querySelector('.fp-tableCell .view-project.font_re0r6bbli a');
element.href="example.php";
but rather than fetching an element by its class I would recommend to use an specific id.

How to change a background that is declared in .css not html

USING JAVASCRIPT, NO JQUERY
Hi all,
I know this is a basic one but I am hitting a dead end.
I want to change a background image that is in the .css, not the html so I cant give it an id. I managed to remove the image using:
var headerImg = document.getElementById('header').background = 'none';
And tried :
var headerImg = document.getElementById('header').background = 'images/new-header.jpg;
But that did'nt work.
I have no idea how to change the Image, and in the dev tools the url does not even change when I try to run my code Any help would be great, Thanks.
You're close. You're just off on the syntax slightly...
document.getElementById("header").style.backgroundImage = "url(images/new-header.jpg)";
It's a style attribute you're changing, so you need .style and then you use the CSS attribute name, but remove hyphens and camelCase the attribute name, so .backgroundImage.
Can you try this
var element = document.getElementById('content');
element.style.backgroundImage = "url('https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSzOpUTzDIq2yutn75PQTLcHhJ06MTZPsV_V-0M918xKUhAqMxE')";
<div>
<p>this is unchanged</p>
<p id="content">backgroud wiil be cange</p>
<div>

Changing asp.net core TagHelpers with Javascript

I have
<a id="continue-link" asp-controller="Account" asp-action="Register" asp-route-id="1">Continue </a>
in my asp.net core application, that generate this html when compiled:
Continue
How can i change asp-route-id value from javascript? I tried with $().attr but it's not recognized.
You have to change your href attribute in generated html.
You can achive this by geting your href attribute, split it into array, then change value in array and join it again into one string with separator and then replace href attribute in your a element.
Code example:
var $link = $('#continue-link');
var href = $link.attr('href').split('/');
href[3] = 4; //here you set your new asp-route-id value
$link.attr('href', href.join('/'));
Check this codepen to see how it work.

change part of a link with javascript in a specific div only

Hi I need to edit some links on a page. Using the below code works but causes other problems on the page. I need the code to only affect elements with a certain input id. I also can't just replace the links as a query will be dynamically added to the end of each link. So in summary i just need to replace parts of all links with an input id "btnViewDetails". Any help would be great I'm very stuck. Cheers
<script language="javascript">
document.body.innerHTML = document.body.innerHTML.replace(/JobSeekers/g,'mobile');
document.body.innerHTML = document.body.innerHTML.replace(/JobPositionDetail.aspx/g,'JobPositionDetail_Mobile.aspx');
</script>
var someVariable = document.getElementsByClassName('btnViewDetails');
(you should use class instead of ID, if it is not a unique value).
someVariable is now an array holding all elements with class name btnViewDetails.
Now replace the text you want to replace only on the href values of you elements (you will have to loop over them):
for (i = 0; i < someVariable.length; i++) {
someVariable[i].href // do your replaces here
}

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");

Categories