I am having a problem adding a js variable inside a html link where I believe I have the syntax wrong as it's not adding the content of the variable to the link string.
Here is what I'm trying:
href="http://www.facebook.com/sharer.php?u='+url+'">
Where I'm I going wrong here?
That is not possible to do :).
You have to do it javascript all the way, like:
href="javascript: document.location='http://www.facebook.com/sharer.php?u=' + url;"
You are trying to treat HTML as if it were JavaScript. You can't just jump in and out of the two languages.
If you want to modify an existing link, you need to use DOM Manipulation. This is covered as part of the introduction to JavaScript hosted by the W3C.
You can't do that. You will need to use javascript like this:
... within <head> tag ...
<script type="text/javascript">
window.onload = function() {
document.getElementById('myLink').href = "http://www.facebook.com/sharer.php?u="+url;
}
</script>
... within <body> tag ...
<a id="myLink" />
You need to be outside of the string in order to concatinate your URL.
In this case your string is created using a double quotation mark however you're trying to break out of the string by using a single quotation mark.
I'm assuming here that html is a Javascript variable, which it might not be:
var href = "http://www.facebook.com/sharer.php?u=" + url + ">";
I do not think you can just add a javascript variable inside an href like that. Try this:
Foo
document.ready(function(){
var url = "yahoo.com" ;
$("#linkid").setAttribute("href",url) ;
}) ;
When the browser loads all the elements, document.ready executes the method to set the href attribute of your anchor tag.
So you have an anchor tag like so:
<a id="linkid"/>
$("#linkid") gets the anchor tag element, while setAttribute("href", url) will set the link to your href attribute.
Hope it makes sense.
Related
I have a code like this
<div class="footer"><p>some text<p></div>
as you can see closing tag for p is omit.
how can I fix that without edit original code?
I think JavaScript can do this.
You can just modify the innerHTML of the footer element.
var footer = document.getElementsByClassName('footer')[0];
footer.innerHTML = "<p>some text</p>";
This will replace the content in the footer.
var div = document.querySelector('div.footer'); // get div element
Array.prototype.forEach.call(div.childNodes, function(childNode){ // for every element inside of div
if (childNode.innerHTML === '') { // check if that element is empty
div.removeChild(childNode); // remove that element
}
});
Working example: http://jsfiddle.net/soygb9cs/
It works because modern browsers automatically closes tags. So you get one additional empty tag if you omit backslash in closing tag.
From <div><p>some text<p></div> browser creates <div><p>some text</p><p></p></div>
JavaScript can do that, however because JavaScript runs after the page has loaded, your web page will still be classed as W3C invalid (https://validator.w3.org/).
If you just have lots of HTML with this error and you're trying to save yourself some manual labour, I suggest using something like notepad++. Copy your HTML into a new document and do a regular expression find and replace like so:
Is it possible to assign a value of <script src="http://domain.com/external.php"></script> directly to another variable, like the following (not using JQuery, but simple Javascript):
<script>
document.getElementById('ID').innerHTML=<script src="http://domain.com/external.php"></script>;
</script>
maybe doing something like this is better
script=document.createElement('script');
script.src='http://whatever.js';
document.getElementsByTagName('head')[0].appendChild(script);
If you're trying to append the script inside the DOM as a string, you have to do something like this :
var script = '<script src="http://domain.com/external.php"></scr'+'ipt>';
document.getElementById('ID').innerHTML = script;
the closing script tag will cause issues in parsing when inserted as a string because it closes the current script, concatenation will solve that.
There might be a duplicate of this (I've tried checking questions on creating dynamic links but they reference a static link - I want this link to be hidden from the user). On testing the following code on the ww3 site:
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
document.write("<a href="www.google.com">Google</a>");
</script>
</body>
</html>
I get:
http://www.w3schools.com/jsref/%22www.google.com%22
As the link address rather than www.google.com.
How do I correct this problem? And how do I make it so the link only appears after a set time? Note, this is a simplified version of the code for readability (the dynamic link will including two floating point variables assigned at the time the script is run).
An <a> tag's href must include the protocol http://, otherwise it links to a document relative to the page the link is on:
// Print quote literals, not html entities `"`
document.write("<a href='http://www.google.com'>Google</a>");
The use cases for document.write() are often limited since it can't be used after the page has loaded without overwriting the whole thing. A lot of the time you will want to create the element after the page has already rendered. In that case, you would use document.createElement() and appendChild().
// Create the node...
var newlink = document.createElement('a');
newlink.href = 'http://www.google.com';
// Set the link's text:
newlink.innerText = "Google";
// And add it to the appropriate place in the DOM
// This just sticks it onto the <body>
// You might, for example, instead select a specific <span> or <div>
// by its id with document.getElementById()
document.body.appendChild(newlink);
By the way, w3schools is not affiliated with the W3C, and their examples are generally not recommended since they are often out of date or incomplete.
You have 2 issues:
1) You need http:// before the URL so it's: http://www.google.com
2) You don't need to use quotes in document.write, but if you want to you can do one of these 3:
document.write('Google');
document.write("<a href='http://www.google.com'>Google</a>");
document.write("<a href=http://www.google.com>Google</a>");
Use the slash "\" to escape the quote
To make the link absolute, include the "http://" at the start of the url. Write out:
<a href="http://www.google.com">
instead of
<a href="www.google.com">
The second example will be treated as a relative url, like index.html for example.
So I have a link like this:
<a href="http://thissite.org/thisfolder/21/thispage.php">
What I want to do is revise it but keep part of it eg:
<a href="http://thissite.org/thatfolder/21/thatpage.php">
Can this be done with Jquery or js?
I know I can replace href property with jquery but I need to leave part of the url ("21") and just change the text before and after it.
I was thinking maybe grab the href property, stick it in a variable and take it apart and put it back together somehow.
Any help with this would be largely appreciated.
You can call replace in a property setter function:
$('a').attr('href', function(index, old) {
return old.replace(/thisfolder/i, 'thatfolder');
});
A rough way of doing this would be:
// "elem" is the element, for example elem=document.getElementById('link_to_change')
var url = elem.getAttribute("href").split("/");
url.pop();
url.push("thatpage.php");
elem.setAttribute("href",url.join("/"));
Using a ajax request I want to change content of my div.
<div id="d1">202</div>
So I want to change the content to a different number.
$('d1').InnerText???
Also, say I wanted to increment the number, how could I do that? Do I have to convert to int?
$("#di").html('My New Text');
Check out the jQuery documentation.
If you wanted to increment the number, you would do
var theint = parseInt($("#di").html(),10)
theint++;
$("#di").html(theint);
P.S. Not sure if it was a typo or not, but you need to include the # in your selector to let jQuery know you are looking for an element with an ID of di. Maybe if you come from prototype you do not expect this, just letting you know.
This would changed the inner text of your HTML element.
$('#d1').text(parseInt(requestResponse)++);
Unless you're embedding html like <b>blah</b> I'd suggest using $("#di").text() as it'll automatically escape things like <, > and &, whereas .html() will not.
Use the text function:
$("#d1").text($("#d1").text() + 1);
$('#d1').html("Html here");
jQuery('#d1').html("Hello World");
if your value is a pure text (like 'test') you could use the text() method as well. like this:
$('#d1').text('test'); Or $('#d1').html('test');
anyway, about the problem you are sharing, I think you might be calling the JavaScript code before the HTML code for the DIV is being sent to the browser. make sure you are calling the jQuery line in a <script> tag after the <div>, or in a statement like this:
$(document).ready(
function() {
$('#d1').text('test');
}
);
this way the script executes after the HTML of the div is parsed by the browser.
$("#div1").innerHTML="your text goes here..";