HTML , Javascript - javascript

I want to have some text shown by the label in HTML. This label must get its text from a Javascript function when the page is loaded or reloaded. How can I achieve this? The text will be dynamic.
<label id="MyLabel"></label>
<script type="text/javascript">
labelFunc(){
document.getElementById("MyLabel").innerHTML='<?php echo $_SESSION["SomeSession"];?>';
}
</script>
The Label 'MyLabel' should get its text from the 'labelFunc()' javascript function.

You've created the labelFunc function, but never called it, so it never gets executed. Also, your function declaration syntax is incorrect - you need to put function before you write your function.
To update your existing code:
<script type="text/javascript">
function labelFunc(){
document.getElementById("MyLabel").innerHTML='<?php echo $_SESSION["SomeSession"];?>';
}
labelFunc();
</script>
If you never need to call that function again, then using a function would be unnecessary - you could simply just put it the code you need to run on its own inside the script tag:
<script>
document.getElementById("MyLabel").innerHTML='<?php echo $_SESSION["SomeSession"];?>';
</script>

your code is just fine as it is, you just need to make sure the page is loaded before the JS is executed. do that by either putting your JS at the bottom, or calling it when the page is loaded.
<body onload="labelFunc();">
also, you need the word "function"
<script type="text/javascript">
function labelFunc(){
document.getElementById("MyLabel").innerHTML='<?php echo $_SESSION["SomeSession"];?>';
}
</script>

Related

call javascript method directly from html

