Calling external javascript from HTML button - 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>

Related

HTML/javascript: prevent paint before code executes

I have a page with a javascript file at the end. the file is placed at the end so that I get access to all the dom elements.
let us say the markup looks like this
<html>
<head></head>
<body>
//lot of markup here
<script src="my-js.js"></script>
<body>
the sample markup is just to show the location of my js file.
the first like in the js file (my-js.js) is
document.body.style.visibility = 'hidden';
After the code runs I set the visibility back to hidden
From what I have understood(from a lot of articles related to this including in stackoverflow ones) is that the browser reaches the js, then executes it, and then continues with render and then paints.
If that was true, my code as described should work fine.
However, what is happening now is that, the page is shown (for less than 500ms) as it is before the code executed, then quickly hidden and then shown again after the code executed.
in short, what I want is:
page is hidden > code executes > page is shown
instead what I get is
page is shown > page is hidden > code executes > page is shown
My question is why is the page shown for that split second? what am I doing wrong here?
PS: Please note that I cannot change the location of the js nor add another. So, do not post any solution that suggest the same.
More importantly, I want to know why my code is wrong.
You might be interested in using the defer method.
defer means “wait for the parser to finish to execute this”. It’s roughly equivalent to binding your script to the DOMContentLoaded event, or using jQuery.ready. When the code does run, everything in the DOM will be available for you to use. Unlike async, defer’d code will run in the order it appears in the HTML of the page, it is just deferred until after the HTML is fully parsed.
For example:
<script src="my-js.js" defer></script>
See more here
Put the script tag right at the start of the body so it will be evaluated almost exactly as the body is rendered.
<html>
<head></head>
<body>
<script>
document.body.style.visibility = 'hidden';
</script>
<p>Sample text</p>
</body>
</html>
You can also add a style tag to set the body's visibility to hidden.
body{
visibility: hidden;
}
<html>
<head></head>
<body>
<p>Sample text</p>
</body>
</html>

focus() won't work - query

I have some input field, and I call this in my js file
$(document).ready(function () {$('#input_id').focus(); });
but it doesn't launch. Even, when I launch it in my chrome console, I get no focus. How can it be
This is working sample for a text input, just match with your page code and see what you are missing as compared to this.
I assume that you have referred jquery js already and any other jquery functions work well in your page.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function ()
{
$('#input_id').focus();
});
</script>
</head>
<body>
<input type="text" id="input_id"/>
</body>
</html>
In any case please make sure that there is no js error in your page as
$('#input_id').focus(); must work fine individually, so only thing looks wrong could be reference to jquery, else some js error before code reaches to .focus() call on input_id.
Also you can validate if on your page focus for the input working fine, for this keep $('#input_id').focus(); in a script tag just before your body page ends/closes,
to make sure input control, jquery reference are placed correctly and page has no js errors, if this way too focus doesn't work then something is wrong with any of these 3.

Executing an external script via Javascript rather than <script src="external.aspx">

1) Here is what works just fine:
SearchTool.aspx (in the code snippet below) is a 3rd party product that will actually insert an iframe into the page at page load time with the search tool inside of it.
<html>
<head>....</head>
<body>
...
...
<h2>Search Tool</h2>
<script type='' src='http://foo.com/SearchTool.aspx</script>
...
</body>
</html>
2) Here is what I want to do:
I want my page to load quickly without the search tool being loaded at the same time. The user can read through my page and then, if they want, they can click on a button to load the search tool thereby delaying the tool load time to when they want it.
I want to be able to invoke the SearchTool.aspx from the click of a button as below, but I don't know what the code would look like in the showSearch() function below:
<h2>Search Tool</h2>
<script type='text/javascript'>
function showSearch(){
**** What would go here? *****
}
</script>
<input .....="" onclick="showSearch();"></input>
3) I have already explored creating the iframe manually:
In the code snippet #1 above that works just fine, if I do a view source and then create an iframe exactly like they do with all of the same properties, the Search Tool doesn't completely work properly. Weird I know, but true. So this is NOT an option.
Wrap your script tag in a div with the style display:none to hide it:
<h2>Search Tool</h2>
<div id="searchTool" style="display:none">
<script type='' src='http://foo.com/SearchTool.aspx</script>
</div>
...
Then, in your function, just show it :
function showSearch(){
document.getElementById("searchTool").style.display = 'block';
}

JavaScript Reload Page Script

<html>
<head>
<script type="text/javascript">
function show_confirm(){
var r=confirm("Hello or Goodbye?");
if (r==true){
alert("Hello");
window.location.replace("http://www.google.com/");
} else {
alert("Goodbye");
}
}
</script>
</head>
<body>
<input type="button" onclick="show_confirm()" value="Show a confirm box" />
</body>
</html>
I'm learning JavaScript, and I'm using W3School's Tryit Editor, and this code wasn't working like I hoped. I want it to redirect me to google after someone hits 'OK' twice, but it doesn't seem to work. Can someone help me out?
The problem is that the Try-It Editor is using an IFrame. When I try it in Chrome and open up my developer console, I get the following error:
Refused to display document because display forbidden by X-Frame-Options.
This is because what your code is trying to do is change the location of the current frame, not the entire page.
You can do one of three things:
Try your HTML outside of an IFrame and you should get it to work then.
Try using window.top.location.replace("http://www.google.com/"); instead of window.location
If you must change the location of an iframe with JavaScript, you'll have to either do so outside of the frame or make sure it stays within the same domain as the parent document. (You'll notice that window.location.replace("http://www.w3schools.com") works just fine.)

click() method in Firefox

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.

Categories