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.
Related
I'm trying to get a simple javascript function to work. I know enough Javascript to think to myself, "This should work, Why isn't it working!" I'm sure we've all been there before. I have done some research to brush up on my functions and to compare my function to but to no avail, I still can't get this function to work. I'm using Javascript to try to display my name within a span element. Normally this should be easy but, for some reason it just isn't working. This is also done in a .php file and a .html file. Because i wanted to make sure it didn't matter if it was a .php file or .html file. It won't work in either. This is for a php project by the way.
Here's the code
<html>
<head>
<script>
var yourName = "Robin";
function placeName()
{
document.getElementById("myName").innerHTML = yourName;
}
</script>
</head>
<body>
<h1>PHP Basics</h1>
<h2>Hi! My Name is<span id = "myName"></span>
</body>
</html>
Like I said, This should be simple, but it won't work. I'm hoping a new set of eyes (you guys) would be able to point out my rookie mistake. If I need to explain anything in more detail please let me know. And thank you all very much.
You're not running the function. Be careful, only run the function after the span has been created or else it will not work. See this example.
<html>
<head>
<script>
var yourName = "Robin";
function placeName()
{
document.getElementById("myName").innerHTML = yourName;
}
</script>
</head>
<body>
<h1>PHP Basics</h1>
<h2>Hi! My Name is<span id = "myName"></span>
<script>
// run function
placeName();
</script>
</body>
</html>
You have made the body of the function but you haven't call the function so that it will be executed. You can do it like this
<html>
<head>
</head> <body> <h1>PHP Basics</h1> <h2>Hi! My Name is<span id = "myName"></span> </body> </html>
var
yourName = "Robin";
function placeName() {
document.getElementById
("myName").innerHTML
= yourName; }
placeName();
// it won't return undefined try it
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.
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.
This question already has answers here:
when and where to put javascript in html
(7 answers)
Closed 9 years ago.
the thing is i'm unable to figure out where to embed javascript in html page whether in head section or body section.
example 1:
<html>
<head>
<title>events</title>
<script>
document.getElementById("b").onclick=function(){displayDate()};
function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}
</script>
</head>
<body>
<p id="demo"></p>
<button id="b">new</button>
</body>
</html>
in the above example I placed script tags in head section but it is not working.
example: 2
<html>
<head>
<title>events</title>
<script>
function upper()
{
var x=document.getElementById("t");
x.value=x.value.toUpperCase();
}
</script>
</head>
<body >
enter some text:<input type="text" id="t" onChange="upper()"/>
</body>
</html>
in the second example I placed the javascript in head section it is working properly.first example demonstrates that on clicking a button date will be displayed in the second example in a text box when data is entered and if we come out of the box the letters in the box will we converted to uppercase.
To have it more readable I prefer to always place JavaScript in the head section. If you need to access elements from there, use the window.onload event:
<head>
<title>events</title>
<script type="text/javascript">
window.onload = function() {
document.getElementById("b").onclick = function() {
displayDate();
};
};
function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}
</script>
</head>
This would work just fine.
Your second example worked because you just defined a function, you didn't try to access any element.
You can put it in the head. The problem is that your examples are not the same. The first one doesn't work because the current date is retrieved by calling Date(), when it should be new Data().getDate(). The second example works because the code is valid.
The problem you're running into is that you're trying to reference an element before it is loaded into the DOM.
When you're putting the script in the HEAD tag, the dom hasn't been loaded yet and the document.getElementById won't find what you're looking for.
You have a few different options to deal with this. You can put the script at the end of the page, which will work for your small example here.
Probably a better option is to take a look at learning/using jquery or another js utility. Jquery makes it easy to solve this issue by giving you a "ready" event. This ready event will be triggered when the DOM is fully loaded. So:
$(document).ready(
function()
{
$("#demo").html((new Date()).toString());
});
Is all you really need. With this approach, it doesn't matter where the script it on the page.
I have a working JavaScript function declared in the head of an HTML page. I know how to create a button and call the function when the user clicks the button. I want to call it myself some where on the page:
myfunction();
How do I do it?
You can call it like that:
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript">
var person = { name: 'Joe Blow' };
function myfunction() {
document.write(person.name);
}
</script>
</head>
<body>
<script type="text/javascript">
myfunction();
</script>
</body>
</html>
The result should be page with the only content: Joe Blow
Look here: http://jsfiddle.net/HWreP/
Best regards!
I'm not sure what you mean by "myself".
Any JavaScript function can be called by an event, but you must have some sort of event to trigger it.
e.g. On page load:
<body onload="myfunction();">
Or on mouseover:
<table onmouseover="myfunction();">
As a result the first question is, "What do you want to do to cause the function to execute?"
After you determine that it will be much easier to give you a direct answer.
Just drop
<script>
myfunction();
</script>
in the body where you want it to be called, understanding that when the page loads and the browser reaches that point, that's when the call will occur.
You can also put the JavaScript code in script tags, rather than a separate function. <script>//JS Code</script> This way the code will get executes on Page Load.