I've got a site I'm making and it has this code in the HTML:
<div id="close" onclick="close()"></div>
There's also some JS which has this:
function close() {
document.getElementById("glass1").setAttribute("class", "hidden");
}
But when I click close it doesn't seem to work. You can see the site at http://galaxy-os.koding.com to see what I mean. Please help
Your element id is colliding with the function name close.
I would recommend changing the function name as it sounds way too generic anyway.
Related
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 want to hide a div when an option is selected:
jQuery(document).ready(function(){
if (jQuery('#Plaats').val() == "option_a") {
jQuery(".payment_method_cod").hide();
}
});
On this example, $payment_method_cod doesn't hide but if i change it to another div ID ( for example, #payment ) it works!
I hope someone can help me.
Thanks in advance!
There is a chance that other code might run which will result in not hiding the div you wanted. So what i would suggest is run this code the bottom of the site.
You can hook this code to the footer of the site using wp_footer hook
Comment or ask me if you have any doubts.
After Inspecting Questioner site.
Actually it is class not id. Please check it well. So the code should be follows
jQuery('.payment_method_cod').hide();
Whole code is
jQuery(document).ready(function(){
if (jQuery('#Plaats').val() == "option_a") {
jQuery('.payment_method_cod').hide();
}
});
I think the script loaded to quick because the payment part of woocommerce is also done with jQuery. After adding in the setTimeout() function it worked!
I am trying to do something very simple. If you go to http://cutecuttingboards.com/product/apple/, I simply want to hide the "From:" price after the user choose a size in the drop down menu. I am trying the code below, which is working fine in Fiddle but not on the live site:
jQuery('#size').on('change', function(){
jQuery('p.price').hide();
});
Here is the fiddle with unformatted code: http://jsfiddle.net/anneber/U2Mat/
Any help is much appreciated!
Anne
i know it's kind of late but.. in case someone else is having the same problem, this should do the trick:
jQuery(document).ready(function($) {
$(document).on("change", ".variations #size", function() {
$('p.price').hide();
});
});
If I copy/paste your code above into web inspector and then change the selection it works, so most likely, the code is either not in the page, not being run, or being run before the related elements have been loaded into the DOM.
There is an error in your cutecutb.js file the Unterminated comment. i.e you are not terminating the comment
There is no "*/" sign.
EDIT :
Now another reason in add-to-cart-variation.min.js there is already an onchange event of dropdown
You can see you "#size" element is inside ".variations" class
I am trying to understand the difference between JQuery and JavaScript.
And apologies if this is a silly question.
This is my attempt at JQuery. On pressing the button the text in <p> should change as requested. I cannot get this to work.
http://jsfiddle.net/QaHda/7/
this is my JavaScript attempt. I cannot get this to work either
http://jsfiddle.net/aLhb8/1/
Can someone please help me with
my jQuery above to get it working.
my jscript above to get it working.
I was trying to get to a point where I could write my JQuery in such a way that it could be written in javascript. Can anyone help me do this?
Thanks
EDIT
Thanks for all the answers/corrections: what I was looking for part 3 was this enter link description here which basically does part 1 using javaScript,I think. In future I should be careful,using left hand pane, to include Jquery library and to make sure jsript is wrapped in head/body
jQuery
You need to include jQuery library to your page by selecting a jQuery version in the first dropdown in the left panel
Demo: Fiddle
JS Sample
The problem is since your function is defined within the onload callback, it was not available in the global scope causing an error saying
Uncaught ReferenceError: myFunction is not defined
The solution is to add the script to the body elements, instead of inside the onload callback by selecting No Wrap - in <body> in the second dropdown in the left panel
function myFunction()
{
alert("Hello World!");
}
Demo: Fiddle
jQuery is library of javascript function and you need to add jquery file in html file that y jquery function was not working and for javacript function you need to change the setting in jfiddele left to no-wrap in head
http://jsfiddle.net/aLhb8/1/
http://jsfiddle.net/hushme/QaHda/10/
here is code
$("button").on("click", function () {
$("p").text("this text will now appear!!")
});
If you have internet connection, This should work
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
$(document).ready(function() {
$('button').click(function() {
alert("This is a simple alert message");
});
});
But if don't then just download the jquery framework and include into your page
Hope it helps and anyway jquery is a framework of javascript, so they are both or they are the same. Don't confuse yourself.
Here is a JavaScript version - http://jsfiddle.net/aLhb8/4/
JavaScript
var myButton = document.getElementById('myButton');
myButton.addEventListener('click', function(){
alert(myButton.textContent);
});
Check this link out if you want to start learning more about JavaScript - http://javascriptissexy.com/how-to-learn-javascript-properly/
For the pure JS code, on the top left panel, select 'No wrap - in body'. This will make your code run without a problem.
In the jQuery code, make sure you've selected the jQuery library, as opposed to pure JS. You hadn't selected this before, so your code was invalid.
I have a very simple JavaScript operation which is just not working. I'm using the twitter-bootstrap CSS, and am attempting to implement the close of the close message box. I have my code here:
http://jsfiddle.net/YQgpe/
HTML
<div class = "alert-message success" id = "message_1">
<a class = "close" href = "#">x</a>
</div>
JavaScript
function hideSomething(which_thing)
{
$(which_thing).hide();
}
$(".close").click(function()
{
hideSomething("#" + $(this).parent().attr("id"));
});
Essentially I want the same "close" class of link to hide the div when clicked - hence the request for the parent id. But even though jslint tells me my code is valid - it still doesn't work.
Any ideas on how to solve this would be greatly appreciated.
Try this, I just removed the js lint and it works.
http://jsfiddle.net/YQgpe/15/
It works if you remove jQueryLint (edge) as library: http://jsfiddle.net/YQgpe/10/
However, your code can be simplified to:
$(".close").click(function() {
$(this).parent().hide();
});
You already have a reference to the parent, there is not need to search for it again via its ID.