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.
Related
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!
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
I'm trying to set up a page that calls an external Javascript function when the user presses a button in an html form. The function name is lock(), and my code for the button is as follows:
<form>
<button type="button" onclick="lock()">Pause/Play</button>
</form>
Trying to run the code gives the following error:
The value of the property 'lock' is null or undefined, not a Function object
I have confirmed that the function I'm trying to call is a global one in the scope of the .js file, and I know that the .js file is being loaded when the page starts because all of the functionality except for this button works. Am I missing any obvious steps and, if not, what do I need to verify? Thanks.
if you open up dev tools, such as f12 in chrome, and enter lock in console, does it return the function? or undefined?
its impossible ot tell whats going on without seeing your code.
a few things you can try:
1.Include the script tag right above the closing tag of the body, to ensure that the script is loaded after the button.
Attach the event handler to the button not inline, but in the domcontentloaded event.
to debug, try calling some other function from same button, to islotate the problem, and vice versa, try attaching the function to a different button, see if it works there.
Where did you have the javascript line in your html that calls the function from other source? If you had that plotted inside <head></head>, then try move the line way further to below in your html file like right before </body> like as for example:
<html>
<head>
<title>My HTML</title>
</head>
<body>
<blah></blah>
<script type="text/javascript" src="myexternal.js"></script>
</body>
</html>
I don't understand what I'm doing wrong here. I just want my function to be called when I click the checkbox. Replacing the function call with alert() works, am I referencing my function incorrectly?
<html>
<head></head>
<body>
<script type="text/javascript">
function select(a){
document.getElementById("myDiv").innerHTML=""+a;
}
</script>
<input type="checkbox" onclick="select(1)">
<div id="myDiv">hi</div>
</body>
</html>
Thanks
Change the function name [e.g. selectFun]. select seems to be reserved keyword
This puzzled me as it looked ok to me too, So ran through the usual tests, eventually tried changing the function name and that worked fine.
The following code is throwing two alerts as expected in IE but not in Firefox. Please help.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
function myFunction(){
alert('myfunc');
document.getElementById('mylabel').click();
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<p id='mylabel' onclick="alert('you reached');"></p>
<input type='button' value="Click me" onclick='myFunction();'/>
</BODY>
</HTML>
Firefox only has a click() function for form elements such as buttons. However, you can call the onClick function directly; you can change the line to
document.getElementById('mylabel').onclick();
This works in firefox or IE (but note that it requires that the function actually exists, which you know it does in this example).
Also note that you aren't actually simulating a click on that element (so, for example, if there were other things that such a click would do, such as also act as a click on the container, they won't happen). You're just getting the function that would run on a click, and running it directly. So it's not a solution for all situations where you need to simulate a click.
There's no click method on elements. Are you using any library?
Usually you have to do something like element.fireEvent('click') (prototype, mootools)
or element.click() (jquery)
UPDATE- Similar question: How do I programmatically click on an element in JavaScript?
Looks like an ugly and brittle solution, if I were you I'd just include jQuery and let that handle all the browser quirks.
Because the <p> tag does not have the method click.