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!
Related
I am new to Javascript and am trying to make a Javascript .click function. Upon clicking button id #btnTransfer, I want it to check against the listed account id value(s) and throw an error message if it matches a listed value. Here is the code im using. The user's input id #accountid is already printed on the webpage via asp, but is hidden from view. Any help would be greatly appreciated :)
$('#btnTransfer').click(function () {
if ($('#accountid').val() == "123456789") {
popError("Error you cannot preform this action");
}
your code is write https://api.jquery.com/click/ i dont understand what u really want to do explain me more or give us more code
You are missing a closing brace and closing parenthesis. Once those syntax issues are fixed and the reference to jQuery included, it works exactly as you said you wanted it to. I don't know what your popError function is like, so I just have it displaying an alert.
function popError(message) {
alert(message);
}
$('#btnTransfer').click(function () {
if ($('#accountid').val() == "123456789") {
popError("Error you cannot preform this action");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="btnTransfer">Transfer</button>
<input type="hidden" id="accountid" value="123456789" />
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 is most strange.
First: I suspect it has to do with my machine.
My problem is simple, I cannot get a conditional stamen to fire on first click. after the first click all is fine and works as should. This is only true for what I am writing recently, all my old files with similar statements work fine and can copy and paste from 3schools with no problems.
If I remove the conditional statement things works as expected, for example if I put the single statement in the tag onclick event it works on first click and is also true for a simple function but not the conditional statement. I have test code below though I am not sure if it will help as I know the code work and think that the first click finds the function but doesn't fire it. As the code shows I have tried a couple of events with the same results.
<script type="text/javascript">
function test() {
var test=document.getElementById('test');
if (test.style.visibility=="visible") {
alert("yes");
}
else {
test.style.visibility="visible";
}
}
</script>
</head>
<body>
<h1 id="test">Hello World You dumbass!</h1>
<button type="button" onmouseup="test()">test</button>
<input type="button" onclick="test()" value="text">
Something is having a bad hair day and I am not finding it. Any thoughts that are intelligent would be most appreciated, and verification that the coding is doing the same for others would also help. I am wounding if it might have to do with text encoding on my machine, though all works everywhere else code can have strang results if some sort of text formatting gets applied like writing code in MS Word.
Thanks
The answer below hit the nail on the head or returns true.
To make this work without a declared style in the tag the condition is written like this
<script type="text/javascript">
function test() {
var test=document.getElementById('test');
if (test.style.visibility=="") {
test.style.visibility="hidden";
}
else {
test.style.visibility="";
}
}
</script>
</head>
<body>
<h1 id="test">Hello World You dumbass!</h1>
<button type="button" onmouseup="test()">test</button>
<input type="button" onclick="test()" value="text">
I should of caught this but that's what one get when they assume, just as I assumed that because the style was declared in the head that the attribute carried over to the element, it doesn't.
hope this helps someone avoid the headache I just went through.
If you debug your function, you will find that test.style.visibility on first run is nothing as this css property is not set to anything for your element initially. As a result, your first run goes into your else and then sets this property. Now, since you have set the value to "visible" in the first run, every subsequent run alerts.
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
<div id="divbody">
<button id="begin">Click me</button>
<script>
$(document).ready(function() {
$("#begin").click(function() {
var e = document.getElementById('divbody');
e.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
});
document.addEventListener("webkitfullscreenchange",function(){
if (document.webkitIsFullScreen) {
//alert('a');
document.webkitCancelFullScreen();
}
}, false);
});
</script>
</div>
The following code basically should cancel full screen as soon as it enters. However, the code above does not work (e.g., it enters full screen but does not cancel back). However, by uncommenting the alert in the webkitfullscreenchange event handler, it does actually cancel.
I have hard time understanding why this is so. Also, how would I achieve what I am trying to do without using alert?
Thanks.
UPDATE
I have tried all the comments, but it does not seem to work. Any help on this would be greatly appreciated!
Questions like this where an alert() fixes a problem is always a matter of the sequence of events. One solution that almost always works is to put the offending code in a short timing function:
window.setTimeout(cancelFull,10);
function cancelFull() { document.webkitCancelFullScreen(); }
UPDATE
Put the setTimeout() in place of your current CancelFullScreen, inside the listener.
Try this:
window.setTimeout(document.webkitCancelFullScreen, 10);