Code works across all major browsers, but firing a simple alert on click is not working.
This is in my header
<script type="text/javascript">
function this_function() {
alert("got here mango!");
}
</script>
This is in the body
<button type="button" onclick="this_function()">click me</button>
If I put the "onclick" into the tag then it works fine and dandy.
Any and all suggestions on how to get this to work in IE would be great. Thanks in advance.
Sorry, by "into the tag" i meant putting onclick="alert()" into the tag.
Try: <button type="button" onclick="javascript:this_function();">click me</button>
It's advised to separate JavaScript and markup. Thus regardless you should assign an ID to the button and attach the onclick handler like this:
document.getElementById("button").onclick = function() {
alert("got here mango!");
};
Are you running this sandboxed? If you aren't I would highly suggest trying this all by its self in a single HTML file with no other things going on. It is possible that IE7 is blowing up (quietly) on another script issue that is preventing your "this_function" from loading into the DOM properly.
After you have done this put the in your there is no need for it to be in the head and I have actually seen this cause problems under certain conditions
Related
I have no idea whats going on with this but I have a website with this html:
<button id="mute"><input type="image" src="img/stop.png" class="stop" onclick="toggleStop(this);"/></button>
<button id="mute2"><input type="image" src="img/sonido.png" class="mute stop" onclick="toggle(this);"/></button>
And I'm trying to toggle the image when ON CLICK with this JS:
<script type="text/javascript">
function toggle(el){
if(el.className!="mute")
{
el.src='img/mute.png';
el.className="mute";
}
else if(el.className=="mute")
{
el.src='img/sonido.png';
el.className="audio";
}
return false;
}
</script>
<script>
function toggleStop(event){
if(el.className!="play")
{
el.src='img/play.png';
el.className="play";
}
else if(el.className=="play")
{
el.src='img/stop.png';
el.className="stop";
}
return false;
}
</script>
It works perfect on Chrome, but it doesnt work on Firefox. I have no clue what's wrong. Sadly I'm no developer, so I do what I can searching on the Internet. Any help would be appreciated.
There is no way this code, as posted, can run under Chrome (or Firefox or any other browser.)
I tried turning it into a snippet but had to make a number of changes to get it usable ... then I stopped trying.
Main issues:
You can't nest an <input> instead of a <button>. Use one or the other.
If you use <button>, it should be <button type="button"> to keep it from acting as a submit button and reloading your form.
Your code is broken.
function toggleStop(event){
if(el.className!="play")
There is no element el and an error is generated.
The first rule of JavaScript work: ALWAYS, ALWAYS check the error console.
So...I took what you said about an INPUT inside an BUTTON and I just delete the button and use an isntead and now it works on both browsers.
Thanks a lot Jeremy!
I am trying to use functions on the website scratchpad.io, but they don't appear to work. I have tried using onclick events for buttons and just having it call the function from inside of the same script tag after it is defined. Does anyone know why this is, and how to fix it?
<script>
function Message(){
alert("scratchpad.io does not work with functions... You won't see this!");
console.log("scratchpad.io does not work with functions... You won't see this!");
}
Message();
</script>
<br>
<button onclick="Message();">Trigger Function</button>
scratchpad.io is for HTML & CSS, it does not support javascript. For that you can use one of the many other similar services that exist out there, like:
JSFiddle
JS Bin
CodePen
I have one HTML file as shown below:
<html>
<head><title>jQuery beginner</title></head>
<body>
<div id='my_div'>Some random generated value</div>
<button id="submit_button">submit</button>
</body>
</html>
I want to keep <div id="my_div"> element hidden until <button id="submit_button"> is clicked.
So in my Javascript file I wrote following code:
$(document).ready(function() {
$('#my_div').hide();
});
$('#submit_button').click(function() {
$('#my_div').show();
});
This script and HTML is working fine in Google Chrome and surprisingly it works in Internet Explorer 9 also but doesn't work in Firefox.
I read some other questions on SO and tried alternatives like
$('#my_div').css('display','block'),
$('#my_div').css('display','inline-block'),
$('#my_div').css('display','block-table'),
$('#my_div').attr('style','display:block')
but none of the above solution is working in Firefox.
Is there any solution to this problem?
One more thing I observed is, if I keep the div visible at page load time and later using button click event toggle it's display, it works.
Any clue why this is happening only in Firefox?
But you missed to try this :)
That is, wrapping the event binding code into the doc ready handler.
$(document).ready(function() {
$('#my_div').hide();
$('#submit_button').click(function() {
$('#my_div').show();
});
});
Wrap your code inside ready handler:
$(document).ready(function() {
$('#my_div').hide();
$('#submit_button').click(function() {
$('#my_div').show();
});
});
This simple piece of chode is not working in Chromium(Ubunto) and Chrome.
HTML
<input type="button" id="saveFavPunch" name="saveFavPunch" value="save" onClick="saveFavPunch()" >
SCRIPT
var req;
function saveFavPunch(){
alert('govind singh');
if(!req){
req=$.ajax({
type:"POST",
url:"edit?editType=saveFavPunch",
data: {"value":document.getElementById("punchId").value},
complete:function(){req=false},
success: function(data){
$.fancybox.close();
if(data==""){
alert("ERROR!");
}else{
if(data=="0"){
alert("Internal Error Occurs, please try after some time");
}else{
document.getElementById("favPunchline").innerHTML=data;
}
}
}//end success
});
}
}
Can't add a comment yet, nothing's wrong with the code, but to make it work in jsfiddle change onLoad to noWrap
Description of what each of the settings does: http://doc.jsfiddle.net/basic/introduction.html#frameworks-and-extensions
Basically you need it to be in a simple <script> tag, not in the onLoad event
Fiddle with the code you provided: http://jsfiddle.net/Sam88/YEPm3/12/
Since you mentioned jQuery in your tags, I thought I'd give a jQuery solution: Fiddle
Html:
<input type="button" id="saveFavPunch" name="saveFavPunch" value="save" />
Javascript:
$("#saveFavPunch").on("click", function () {
alert('hello2');
});
:)
Edit
Javascript Not Running On JSFiddle is a possible duplicate of your question. I am quoting the selected answer:
The functions you define are defined in an onload function, so whereas before they were referenceable, because they are defined in that function they can only be referenced from within that function. You reference them as globals in your HTML. You have three options
a) ( easiest, quickest, not ideal ) - change function blah(){} to window.blah = function(){}; making the functions global.
b) ( ideal way ) - use unobtrusive Javascript to attach behaviour to DOM elements from within the JS solely, meaning separate HTML from JS.
c) Make the jsfiddle not wrap the stuff onload. Change onLoad to no wrap ( body or head ).
So instead of you'd do var e = document.getElementById('foo'); e.onclick = lol; in the JS only.
I recommend b as it encourages best practices.
Just one change — JSFiddle setting from "onLoad" to "No wrap - in " and it works:
http://jsfiddle.net/3f7PT/
The problem with the onLoad option is that this is what it outputs in the results:
//<![CDATA[
window.onload=function(){
function saveFavPunch(){
alert('hello2');
}
}//]]>
So your function gets unintentionally wrapped in another function which stops it being found from that onclick call.
Hope this helps.
The following entire script works properly in Chrome for me.
<html>
<head>
<script>
function saveFavPunch(){
alert('hello2');
}
</script>
</head>
<body>
<input type="button" id="saveFavPunch" name="saveFavPunch" value="save" onClick="saveFavPunch()" >
</body>
This works
document.getElementById("saveFavPunch").addEventListener("click", saveFavPunch);
function saveFavPunch(){
alert('hello2');
}
http://jsfiddle.net/6sg9R/
Ye JSFiddle is very finicky about Alerts. It works no problem as Spassvogel shows but your way should work as well from file as opposed to on JSfiddle.
Even those you having this type of problem then use div tag
<div id="saveFavPunch" style="height:30px; widht:100px; display:block;" onClick="saveFavPunch()">Save</div>
I think Using this code Your problem will solve.
<form>
<a name='lala'/><a name='lala'/>
</form>
<script type='text/javascript'>
var elem=document.getElementsByName('lala');
alert(elem.length);
</script>
alert pops up 0!??
so that makes it next one not working!??
for(i in elem)
elem[i].addEventListener('click',function(){alert('lala');}, false);
many thanks!!
It is not working because by the time you call document.getElementsByName
the DOM elements are not loaded yet, therefore, your document.getElementsByName('lala'); will return null.
There are several ways to perform a function just when the DOM elements are ready. The simplest way is to create a function in your <head> and call it in the load event of your body
<head>
<script type="text/javascript">
function domLoaded() {
var elem=document.getElementsByName('lala');
alert(elem.length);
}
</script>
</head>
<body onload="domLoaded();">
....
</body>
When you placed the javascript function in the end of your tag, you just began to call the code when your elements where ready. That will work too, but isn't it better to do things the right way and place all your JS code in the head element? By throwing JS code all over the code is going to make you life hell when you need to fix things.
getElementsByName is not supported by all browsers, see here for all browser compatibilities.
It works for me, however. I am running Chrome 10.0.648.127
javascript code had to be included at the bottom of the page,
so that's why folks you should always put your js code to the bottom of the page.
many thanks to everybody ;)