Why is my code not working? - javascript

I just wrote this code and when I tested it, the javascript wouldn't work.
I have javascript enabled and I tried with a different code and it worked. I think there's maybe a bug but I can't see it.
<!DOCTYPE html>
<html>
<body>
<p id=“id”>Some Text</p>
<script>
document.getElementById(“id”).innerHTML=“Different Text”;
</script>
</body>
</html>

You are using smart quotes (“”) instead of normal quotes (""). Replace the quotes and it will work.
<p id="id">Some Text</p>
<script>
document.getElementById("id").innerHTML="Different Text";
</script>
Perhaps this is because you are using a word processor, not an IDE?

Related

Wordpress: how to use javascript variables into html body

I'm really new in Wordpress, Javascript and HTML so I know this question is really basic, but I wasn't able to find it solved anywhere.
I want to create some variables in javascript and then display them in my page which is created in Wordpress.
Reading other posts I've found I need to insert a javascript code that at the end stores my variable this way (dummy version):
<script type="javascript">
document.getElementById('test').innerHTML = 'hello';
</script>
And then on the text block I want to display my variable to be displayed I should add this code:
<body>
<p id="test"></p>
</body>
However I've tried adding the javascript in the header (Tatsu header) and also tried adding it in the text block (HTML version) in different combinations and it never worked. Tried adding the script block before and after the body block, and also tried having it inside, before and after the display line.
If I try the following it works:
<body>
<p>hello</p>
</body>
So I guess my problem is that I'm not setting the variable properly.
Can anyone help? Apologies if this is already solved somewhere, spent some hours and wasn't able to find it.
Thank you in advance.
Your problem is the type of which you're using here:
<script type="javascript">
I noticed this whilst constructing an example of this problem.
javascript is not a correct mime type.
It should be text/javascript as per https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types
Please note this is not a complete list. Such as application/javascript also being valid. Please also see https://www.iana.org/assignments/media-types/media-types.xhtml
Working example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<p id="test">
This shouldn't show up
</p>
<script type="text/javascript">
console.log("####### JAVASCRIPT IS RUNNING ######")
document.getElementById('test').innerHTML = 'hello';
</script>
</body>
</html>

In HTML/JavaScript, how do you dynamically set a header/paragraph element's text without overwriting anything else?

