I have try this on jsfiddle,
here's the html :
<input onclick="masuk(10);" type="radio" name="myRadio1" value="Yes"/>1<br/>
<input onclick="alert(10);" type="radio" name="myRadio1" value="Yes"/>2<br/>
here's the js :
function masuk(a) {
alert(a);
}
here's the link : http://jsfiddle.net/codingsolver/MsYqx/
the point is, why if click the first radio button which call function masuk() it doesn't want to show the alert. But if I directly call the alert, it works. Does any one know why?? Thanks lots
It should work. Make sure you are loading javascript after the DOM has been loaded. Place javascript above </body>
Your jsFiddle is gone, but in order to call from HTML like that, your variable would have to be globally defined, which it probably isn't (but can't say for sure without the full source).
Related
This question already has answers here:
Why isn't my JavaScript working in JSFiddle?
(7 answers)
Closed 3 months ago.
There is some code I wanted to put into JSFiddle. It didn’t work. Narrowing it down I can’t even get this simplest of code to work:
JSFiddle
function displaymessage() {
alert("Hello World!");
}
<form>
<input type="button" value="Click me!" onclick="displaymessage()" />
</form>
<p>By pressing the button above, a function will be called. The function will alert a message.</p>
The alert box doesn’t show up in the JSFiddle.
Select No wrap - bottom of <head> in the “Load type” dropdown in the JavaScript settings.
You need to take your function out of the onLoad/onReady otherwise it is placed inside of another scope and your button cannot access the function. In your case you need to use
No wrap (head)
The code generated looks like this:
Ext.onReady(function() {
function displaymessage()
{
alert("Hello World!");
}
});
Change the code to run "no wrap (head)" instead of "onDomReady". Your function isn't visible to your markup as is.
Maybe some of you need to move your function outside of document.ready if you use html onclick="func()"
$(document).ready(function() {
...
}
function func(){
...
}
If you still have problems, check whether you have
AdBlockers installed as a browser extension? (i.e. AdBlocker Plus)
Turn off AdBlockers in JSFiddle and run again.
I hope this helps some one.
Thanks.
Sorry but... is much simpler than what you propose...
If you want to call a js function with "onclick" attribute, put your javascrit code directly in head, you dont need domready or similars.
Second, you need to include "javascript:" before the function name.
See: http://jsfiddle.net/XNJxT/1838/
<input type="button" value="Click me!" onclick="javascript:displaymessage()" />
My problem to this was when I made my script tag I typed it out :
script type="javascript/text"
instead of :
script type="text/javascript"
and now it works.
http://jsfiddle.net/praveen_prasad/XNJxT/14/
Js fiddle so something like this to whatever you write
window.addEvent('load',function(){
//Your code
});
I am accessing javascript variable but i am not able to access it using the following code.
<script type="text/javascript">
function msg1(a)
{
var1=a;
}
function msg2(b)
{
var2=b;
}
</script>
<input type="radio" name="people" onfocus="msg1(this.value);" value="2">
<input type="radio" name="rating" onfocus="msg2(this.value);" value="5">
<script type="text/javascript">
if(var1==2 && var2==5)
document.getElementById("scores").innerHTML='511';
</script>
However instead of calling the function through onfocus event, when I call the function directly,the code runs.The code that is working is:-
<script type="text/javascript">
function msg1(a)
{
var1=a;
}
function msg2(b)
{
var2=b;
}
msg1(2);
msg2(5);
if(var1==2 && var2==5)
document.getElementById("scores").innerHTML='511';
</script>
I can't figure out what is the error in the code that is not working. Plz suggest me.
This is a timing problem.
You try to read the variables when the page loads.
You try to set the variables when the inputs receive focus.
Since they haven't been set at the time you try to read them, you get an error.
You never try to read them again.
You have to set them before you can read them.
Move the logic for testing the values of the variables inside the event handlers that change them.
You should also declare them (and possibly give them default values) when you load the page. Otherwise the first event handler will try to set one of them and then read both of them (at which point one will be undeclared and you'll still get a reference error).
download
<script type="text/javascript">
function download() {
alert("hello");
}
</script>
When I click the link, I don't see an alert. Instead it says the function doesn't exist. Why?
When I rename download to downloadx, it still doesn't work, so it's not the name of my function that's a problem.
First of all as #gmo said your code will never work outside JSFiddle because of the name of the function.
Read More about it HERE (Can't use “download” as a function name in javascript)
From now on i'll use downloadx as the function's name
Instead another problem caused by JSFiddle makes your code non functioning even if you use downloadx.
simple-example-doesnt-work-on-jsfiddle
JSfiddle wrap your code inside a window.onload function, so the download function is outside of the scope.
//<![CDATA[
window.onload=function(){
function downloadx() {
alert("hello");
}
}//]]>
SOLUTION 1 JSFiddle
you should declare it directly on window
window.downloadx = function() {
alert("hello");
}
SOLUTION 2 JSFiddle
Select No wrap - in <head>
On the left column in JSFiddle
NB
In any case you should use another name for the function, this is the reason why it doesn't work outside JSFiddle.
I still think it's a duplicate question from here: Can't use "download" as a function name in javascript
And related exclusive on the function name in a tag.
...<a> elements have a download attribute in HTML5 as explained
here...
Maybe a workaround is possible, but definitely not recommendable to mess with browser native functions.
But.. if you still think that it's not.. please try this:
(no hacks needed)
function download() {
alert("hello");
}
function downloadx() {
alert("hello");
}
download <-- not working
<br />
downloadx <-- works
<br />
<span onClick="download();">download</span> <-- works
The last one use download as function name and also work, why?
Because it's not an <a> tag.
This question already has answers here:
Why isn't my JavaScript working in JSFiddle?
(7 answers)
Closed 3 months ago.
There is some code I wanted to put into JSFiddle. It didn’t work. Narrowing it down I can’t even get this simplest of code to work:
JSFiddle
function displaymessage() {
alert("Hello World!");
}
<form>
<input type="button" value="Click me!" onclick="displaymessage()" />
</form>
<p>By pressing the button above, a function will be called. The function will alert a message.</p>
The alert box doesn’t show up in the JSFiddle.
Select No wrap - bottom of <head> in the “Load type” dropdown in the JavaScript settings.
You need to take your function out of the onLoad/onReady otherwise it is placed inside of another scope and your button cannot access the function. In your case you need to use
No wrap (head)
The code generated looks like this:
Ext.onReady(function() {
function displaymessage()
{
alert("Hello World!");
}
});
Change the code to run "no wrap (head)" instead of "onDomReady". Your function isn't visible to your markup as is.
Maybe some of you need to move your function outside of document.ready if you use html onclick="func()"
$(document).ready(function() {
...
}
function func(){
...
}
If you still have problems, check whether you have
AdBlockers installed as a browser extension? (i.e. AdBlocker Plus)
Turn off AdBlockers in JSFiddle and run again.
I hope this helps some one.
Thanks.
Sorry but... is much simpler than what you propose...
If you want to call a js function with "onclick" attribute, put your javascrit code directly in head, you dont need domready or similars.
Second, you need to include "javascript:" before the function name.
See: http://jsfiddle.net/XNJxT/1838/
<input type="button" value="Click me!" onclick="javascript:displaymessage()" />
My problem to this was when I made my script tag I typed it out :
script type="javascript/text"
instead of :
script type="text/javascript"
and now it works.
http://jsfiddle.net/praveen_prasad/XNJxT/14/
Js fiddle so something like this to whatever you write
window.addEvent('load',function(){
//Your code
});
I have this piece of Javascript and it just won't work. I allready checked JSlint but that said everything works. Still doesn't work. The javascript is located not in the HTML but is linked in the <head>
note: I am working with a local server, so pageload in instant.
function changeVisibility() {
var a = document.getElementById('invisible');
a.style.display = 'block';
}
var changed = document.getElementById('click1');
changed.onchange = changeVisibility;
This here is the corresponding HTML
<input type="file" name="click[]" size="35" id="click1" />
<div id="invisible" style="display: none;">
Attach another File
</div>
So what happens is I click on the input, select a file and approve. Then then onchange event triggers and the style of my invisible div is set to block.
Problem is, I keep getting this error:
"changed is null:
changed.onchange = changeVisibility;"
i don't get it, I seriously don't get what I'm overlooking here.
EDIT: question answered, thank you Mercutio for your help and everyone else too of course.
Final code:
function loadEvents() {
var changed = document.getElementById('click1');
var a = document.getElementById('invisible');
document.getElementById('addField').onclick = addFileInput;
changed.onchange = function() {
a.style.display = 'block';
}
}
if (document.getElementById) window.onload = loadEvents;
This here is the corresponding HTML:
<input type="file" name="click[]" size="35" id="click1" />
<div id="invisible" style="display: none;">
Attach another File
</div>
Also, thanks for the link to JSbin, didn't know about that, looks nifty.
This sounds like the DOM object doesn't exist at the time of referencing it. Perhaps change your code to execute once the document has fully loaded (or place the javascript at the bottom of your page)
note: I am working with a local server, so pageload in instant.
that's not the issue - the constituent parts of a document are loaded in order. It doesn't matter how fast they are loaded, some things happen before others :D
The onlything I'd like to do now is remove the Javascript link from the ...
Place an id on there, and inside your function do this:
document.getElementById('addField').onclick = addFileInput;
Or, as you already have the div as the variable 'a':
a.firstChild.onclick = addFileInput;
But this obviously leaves you with an invalid anchor tag. Best practice suggests that you should provide a way to do it without javascript, and override that functionality with your javascript-method if available.
mercutio is correct. If that code is executing in the HEAD, the call to "document.getElementById('click1')" will always return null since the body hasn't been parsed yet. Perhaps you should put that logic inside of an onload event handler.
I think its because you are trying to modify a file element.
Browsers don't usually let you do that. If you want to show or hide them, place them inside of a div and show or hide that.
Right, I've modified things based on your collective sudgestions and it works now. Onlything bothering me is the direct reference to Javascript inside the anchor
You need to wrap your code in a window.onload event handler, a domReady event handler (available in most modern js frameworks and libraries) or place at the bottom of the page.
Placing at the bottom of the page works fine, as you can see here.
Decoupling event responder from your markup is covered under the topic of "Unobtrusive JavaScript" and can be handled in a variety of ways. In general, you want to declare event responders in a window.onload or document.ready event.