I'm a beginner trying my first program to add external jscript file in scr attribute of script tag, followed all steps as I searched but it's not working the way it should. Can someone please help me with this?
I have one aspx form, and one button onclick calling internal javascript function.
I also have one button onclick calling external .js file function.
This is my aspx code
<head runat="server">
<script type="text/javascript" language="javascript" src="ExternalJScript.js">
function Myfunction()
{
document.getElementById("htmlbutton").innerHTML = "This is Button from Javascript function";
alert("Hi Function Called from Javascript");
}
</script>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<button type="button" id="htmlbutton" onclick="Myfunction()">This is html button</button><br />
<button type="button" id="Button1" onclick="ExternalJSFileFunction()" value="Call File">HI</button>
</div>
</form>
And this is my .js code
ExternalJSFileFunction()
{
alert("I m from external file");
}
There should not be code in between the script tags of an external script. Try changing it to:
<head runat="server">
<script type="text/javascript" language="javascript" src="ExternalJScript.js"></script>
<script type="text/javascript">
function Myfunction()
{
document.getElementById("htmlbutton").innerHTML = "This is Button from Javascript function";
alert("Hi Function Called from Javascript");
}
</script>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<button type="button" id="htmlbutton" onclick="Myfunction()">This is html button</button><br />
<button type="button" id="Button1" onclick="ExternalJSFileFunction()" value="Call File">HI</button>
</div>
</form>
Also, the Language attribute is deprecated and is not needed
Edit
It's because the function you are trying to call isn't actually a function because the function keyword is not used. Change the external file so that it is:
function ExternalJSFileFunction()
{
alert("I m from external file");
}
Then it will work
Additionally, there are some other tips as well:
If you're using the HTML5 doctype, you can also get rid of the type attribute on <script> elements too
Also have your opening curly braces on the same line as the function or conditional, so do:
function ExternalJSFileFunction() {
but not:
function ExternalJSFileFunction()
{
You should almost always add your scripts to the end of the page, just before the closing </body> tag for performance
Using the onclick attribute is also not the recommended way of attaching event handlers, you should use the proper addEventListener() method instead. If you need to support <= IE8 you'll need to use IE's older event API. Using a JS library. like jQuery, can really help out with this kind of stuff.
The function in your external JavaScript file is not defined properly.
It should look like this (I added the function keyword).
function ExternalJSFileFunction()
{
alert("I m from external file");
}
You also need to make the changes that danwellman suggested in his answer.
Related
I've spent 2 days trying to figure this out so any help is appreciated.
I was following this nice little video tutorial series
and I wanted to try something basic before getting any further: get an html button to show a javascript alert using google apps script and their HTML Service component, but for the life of me, I can't understand why the alert is not triggered.
Here's my code
Index.html
<!DOCTYPE html>
<html>
<head>
<script>
document.getElementById("btnSearch")
.addEventListener("click",showAlert);
function showAlert() {
alert("hello world");
}
</script>
</head>
<body>
<div>
<label>Enter code</label>
<input type="text" id="txtStudentID"/>
<button id="btnSearch">Search</button>
</div>
</body>
</html>
and my
code.gs
function doGet() {
return HtmlService.createHtmlOutputFromFile('Index');
}
I also try it like google shows it here: but I still don't get the alert to trigger after the button is pressed:
<input type="button" value="Search"
onclick="google.script.run
.withSuccessHandler(showAlert)
.withUserObject(this)" />
it's like anything that starts with "document.getElementByID..." within the script tags will simply not work
What am I missing? is this something not longer supported with GAPS? is there a different/proper way to get this to work?
thank you in advance.
anything that starts with "document.getElementByID..." within the script tags will simply not work
Yes. Because at the time script tags are evaluated, there's no element with id btnSearch.
Solution(s):
Move the script to the bottom of DOM.
<div>
<label>Enter code</label>
<input type="text" id="txtStudentID" />
<button id="btnSearch">Search</button>
</div>
<script>
function showAlert() {
alert('hello world');
}
document.getElementById('btnSearch').addEventListener('click', showAlert);
</script>
Alternatively, As the previous answer states, use the load trigger; so that the script is evaluated after the DOM is loaded.
<script>
function showAlert() {
alert('hello world');
}
function load1() {
document.getElementById('btnSearch').addEventListener('click', showAlert);
}
window.addEventListener('load', load1);
</script>
Try putting addEvent into window.onload
My HTML file:
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" />
<script src="script.js" type="text/javascript"></script>
</head>
<body>
<form name="someForm">
<input type="button" value="Click me" onClick="myFunction()" />
</form>
<div id="result"></div>
</body>
</html>
My script.js file:
function myFunction(){
$("#result").html("BUTTON WORKS");
}
I have Firebug, and whenever I click the button, Firebug throws me this error:
ReferenceError: myFunction is not defined
What am I doing wrong?
script can't be a self closing tag in HTML (it works on some browsers, depending on the doctype, but it's not correct). You must add a closing tag.
Replace
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" />
with
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
The script element pointing to your script probably isn't parsed correctly due to this error.
From the norm :
A script element must have both a start tag and an end tag.
Blockquote
Might be due to file reference issue.
It is a better practice to attach the event in the js file instead of HTML.
<form name="someForm">
<input type="button" id="btn" value="Click me" />
</form>
$('#btn').on('click', function(){
$("#result").html("BUTTON WORKS");
});
Do you open that file locally (you have file:// in address bar) or from some server (http:// protocol in address bar)? Because if you open file locally, you actually try to load jquery from address:
file://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
which is incorrect. It happens, because you use //ajax.googleapis.com/... as adress, which refers the same protocol as currently opened page.
Either change it to:
http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
of upload your file to some server (or even install one locally) and test it through full http request.
I solved the problem by combining answers from #Susbanth, #MBO, and #dystroy.
Here's my new HTML file:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="script.js" type="text/javascript"></script>
</head>
<body>
<form name="someForm">
<input type="button" value="Click me" />
</form>
<div id="result"></div>
</body>
</html>
I added "http" to the jQuery source, closed the tag, and removed the 'onClick' from inside the HTML.
Here's the updated script.js file:
$(document).ready(function(){
$("input[type=button]").on("click",function(){
$("div#result").html("BUTTON WORK");
});
});
I made the onClick event a jQuery event.
I am using C#.NET 2.0.
I have already called functions that are stored in external JavaScript file.However, the ,method currently used by me is like this
1) add the external JavaScript file reference
e.g.
2) call a local function on click event
onclick="someFunction();"
This function(someFuction) is present within the design page
3) Then call the function in the external JavaScript file(say ABC()) from within this function.
This works, but there is the overhead of writing the someFunction each time.
Is there a way to call the function ABC() directly form button click ?
Thanks in Advance
Rohan, I guess you are talking about an ASP.NET web page with a JavaScript block in the header and another separate JavaScript file referenced from the page.
If the external JavaScript file is referenced correctly, you CAN directly call the function.
For example, say you have a JavaScript file named external.js referenced. And lets assume it has a function named ExternalFunction() in it. You can call the ExternalFunction() directly from you HTML or ASP.NET button like you usually call a function in the same file:
Example:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
<script type="text/javascript" src="ExternalFile.js"></script>
<script type="text/javascript">
// Other local JavaScript code goes here
</script>
</head>
<body>
<form runat="server">
<!-- ASP.NET button control -->
<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="ExternalFunction();" />
<!-- HTML button -->
<input type="button" onclick="ExternalFunction();" />
</body>
</html>
Note that ASP.NET buttons use OnClientClick for JavaScript and HTML buttons use onclick
I am just getting started with HTML/JavaScript, and I have a simple question. I am attempting to call a js function from a separate script source, but am having a bit of trouble. My function script (date_button_function.js) reads:
function displayDate()
{
document.getElementById("date").innerHTML=Date();
}
In order to call on this function, my code looks like this:
<html>
<head>
<script type="text/javascript" src="date_button_functoin.js"></script>
<body>
<h1>Testing the Date</h1>
<p id="date">Click below to see the date.</p>
<button type="button" onclick="displayDate()">Display Date</button>
</body>
</html>
When I actually write out the displayDate function in the HTML script, it runs just fine. However, when calling the function, it does not work. If someone could let me know my syntax error, that would be great.
You're not closing your head tag, that's probably your issue there. Also, as stated on the comments, the name of the js file is wrong, should read "date_button_function.js" instead of "date_button_functoin.js"
Is there a way that a JavaScript function can read the JavaScript source code of other functions in an html page, so that the function can do some checking job on the javascript source code of these other functions?
Maybe a walkabout is how to get the source code of all JavaScript functions in an HTML page.
If you want to see the source of a function, you can use the toSource() function:
function x(a) {
return a + 1;
}
console.log(x.toSource());
// "function x(a) {
// return a + 1;
// }"
I'm not sure about how you'd read the source outside of a function, or even why you'd particularly want to do this.
If you want the entire script tag try the following:
<html>
<head><title>Testing</title></head>
<body>
This is body text.
<input type="button" onClick="javascript:readScript()" value="Read it!" />
<script type="text/javascript" id="myscript">
function readScript(){
var html = document.getElementById("myscript").innerHTML;
alert(html);
}
</script>
</body>
</html>