When you search for how to set a paragraph or header element's text dynamically, you keep coming across pretty much the same line of code:
document.getElementById("header").innerHTML = "some text";
This isn't entirely correct though. Take the following example:
<html>
<head />
<body>
<h1 id="header" />
<p id="p1" />
<script type="text/javascript">
document.getElementById("header").innerHTML = "header";
document.getElementById("p1").innerHTML = "p1";
</script>
</body>
</html>
The first JavaScript line pretty much deletes p1 from the page, even though p1 and header have nothing to do with each other in the raw HTML. When wrapping the second JavaScript line in a try...catch block, the error that's caught is:
document.getElementById(...) is null
The same problem exists when you use textContent instead of innerHTML. I'm a little surprised that everybody is saying that this is how you're supposed to change the text of an element when it really doesn't suit that purpose very well. What's the right way to set this up?
p and h1 are not "empty elements", meaning they're not closed in the same tag that opens them (like img and br). If you write them like that, they're not valid tags and the browser will ignore them (which is why document.getElementById can't find them). Try this instead:
<html>
<head></head>
<body>
<h1 id="header"></h1>
<p id="p1"></p>
<script type="text/javascript">
document.getElementById("header").innerHTML = "header";
document.getElementById("p1").innerHTML = "p1";
</script>
</body>
</html>
Change your html to this :
<h1 id="header"></h1>
<p id="p1"> </p>
And try your JavaScript code now they will work, because they are not empty elements.
I think the main issue you are having is with the way you are setting up the closing tags like so: <h1 id="header"/> with / instead of a closing statement. This is incorrect and you need to close it like so: <h1 id="header"></h1> The same is true for the <p> tag and many others. There are some exceptions to this rule which you can find here:
http://www.w3schools.com/html/html_elements.asp
Here is an example fiddle with the actual result!
http://jsfiddle.net/nd3Dq/

HTML Tidy fails on script tag in JavaScript string literal

I'm using HTML Tidy in PHP and it's producing unexpected results because of a <script> tag in a JavaScript string literal. Here's a sample input:
<html>
<script>
var t='<script><'+'/script>';
</script>
</html>
HTML Tidy's output:
<html>
<script>
//<![CDATA[
var t='<script><'+'/script>';
<\/script>
<\/html>
//]]>
</script>
</html>
It's interpreting </script></html> as part of the script. Then, it adds another </script></html> to close the open tags. I tried this on an online version of HTML Tidy (http://www.dirtymarkup.com/) and it's producing the same error.
How do I prevent this error from occurring in PHP?
After playing around with it a bit I discovered that one can use comment //'<\/script>' to confuse the algorithm in a way to prevent this bug from occurring:
<html>
<script>
var t='<script><'+'/script>'; //'<\/script>'
</script>
</html>
After clean-up:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2//EN">
<html>
<head>
<script>
var t='<script><'+'/script>'; //'<\/script>'
</script>
<title></title>
</head>
<body>
</body>
</html>
My guess is that as the clean-up algorithm looks through the codes and detects the string <script> twice, it looks for </script> immediately. And separting < with /script> makes the second </script> goes undetected, which is why it decided to add another </script> at the end of the codes and somehow also closed it with antoher </html>. (Poor design indeed!)
So I made a second assumption that there isn't an if-statement in the algorithm to determine if a </scirpt> is in a comment, and I was right! Having another string <\/script> as a javascript comment indeed makes the algorithm to think that there are two </script> in total.
There's no need for string concatenation to avoid the closing </script>. Simply escaping the / character is enough to "fool" the parsers in browsers and, it seems, HTML Tidy's parser as well:
<html>
<script>
var t='<script><\/script>';
</script>
</html>
Try to make the script tag not a full word but a string concatenation
<html>
<script>
var t='<scr'+'ipt><'+'/script>';
</script>
</html>
Resulting cleaned code
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2//EN">
<html>
<head>
<script>
var t='<scr'+'ipt><'+'/script>';
</script>
<title></title>
</head>
<body>
</body>
</html>
This is probably a better practice to create a script tag like this:
(this should also solve your tidy issues)
<script>
script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'http://myserver.com/file.js';
document.getElementsByTagName('head')[0].appendChild(script);
</script>
One way is to make it so tidy doesn't detect the script tag. The "cleanest" way I could come up with is to escape a character in the tag.
<html>
<script>
var t='<\script><'+'/script>';
</script>
</html>
so you could even do this, without having to break the string up as above:
var t='<\script></\script>';
That just works as expected
<html>
<script>
var t='<'+'script><'+'/script>';
</script>
</html>
By the way, string concatenation is not best way to create dynamically HTML to insert in page, look for document.createElement or even templates engines (handlebars.js is my favourite)

Javascript won't work when typed

So, I'm brand new to javascript. This code works when copy/pasted from W3. But when I type it, it won't work. Please, in your answers, act like I'm an idiot and explain things as if I know nothing about it. Seriously no sarcasm there. It'll help me out a ton. lol My whole page is short because I'm just fiddling, so I just pasted the entire thing below. I put stars next to the two parts that I'm referring to. I've been digging for hours and can't find a solution. Thank you guys in advance for being cool and helping a beginner.
<!DOCTYPE html>
<html>
<head>
<title>Java Testing</title>
<style>
h1
{background-color:black;
font-size:60;
color:white;
text-align:center;}
p
{text-align:center;
color:black;}
</style>
</head>
<body>
<h1>I&#39m trying out some Java.</h1>
<p>But I&#39m not entirely sure what I&#39m doing.</p>
*
<script>
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph.</p>");
</script>
*
*
<script>
document.write(“<h1>This is a heading</h1>”);
document.write(“<p>This is a paragraph.</p>”);
</script>
*
<p>
<button>Try it</button>
</p>
</body>
</html>
You are using smart quotes (like “), not normal quotes.
Use an IDE, or at least just a plain text editor like Notepad on Windows.
Also, Java is NOT JavaScript! They are two completely different languages.
Try changing the quotes in the second part. That may be an issue with your editor. Are you using any kind of Text Processor? That may be the issue. Javascript only supports single quotes (') and double quotes (").

problem with jquery

I'm beginner in jquery.this is my first application.
<head>
<title>Untitled Document</title>
<script type="text/javascript" src="../jquery-1.6.2.min.js"></script>
<script type=”text/javascript”>
$(document).ready(function(){
$("a").click(function(){
alert("Hello World");
});
});
</script>
</head>
<body>
<a href=”#”>Click me!</a>
</body>
</html>
but when i click on Click me the alert doesn't showed.what is problem?
(the lib address(src="../jquery-1.6.2.min.js) is correct )
You have odd quotes in some of your code:
” vs. "
That could be causing your problem. Change them all over to regular double quotes "
EDIT: Tested it, it's the funny quotes around text/javascript specifically but the other should be fixed too.
That works fine! check the jsfiddle
http://jsfiddle.net/PdpWR/
I would guess you either have a problem with your reference to jQuery or with the weird quotes around your # and text/javascript.
I took your code and placed it in jsfiddle and it runs fine:
http://jsfiddle.net/PZxjV/
Are you sure that you have the correct location for your jQuery file?

Categories