I have a hyperlink in the index file, which calls an HTML file. This HTML file has a button and some instructions. Once clicked the button, it is supposed to call a function from another HTML page and display a summary of some calculations.
I have used <link>, <script src=> etc. but I always get the error that the function assigned to the "button click" is not available. Any suggestions is greatly appreciated.
Did a bit more research on how to post here and following is the script, better presented.
file 1 - index.html
<html>, <head>,, Increment count when button is clickedThe button was pressed <span id="displayCount">0</span> times.</p> </body> </html>
file 2 - test.js
<script LANGUAGE="javascript"> var count = 0; var button = document.getElementById("countButton"); var display = document.getElementById("displayCount"); button.onclick = function(){ count++; display.innerHTML = count; } </script>
Cheers
You should put your function in another file (js file) and include it in your pages head tags.
Example:
<html>
<head>
<script src="myfile.js"></script>
</head>
<body>
........
</body>
</html>
You need to add that script/functionality on that page also, where button is present.
Related
I work in schools and use google forms to keep track of a number of things.
One of these forms emails people with information from the sheet that is entered.
I have managed to cobble together a good script that provides this service, however, I want it to look good.
My question is simple (or so I believe it is):
When I put in my HTML for the body of the email, how do I call the variables that I have defined earlier in the script?
Do I need to define them in the HTML or can I call them from the JavaScript?
I am not a serious coder by any means but this one has seemed to escape my ability to google it.
Any help would be appreciated.
calling a value of the variable created in javascript, outside the script.
<html>
<script>
var somevariable = "hi"; //this is the variable you create in JavaScript
window.onload = function() {
document.getElementById("blabla").innerHTML = somevariable; //here you send the value of 'somevariable' to html.
}
</script>
<body>
<input type="text" id="blabla" name="someInput"></input>
</body>
</html>
I am not too sure what your code looks like so this is only an attempt to answer what I understand so far.
In you HTML document you don't call variables, you call functions. for example when you click a button, the text would change to what your variable is by calling the onclick Event inside the button, ChangeText() will be the function for the first example:
<!DOCTYPE html>
<html>
<body>
<p id="p1">Hello</p> <br />
<button onclick="ChangeText()">Button</button> <!-- onclick event -->
<script>
var p1 = document.getElementById("p1"); //variable created
function ChangeText () {
//when you click the button this function will be called
p1.innerHTML = "Changed text on button click!";
}
</script>
</body>
</html>
You could also call on the load of the document (but this would mean that you would't see what it was before):
<!DOCTYPE html>
<html>
<body>
<p id="p1">Hello</p> <br />
<script>
var p1 = document.getElementById("p1"); //variable created
p1.innerHTML = "Changed text on page load!"; //change text on load
</script>
</body>
</html>
hope this helps.
I have this code in razror view page:
<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction()">
Click me</button>
<p id="demo">
</p>
#{
List<UserContact> userContacts = ViewBag.contacts;
String contacts1 = Html.Partial("~/Views/Shared/Contacts.cshtml", userContacts).ToHtmlString();
}
<script type="text/javascript">
var contacts2 = #contacts1;
function myFunction() {
alert(contacts2);
}
</script>
</body>
</html>
when I press button Click me I get this error:
ReferenceError: myFunction is not defined
Why I get this error?
Any idea why I get this error?
Looks like you have some pretty broken HTML. You have assigned the contacts1 server side variable to an HTML fragment:
String contacts1 = Html.Partial("~/Views/Shared/Contacts.cshtml", userContacts).ToHtmlString();
and then you injected it inside a tag:
<script type="text/javascript">
var contacts2 = #contacts1;
function myFunction() {
alert(contacts2);
}
</script>
which totally breaks your markup. Look at the source code of the generated page in the browser and you will see how broken it is.
And how can I fix it?
It's not quite clear what you are trying to achieve so it's pretty hard to say how to fix this issue, but for starters you might try having valid markup and javascript:
<script type="text/javascript">
function myFunction() {
alert('The button was clicked');
}
</script>
It looks like you are trying to load some markup from the server when the button is clicked. You might consider using AJAX if this is the case.
UPDATE:
It looks like you are trying to assign a server side string variable to a javascript variable. This can be done by properly encoding it:
<script type="text/javascript">
var contacts2 = #Json.Encode(contacts1);
function myFunction() {
alert(contacts2);
}
</script>
im doing a school work with Jquery and I just want to know if its possible and how to do the following:
Page A has the following : external JS file that has the function to allow a user to enter some text and then when they press the submit button that text is automatically put as the paragraph text as ive use JS to get the element and replace the text using innerhtml.
External JS file:
function grabText() {
var grabThePara = document.getElementById("firstP").value;
var intoParagraph = document.getElementById("pOne").innerHTML = grabThePara;
}
HTML FILE :
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery-1.10.2"></script>
<script type="text/javascript" src="ts.js"></script>
</head>
<body>
<input type="text" id="firstP" name="firstP">
<br />
<p id="pOne">Static works fine -- > this is the static</p>
<input type="button" onclick="grabText()" value="Submit">
GO to JD Panel
</body>
</html>
Page B has the Jquery part, this has the code that will grab the text from the Page A's first paragrpah called ID pOne, it gets the text without an issue if its STATIC input but the moment you use as described previous by using the textbox and dynamically changing the text of the paragraph the page A does the change but Page B still shows the static text input, not the new dynamic changes that occurred after input-ed into the textbox and submitted. I will show code.
Page B code :
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery-1.10.2.js"></script>
<script type="text/javascript" src="ts.js"></script>
</head>
<body>
Change the text again
<script type="text/javascript">
jQuery.ajax({
url: "adminPanel.html",
success: function (printIt) {
var html = jQuery('<p>').html(printIt);
var grabIt = html.find("p#pOne").html();
var sendItToParaOne = document.getElementById("paraOne").innerHTML = grabIt;
}
});
</script>
<p id="paraOne"></p>
</body>
</html>
Sorry for my English i know its not the best. thanks for taking the time in reading my issue and any helps is appreciated
Thanks again!
M
You need to save your data somewhere. If you don't want to work with a database, you can use HTML 5 web storage: http://www.w3schools.com/html/html5_webstorage.asp
Furthermore, looking at your external JS file, you might want to have a look at jQuery selectors: http://www.w3schools.com/jquery/jquery_selectors.asp
I hope this helps you.
You're confusing yourself by thinking that pages are able to talk to each other. Your page A has to send the changes to the server, but the server also has to be programmed to listen to those changes in server code like PHP or ASP.NET. Only then can page B get the changes made by page A.
I have now spent hours trying to figure out how you do this by reading other's posts - I even got a jsfiddle to work, but can't get this to work in my page.
I want to construct a URL to be used on a page multiple times, so that when I need to update the URL, I only need to do it in one place via a Javascript variable in the header.
I break the URL into two parts because one of the variables will nearly always be the same, but the other most often will be different on different pages.
For example, I declare in my header:
<script language="javascript" type=”text/javascript”>
function goSchedule()
{
var schedulePath = "http://[rootPath]/";
var scheduleFileName = "[extension to document].htm";
schedulePath = schedulePath + scheduleFileName;
document.getElementById('go').href= schedulePath;
}
</script>
And then I can't seem to figure out how to call it in the href. This doesn't work:
<p>Click the following link to test:Test this link</p>
If you answer, please explain how the initial Javascript is created and how to properly call it so it becomes an active URL.
It looks like you are trying to replace the href attribute at the moment the user clicks the link. I suggest you replace the href attribute once for all the link as soon as the page has finished loading.
Make sure you declare your function in the head section
<head>
<!-- Other head declarations ... -->
<script language="javascript" type=”text/javascript”>
function goSchedule() {
var schedulePath = "http://[rootPath]/";
var scheduleFileName = "[extension to document].htm";
schedulePath = schedulePath + scheduleFileName;
document.getElementById('go').href = schedulePath;
}
</script>
</head>
And then bind this method to the onload event of the body element like this
<body onload="goSchedule()">
<!-- Other HTML Stuff Goes Here ... -->
<p>Click the following link to test:Test this link
</p>
</body>
Here is the full html page:
<html>
<head>
<!-- Other head declarations ... -->
<script language="javascript" type="text/javascript">
function goSchedule() {
var schedulePath = "http://support.mozilla.org/";
var scheduleFileName = "en-US/products/firefox?as=u&utm_source=inproduct";
schedulePath = schedulePath + scheduleFileName;
document.getElementById('go').href = schedulePath;
}
</script>
</head>
<body onload="goSchedule()">
<!-- Other HTML Stuff Goes Here ... -->
<p>Click the following link to test:Test this link
</p>
</body>
</html>
I want to add the Digg button on my webpage but don't want to add the script tag directly on the page.
<div class="digg">
<script type="text/javascript">
digg_url = '';
digg_bgcolor = '#99ccff';
digg_skin = 'compact';
digg_window = 'new';
</script>
<script src="http://digg.com/tools/diggthis.js" type="text/javascript"></script>
</div>
What are the some of the unobstrusive ways of adding the JavaScript for the Digg button?
The diggthis.js script either places the button where the script tag lies or looks for an anchor tag with a class name of "DiggThisButton". However, it tries to run before all the DOM elements are created. So, instead of having script included in the head of the HTML document, you need to place it at the bottom of the page.
Here's another way of doing this ( the .... represents any additional content):
<html>
<head>
<script type="text/javascript">
digg_url = '';
digg_bgcolor = '#99ccff';
digg_skin = 'compact';
digg_window = 'new';
</script>
.....
<body>
....
<div class="digg">
<a class="DiggThisButton"></a>
</div>
....
<script src="http://digg.com/tools/diggthis.js" type="text/javascript"></script>
</html>
Other than setting those "digg_" variables in a separate file, there's not much you can do.
Including an external Javascript from digg.com isn't really "intrusive" anyway.