Sincere apologies if this has already been covered. I've been trawling StackOverflow for a while now and I cannot find anything that will fix my issue. Many people have this error, but theirs seem to be derived from syntax errors and the suchlike. I (nor JSLint) can't find any such errors, so I'm rather stumped.
The following code (from the W3Schools page) does work:
<p>Click the button to trigger a function that will output "Hello World" in a p element with id="demo".</p>
<button onclick="myFunction()">Click me</button>
<p id="demo"></p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
</script>
However, my code does not work:
<head>
<!--SNIP-->
<script language="text/javascript">
function iconclicked() {
alert("Yay!");
}
</script>
</head>
<body>
<div class="icon" id="misc" onclick="iconclicked()"></div>
</body>
This produces the "Uncaught ReferenceError: iconclicked is not defined" error.
But, and correct me if I'm wrong, function iconclicked() {...} is what defines the function and it is clearly present. Additionally, moving the JScript to be within the <body>tag does not fix the problem, regardless of whether to script is before or after the div. If you were to substitute the div for another element (a button, image, text, etc) or to call the function a different way (e.g. via onload) the code does not work.
I thought that perhaps it was the rest of the code on my page causing something funny to happen, so I headed over to JSFIDDLE and popped the old W3Schools code in there. Lo and behold, "Uncaught ReferenceError: myFunction is not defined". JSFDDLE link
Edit: turns out this is just due to the fact I didn't choose 'no wrap' in the JSFIDDLE options - thanks Peter Healy :)
But if you go ahead put the JS inside <script> </script> tags in the HTML section of JSFIDDLE, there is no such problem and the code works as intended. JSFIDDLE link
I figure maybe this is a scope problem, but I can't for the life of me work out what it is specifically. Hopefully someone out there with more experience has the answer!
There is no language of "text/javascript", that is the type.
Change
<script language="text/javascript">
to just
<script>
Do not worry about the language or type attributes. Language has been deprecated.
It's actually <script type="text/javascript">, with a type attribute, not language:
<head>
<!--SNIP-->
<script type="text/javascript">
function iconclicked() {
alert("Yay!");
}
</script>
</head>
<body>
<div class="icon" id="misc" onclick="iconclicked()"></div>
</body>
The language attribute went out of style a while ago.
It's how JSFiddle wraps up your JS. Choosing No Wrap option on left hand side will solve it for you.
Read here: no wrap
Edit: remove text/javascript
Related
I'm trying to add a submit function in my HTML and refer to a js file with my function. The code runs successfully in Chrome but not in IE11. The error message is "submitFunc(event) is undefined". Could anyone help me fix this problem? I have tried everything I can. T.T
function submitFunc(event) {
console.log("Hey what are you looking for? ")
}
<html>
<div>
<input class="btn btn-primary" type="submit" value="submit" onclick="submitFunc(event)">
</div>
</html>
<script type="text/javascript" src="/static/js/main.js"></script>
It might be that your <script> tag in outside of the <html>...</html> block. Try moving it up into the a <head>...</head> section just after the first <html> tag.
I don't know if you still need help, but you're loading the JavaScript file after setting up the on-click event. I would assume that means you don't have the function defined yet. I would move the "script" tag before the elements.
So, I'm trying to make an html5 website, and I'm trying to make a popup, "error" message using javascript, but I'm currently using html. and so when I tried
alert("nope wrong >:D")
and it didn't work. it was inside of a script tag but it still didn't work and so I'm not sure if I'm just meant to use html for that. the question overall is, do I have to use something like
<!DOCTYPE html>
like when youre making an html website or just like
<!-- container -->
or what I need help. thx in advance for any help I get :)
<!DOCTYPE html> & <!-- container --> have nothing to do with javascript notifacations. You are correct about the <script></script> part. You just need to put it in a function:
<script>
function myAlert() {
alert("nope wrong >:D");
}
</script>
and then to call that function, use a button:
<button onclick="myAlert()">Click Me</button>
or call it on the body so when the page loads you get notified:
<body onload="myAlert">
EDIT: Here is a runnable code snippet
<button onclick="myAlert()">Click Me</button>
<script>
function myAlert() {
alert("nope wrong >:D");
}
</script>
also, good luck!
I am at a loss here, I am modifying a template for whmcs and I am trying to get an onclick event to launch when the page loads. I have tried the methods here but for the life of me I can't get it to work. How would you do this?
Here is the code:
<div><label><input type="radio" name="domainoption" value="incart" id="selincart" onclick="document.getElementById('register').style.display='none';document.getElementById('transfer').style.display='none';document.getElementById('owndomain').style.display='none';document.getElementById('subdomain').style.display='none';document.getElementById('incart').style.display=''" /> {$LANG.cartproductdomainuseincart}</label></div>
I got it to work guys. I appreciate all your help. Turns out, its a SMARTY template, so it was not parsing the {} correctly. Hence why it didn't work with any examples and 3 hours of me struggling for a stupid problem. I wasn't using {literal}.
Thanks for those that didn't put me down for asking a stupid question...
If you want to execute javascript on page load, you can use body onload
<script>
function load()
{
alert("Page is loaded");
}
</script>
<body onload="load()">
<h1>Hello World!</h1>
</body>
If you are okay with Jquery, Use trigger to run your click codes :
Example :
$(document).ready(function() {
$('#yourId').trigger("click");
});
When I try this on the global scope:
document.getElementById("p1").innerHTML ="Howdy mate";
It does not work and firebug reports the error:
TypeError: document.getElementById is null
But the same instruction works well when inside a function:
function sayHello(){
document.getElementById("p1").innerHTML ="Howdy mate";
}
I am yet to find any literature to explain this behaviour. Can anyone help?
EDIT: #All, the correct error message was
document.getElementById("p1") is null
not
Window.getElementById("p1") is not a function
as earlier stated. I have corrected.
could be you're calling document.getElementById("p1").innerHTML ="Howdy mate";
before the element is loaded?
http://jsbin.com/abejiz/1/edit vs http://jsbin.com/abejiz/2/edit
#All, I revised my code following #user2264587's answer. The problem was that I had my javascript code loaded to the <head> tag of the document while the <p> element with id="p1" was located in the <body>. So the javascript instruction was actually being executed before the <p> element was loaded. I have now placed code inside <body> and after <p>:
<body>
...
<p id="p1"><p>
<script>
document.getElementById("p1").innerHTML ="Howdy mate";
</script>
</body>
It works fine.
I am trying to change our site to load a Header through jquery using the .load() function but to do so I need to set the Title of the page.
From another StackFlow question it was suggested to do something as simple as
$(document).ready(function() {
document.title ='Name Changed to Protect the Innocent';
});
When i do this I get the firebug error
Missing } in XML Expression for that line in the script
I am sure there is probably an easy solution but it is certainly escaping me.
I've just tested this out here, please see if you have created your html document in the same way. Code as below.
<html>
<head>
<title>Old Title</title>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
document.title ='Name Changed to Protect the Innocent';
});
</script>
</body>
</html>
I found what the problem was. This script was in the middle of another script block which was causing the error.
Thanks for all the help.