My js function goes like this:
function tester (message) {
alert(message);
}
And in the markup I have:
Link
But it doesn't work. Can someone please tell me why?
text to show is not a string unless you wrap it with quotes, either single or double.
Like this:
Link
Notice that you can't use the same kind of quote for both the Javascript code and the HTML.
Your code is probably giving errors. Check the console when the code doesn't do what you expect it to.
You are almost there. All you have to do is wrap text to show in quotes, like this:
Link
What's happening here is that you have an <a> tag with two attributes, href and onclick. In the href you write the URL that the link points to. In the onclick attribute, you write Javascript. The Javascript here is:
tester('text to show');
which runs a function called tester, passing it the string 'text to show'. Your original code had Javascript like this:
tester(text to show);
which results in a Syntax Error. As an aside, if you had Javascript like this:
tester(text);
it would have looked for a variable named text, and if this variable was defined, you would get an alert with that text.
One more thing: when you include text inside HTML attributes, like you did here, you should be careful not to use the same quotes you used to enclose the attribute. That is why we used single quotes. Suppose you wanted to use double-quotes or other fancy characters, such as the © symbol ... then you replace them with their "HTML-escaped" value, in this case ©. Click here for some common values.
Related
I'm using this code to grab html stored in a string into a div with contenteditable="true" (the string works, and if I manually place the code there it also works, but I need a way to "inject" html or whatever as text in it)
document.getElementById('content').innerHTML=txt
Problem is: It's not placing the html as text inside of it, but executing like it was part of the page. Is there a way around it? I need the HTML(javascript or whatever be written in the string) to be like text...
Use textContent instead to inject strings like this:
document.getElementById('content').textContent=txt
You should use textContent property:
document.getElementById('content').textContent = txt
for more information give a look on MDN
The following is working when the content is no space
<a onclick=fbShareDialog("{\"name\":\"aaaaaaa\"}">
but if there is a space between
<a onclick=fbShareDialog("{\"name\":\"bbbbb bbbbb\"}">
it throws Uncaught SyntaxError:unexpected token illegal
as i think all the content is in quotation , why not works?
thanks in advance
You need to make sure you escape the space and put everything within double quotes.
I can't test it out now but try something like.
Also, it may be a better idea if you didn't write this inline and wrote a function to catch the click event instead.
You're implying a quoteless-attribute, which is really bad form in HTML but unfortunately still allowed due to HTML's sordid history. The attribute is 'onclick', which actually includes fbShareDialog, but that isn't in quotes.
Try:
<a onclick='fbShareDialog({"name":"bbbbb bbbbb"})'>
Or better yet, bind your click events in a .js file for your app, not onclicks in the html.
I am trying to use an anchor tag as well call a function in javascript. I am using the following code to perform this operation.
'+rList.name+'
But this does not work...onclick event is not triggered...I tried putting alert in the function but it does not call that function....
Any solution for this problem?
I believe that the function is not called because of the quotes, which are not escaped:
onclick="showLoadedBefore("Loading...")"
Here is a jsFiddle, which proves this.
What you can try is either use apostrophes or remove the quotes like this:
onclick=showLoadedBefore("Loading...")
I need to pass html to javascript so that I can show the html on demand.
I can do it using textareas by having a textarea tag with the html content on the page, like so: <textarea id="html">{whatever html I want except other textareas}</textarea>
then using jquery I can present it on the page:
$("#target").html($("#html").val());
What I want to know is how to do it properly, without having to use textareas or having the html present in the <body> of the page at all?
You could use jquery templates. It's a bit more complex, but offers lots of other nice features.
https://github.com/codepb/jquery-template
Just save it in a variable:
<script type="text/javascript">
var myHTML = '<div>Foo Bar</div>';
</script>
As far as I know there is no painless way to do this due to the nature of html and javascript.
You can store your html as a string in a javascript variable such as:
var string = '<div class="someClass">your text here</div>';
However you should note that strings are enclosed within ether ' or " and if you use ether in your html you will prematurely end the string and cause errors with invalid javascript.
You can decide to only use one type of quote in your html say " and then ' to hold strings in javascript, but a more concrete way is to escape your quotes in html like so:
<div \"someClass\">your text here</div>
By putting \ before a special character you are telling it that it should ignore this character, however when you go to print it out the character will still print but the \ character won't, giving you functioning html.
Just like remy mentioned, you can use jQuery templates, and it's even cooler if you combine it with mustache! (which supports a lot of platforms)
Plus the mustache jQuery plugin is way more advanced than jQuery templates.
https://github.com/jonnyreeves/jquery-Mustache
This little line of code here is from a shopping cart:
Add To Cart
Firebug's console shows: "missing ) after argument list". Clearly the ')' isn't missing! But I suspect it has something to do with the escaped char
'
since the other similarly formatted links without apostrophes in the name= argument are working fine.
Thoughts?
onclick="simpleCart.add( 'name=The Devil's Sneakers'...
Is an HTML attribute with the apostrophe escaped at an HTML level. It is exactly the same as saying:
onclick="simpleCart.add( 'name=The Devil's Sneakers'...
with the obvious problem with the string closing too early. HTML-escaping doesn't help you because the HTML-escape is only needed to encode the characters that are special to HTML. That would include a double-quote character but not a single quote, since you've used double-quotes to delimit the attribute value.
The apostrophe isn't special to HTML here, but it is to JavaScript. You need to use JavaScript string literal escaping, and in that kind of escaping you need backslashes:
onclick="simpleCart.add( 'name=The Devil\'s Sneakers'...
Either way, it's clear that escapes inside other escapes are really confusing and this is another good reason not to use inline event handler attributes. Instead, in plain JavaScript:
<button type="button" id="foo">Add to cart</button>
<script type="text/javascript">
document.getElementById('foo').onclick = function() {
simpleCart.add("name=The Devil's Sneakers", 'price=10', 'shipping=0', 'quantity=1');
};
</script>
(I used a button because what you've got isn't a link that goes anywhere. You can style it to look like a link instead of a button if you prefer, but it's better not to have a link if none of the normal affordances of links, like middle-click or right-click-bookmark make any sense.)
Escape apostrophes with \x27. This code should work:
Add To Cart
Try \' instead of '
It works well.
<html>
<body>
Add To Cart
Add To Cart
</body>
</html>