Hello I want to call javascript method directly from jsp.Here is my dummy code in this javascript method print1() is not calling.
<html>`
<body>
<h1>hello</h1>
<script>print1()</script>
<p>hii</p>
<script>
function print1(){
alert("hello");
document.getElementsByTagName("p").innerHTML="hey";
}
</script>
</body>
</html>
Solving this can help me to great extent.
Note-I can't call it using onload as this is only dummy code I have to apply logic to some other code
First, there are a few syntax errors in your code that need to be fixed.
Then, You will need to call the function after it is defined (or in the same <script> tag). Function hoisting does not hoist print1() in time. That is because the browser tries to execute the script as soon as it encounters it. This means when the browser sees <script>print1()</script>, it is not even aware of the rest of the file.
So you need to invoke print1() after the function is defined. In addition to the solutions in comments and the other answer, another option would be to put the script in a separate file and invoke it with defer.
printFunc.js:
print1();
In the html file:
<script src="printFunc.js" defer></script>
This will invoke print1(). Note that defer does not work if the script is not external.
Just for fun (and To see how the browser goes through <script> tags), you can even invoke the function via setTimeout:
<script>
setTimeout(function(){ print1(); }, 3000);
</script>
<script>
function print1(){
alert("hello");
document.getElementsByTagName("p").innerHTML="hey";
}
</script>
There are two options to fix the issue:
Option1: Move the call <script>print1()</script> to the end of the file (i.e., define the function first before the call and look here for clear explanation on this)
Option2: Call it during the body onload as shown below:
<body onload="print1()">
</body>
Firstly its that you can call it in body tag as "onload", Secondly "getElementsByTagName" returns array so you have to tell at which array position you want to make your change
<html>`
<body onload= "print1()">
<h1>hello</h1>
<p>hii</p>
<script>
function print1(){
alert("hello");
document.getElementsByTagName("p")[0].innerHTML="hey";
}
</script>
You can do this way also
<html>`
<body>
<h1>hello</h1>
<p>hii</p>
<script>
function print1(){
alert("hello");
document.getElementsByTagName("p")[0].innerHTML="hey";
}
</script>
<script>print1();</script>
</body>
</html>

Why can't I execute JavaScript function inside the <script> tag that defines the .js source?

I am defining the source of a .js file and attempting to call a function from that file in the same tag, as follows:
<script type="text/javascript" src="jsFunctionTest.js">
testMethodCall();
</script>
The .js file just contains:
function testMethodCall(){
window.alert("Hello there");
}
This doesn't work, I don't see the alert.
However, if I change the tag to two tags, as below, then it works:
<script type="text/javascript" src="jsFunctionTest.js"></script>
<script type="text/javascript">
testMethodCall();
</script>
This seems pretty messy. Is there any reason the first one doesn't work?
script elements can have a src attribute or content, but not both. If they have both, the content is ignored (the content is considered "script documentation," not code).
You cannot register an external file and use the content in it, both at a time inside <script> tags. Only either one is allowed.

How to call an external function internally in javascript? [duplicate]

This question already has answers here:
javascript <script> tag - code execution before src download
(4 answers)
Closed 8 years ago.
I am relatively new to JavaScript so this might be somewhat trivial. However I can't seem to find the answer to this question.
Say I have a JavaScript file (bar.js) with a function in it called foo(). I want to call this function (foo) inside a script tag. I would like it to work like so.
<script type="text/javascript" src="bar.js">
foo();
</script>
I am not able to get this to work. I have ran the JavaScript console with my browser and what it seems to be doing is...nothing. No syntax errors or anything.
I can run a function similarly with a button click...using the script tag above and this.
<button type="button" onclick="foo();">Click Me</button>
I could do it this way, but in the actual circumstance I need to pass parameters into the function that is being called on the button click. I can't get those recognized either. I'm sure that something to do with scope.
The way I tried this was like so...
<script type="text/javascript" src="bar.js">
var a = "blah";
var b = "blab";
</script>
.... (some more html)
<button type="button" onclick="foo(a,b);">Click me </button>
Here I get that a is undefined. Which leads me to think that it is a scope problem. The script tag is in the head section and the button is in the body section. Can you put script tags outside of the head and body tags to make global data?
Thanks for the help in advance.
I have never used jsfiddle before and was having trouble getting it to work so I'll just post and example code here.
<html>
<head>
<script type="text/javascript" src="bar.js">
</script>
<!--From what yall say I should have another script
tag here for anything else. Say some variable?-->
<script type="text/javascript">
var a = "hello";
var b = "text";
</script>
</head>
<body>
<!--This should work now?-->
<button type="button" onclick="foo(b,a)">
Click me
</button>
</body>
</html>
bar.js contents:
function foo(id,string){
document.getElementById(id).innerHTML = string;
}
I got this to work.
Thanks everyone.
You need to first include the javascript containing the function:
<script type="text/javascript" src="bar.js"></script>
and then call it in another script tag:
<script type="text/javascript">
foo();
</script>
In your example you seem to have mixed 2 notions into a single script tag which is invalid: include an external javascript file and in the body of the script tag write your code.
According to the specification:
The script may be defined within the contents of the SCRIPT element or
in an external file. If the src attribute is not set, user agents must
interpret the contents of the element as the script. If the src has a
URI value, user agents must ignore the element's contents and retrieve
the script via the URI.
So basically you should avoid such situations and have separate script tags for including external files and for writing inline js.

Echo php var before the </head> (closing head) tag in order to retrieve it with java script

I have a php variable called $myVar = "6542";
Where can I echo it before the </head> tag of my site (and not trigger any html issues) in order to be able to pick the value up with javascript?
Ty
Throw it above your tag somewhere. Simple.
<script type="text/javascript>var myvar = '<?=htmlspecialchars($myVar);?>';</script>
It can be put anywhere on the page, not necessarily needing to be above
Just about anywhere (the HEAD contents is the best place), provided that you wrap it up with a <script> tag:
<script>
var myVar = "6542";
</script>

Script src inside jquery function

I want to do something like this:
$("#startButton").click(function() {
<?php if(somecondition){ ?>
<script src="some-external-js-srouce"></script>
<noscript><img src="irrelevant"></noscript>
<?php } ?>
});
Meaning that I want to execute some external javascript inside a jquery function if a button has been clicked. Can you help me?
You're putting HTML inside JavaScript. That's not quite possible.
You probably want $.getScript to load and execute a script dynamically at runtime. It does not support <noscript> but you're using JavaScript for it anyway, so that does not really make sense to me...
if you want to execute a javascript function from an external file then you can try like this -
<script type="text/javascript" src="myjs.js">
// code that will refer functions of myjs.js
</script>
use jQuery.getScript( url, function(){});
http://api.jquery.com/jQuery.getScript/

Categories