Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 9 years ago.
Improve this question
Why is this simple onclick JavaScript function not called in JSFiddle ?
HTML:
<input type="button" value="Check" id="zeCheck" onclick="check();" />
JS:
function check() {
alert('ech');
}
DEMO
It doesn't work because you are defining this function in wrong place...
Put your script function in .js file or at the end of document in
<script></script> tags.
Check this fiddle
Take it out from the onload event and it will work. Put it in the body. (left panel)
onLoad in JS FIDDLE is the same as window.onload=function() in JavaScript .
No wrap - in is the same as
<head><script type="text/javascript"> //your
//code goes here</script</head>
So you just have to change it to NO wrap to body.
The function is being defined inside a load handler and thus is in a different scope. You can fix this by explicitly defining it on the window object. Better, yet, change it to apply the handler to the object unobtrusively: http://jsfiddle.net/pUeue/
$('input[type=button]').click( function() {
alert("test");
});
Note applying the handler this way, instead of inline, keeps your HTML clean. I'm using jQuery, but you could do it with with or without a framework or using a different framework, if you like.
Related
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 6 years ago.
Improve this question
I have a webpage that calls a javascript file (jQuery)
The file has the $(document).ready(function(){ wrapper.
I have a DIV tag setup on the page that is hidden
<div id="productOne" style="display: none;">Product Two</div>
Within my JS file, any attempt to show the DIV tag is not working
$('#productOne').show();
Is my code in the wrong event? Or is the syntax incorrect?
Try $('#productOne').show(); (note the lowercase 'p')
Hie,
Check this out if works for you
$( document ).ready(function() {
$('#productOne').css("display", "block");
});
Check the id of the div. In your HTML it is "productOne" and in your jQuery code it is $('#ProductOne').
The "p" of product should be small in jQuery code.
Instead of style = display: none , simply use hidden
<div id="productOne" hidden">Product Two</div>
I think there is some spelling mistake
Here is working script. Compare it with yours.
If everything is the same, try to console log something from your file, maybe there is a loading issue.
$(document).ready(function() {
$("#hidden-elem").show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p id="hidden-elem" style="display:none;">
Hello
</p>
To check if jQuery is loaded or not:
if (window.jQuery) {
alert("loaded");
} else {
alert("not loaded");
}
You may try that to test if your jquery is not called before the tag was completely loaded. I had similar issue when i was writing a plugin for sliding image gallery, but i was working with pictures. So try this:
$(document).ready(function () {
$("#productOne").load(function () {
$(this).show();
});
});
If this works, you have a problem in your syntax or you have other problem with something else like use of same names on the page. Give a whole code to find the bug. Thank you, hopefully this will help.
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 6 years ago.
Improve this question
I have some background in computer programming, but I am just getting into Javascript and jQuery. I have this code that will delete the element's grandparent but the function isn't running at all ("I am not seeing the "alert".) Can you help me find out what is wrong?
NOTE: There are multiple .trashbuttons and I just want the .trashbutton being clicked's grandparent getting deleted.
$("trashbutton").click(function() {
this.parent().parent().remove();
})
EDIT: The answers I have been given are not working. I should also note that the .trashbutton is a img. If that helps.
You have an error in your selector, you forgot the . to select css classes.
And wrap this to $().
try
$(".trashbutton").click(function() {
$(this).parent().parent().remove();
})
I suggests you to keep reading on jQuery and javascript, especially this documentation about jquery selector. Your script function properly, except that $("trashbutton") refer to a <trashbutton></trashbutton> tag, that doesnt exist in your code ( i guess ). If you wanted to target an element class with that use $(".trashbutton") or $("#trashbutton") to target an element with this ID :)
Use $(this)...this will represent DOM element but you need jQuery wrapped element.
Try this:
$(".trashbutton").click(function() {
$(this).parent().parent().remove();
})
Edit: As suggested in comments, make sure you have $("trashbutton") as valid selector..I assume you are dealing with classes hence it should be $(".trashbutton")
You should use #trashbutton if it is an id or .trashbutton if it is a class. Also wrap this as $(this).
$("#trashbutton").click(function() {
$(this).parent().parent().remove();
})
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 7 years ago.
Improve this question
JSFIDDLE
I am trying if a label has attribute for="description" on click should focus an other element.
I have tried following but its not working. Is this possible to get click event on an attribute. Or what other can be possibilities to achieve this? other than adding a class or id.
$('[for="description"]').on('Click', function() {
console.log('test');
alert('test');
});
Firstly, the event name is click - note the lowercase c. Secondly, console is not a property of a jQuery object - it's on the window object. Try this:
$('[for="description"]').on('click', function () {
console.log('test');
alert('test');
});
on click should focus an other element
You get this behaviour for free if you provide an input, textarea or select element with an id attribute which matches the for in the label.
Updated fiddle
You have typo in Click event keyword. It should lowercase. Look this code:
$('[for="description"]').on('click', function () {
alert('test');
});
Otherwise, you have not define an element with class name nicEdit-main.
Demo
You have a typo: is .on("click") no .on("Click"). Also $('.nicEdit-main').console.log('test'); console is not property of jquery object.
You need to prevent default behaviour of label click with for attribute set:
$(document).ready(function () {
$('[for="description"]').on('click', function (e) {
e.preventDefault();
$('.nicEdit-main').focus();
});
});
But then the question is, why in first place are you setting for attribute? Use instead any custom attribute, e.g: data-for
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 8 years ago.
Improve this question
I'm still new to HTML and JS, but I want to make a function that makes a button appear on the webpage... I've tried a couple of things like this:
HTML:
<span id="buttonAppear"></span>
JS:
function buttonFunction(){
document.getElementById("buttonAppear").innerHTML = "<button onclick="secondFunction()">Some text here</button>";
}
But of course, that didn't work. I'd love to hear a good way to make this happen.
Thanks in advance!
It should appear.
You have to slash your innerHtml or use single quotes so you do not mess when mixing them:
function buttonFunction(){
document.getElementById("buttonAppear").innerHTML = '<button onclick="secondFunction()">Some text here</button>';
}
The problem is your use of quotes, as Andrea has pointed it out in his reply. Your version would only work if you escaped the inner double quotes, like this:
function buttonFunction(){
document.getElementById("buttonAppear").innerHTML = "<button onclick=\"secondFunction()\">Some text here</button>";
}
You need to first escape what you're attaching to the DOM. You also presumably want to run this when the page is loaded or some other event has happened.
Using jQuerys .ready() will load whatever you have when the page is loaded fully. Then pass in your function:
$(document).ready(function(){
document.getElementById("buttonAppear").innerHTML = '<button
onclick=\'secondFunction()\'>Some text here</button>';
});
If the button is always going to be the same you can just show and hide it dynamically...
/*In your CSS*/
.hidden {
display: none;
}
.show {
display: inline;
}
<!-- In your HTML -->
<button id="button" class="hidden">test</button>
// In your js
function toggleButton() {
document.getElementById("button").className = 'show';
}
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 8 years ago.
Improve this question
I am trying to make the contactform originally hidden when the page is loaded, so contactform is to be hidden originally to do this in CSS i did:
#contactform{
display: none;
}
now in the HTML I have:
<div class="contactme" >Message me!</div>
and onclicking the message me it calls the function 'someFunc' the function hides the contactinfo but displays the contactform, the function is:
function someFunc() {
document.getElementById('contactinfo').style.display='none';
document.getElementsByID('contactform').style.display='block';
}
It hides the contactinfo perfectly as expected, however it doesn't show the contactform. I believe this could be because the CSS is overriding the function, is there any way to stop it from doing so and get it working as expected?
There is bad function name, correctly is small "d" and "Element" instead of "Elements"
document.getElementById('contactform').style.display='block';
^ ^
in your code document.getElementsByID is mention not document.getElementById USE THIS code:
function someFunc() {
document.getElementById('contactinfo').style.display='none';
document.getElementById('contactform').style.display='block';
}