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 have another question asked, a user answered it perfectly and his code is exactly what I need, tested and working on jsFiddle. But now as soon as I copy past it all outside jsFiddle it just doesnt work. My jQuery is very poor.
jsFiddle: http://jsfiddle.net/C9kF3/
The script is below and also in jsFiddle above:
jQuery("a[data-toggle]").on("click", function (e) {
e.preventDefault(); // prevent navigating
var target = $(this).data('toggle');
$('.people > div').hide();
$('.people ' + target).fadeIn();
});
I copy pasted it exactly as it is in that fiddle, didn't change a thing. No errors showing in console, the script just doesn't work. I linked to latest jquery library: code.jquery.com/jquery.min.js.
Put your code in separate .js file and wrapped in:
$( document ).ready(function() {
//your code here
});
After, link this file inside <head> tag
First, you need to have a document ready wrapper around your jQuery code. Second, that feels like a lot of unnecessary code for what you're trying to accomplish. Try this instead:
http://jsfiddle.net/C9kF3/1/
HTML
<ul id="navigation">
<li id="people">
People
</li>
<li>
Business
</li>
<li>
Highlife
</li>
</ul>
CSS
#people {
display:none;
}
jQuery
$(function() {
$('ul#navigation li a').click(function() {
var self = $(this).closest('li'),
navigation = self.closest('ul#navigation');
$('ul#navigation li').not(self).show();
self.hide();
navigation.hide().fadeIn();
});
});
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 4 years ago.
Improve this question
Trying to do something once HTML is loaded and document get ready. However, code doesn't seems to work.
HTML:
<div class="dataprocess"></div>
JS:
$(document).ready(function(){
if( $('div').hasClass('dataprocess') ) {
console.log('working');
}
});
Not able to get working on console. What am I doing wrong?
In your snippet, you're missing the closing brackets for the $(document).ready() function.
$(document).ready(function(){
if($('div').hasClass('dataprocess')){
console.log('working');
}
});
This is the only visible issue in your code.
Also some other things you may have forgotten:
Include the JavaScript file
Include the jQuery dependency
I think the best option is to use id to call the element:
<div id="data_id" class="dataprocess"></div>
and then JS
$(document).ready(function(){
if($( "#data_id" ).hasClass( "dataprocess" )){
console.log("working");
}
});
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 been watching a tutorial about how to make a to do list and so far my code is IDENTICAL to the one in the tutorial but still doesn't work-Ive been starring at the code for forever but can't figure out why..
my html (I don't have to include etc because I was writing my code on codepen(javascript,html and css are already being combined):
<body>
<h1>To Do List</h1>
<p><button id="add">Add</button></p>
<ul id="todoList"></ul>
</body>
Javascript:
function addNewItem(){
var listItem = document.createElement ("li");
listItem.innerText = "hello";
var list = ducument.getElementById("todoList");
list.appendChild(listItem);
}
var btnNew = document.getElementById("add");
btnNew.onclick = addNewItem;
In the tutorial the same code works and when you click the add button "hello" is being displayed and in my code nothing happens when i click on the add button..
You have a typo on this line:
var list = ducument.getElementById("todoList");
It's document, not ducument.
See this working fiddle: https://jsfiddle.net/omgtoblerone/h2sL1vu8/
In most browsers, if you hit F12, you'll see an error console. If you had looked at the console, you would've seen the following error:
Uncaught ReferenceError: ducument is not defined
Easy fix!
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
Here is a simple code
fiddle: http://jsfiddle.net/k5wfH/11/
which is not working for me for 2 days straight.
In my website, the 2nd, i.e. the
flag
image style display change works,
but the 1st, i.e. the
upvote
image style display change does not work.
However in Fiddle, both of the style display change functions are not working.
HTML:
<img id='upgrey' class='up' src='http://s24.postimg.org/8v77coekx/up_grey.png' width='26px' onclick='upvote();'>
<img id='upgold' class='up' src='http://s24.postimg.org/jtdvh4dsh/up_raised.png' width='26px' style='display:none'>
<img id='flaggrey' class='flag' src='http://s1.postimg.org/egcymr8cb/flag_grey.png' height='26px' onclick='flag();'>
<img id='flagred' class='flag' src='http://s1.postimg.org/a5yar6397/flag_raised.png' height='26px' style='display:none'>
JS
function upvote() {
document.getElementById("upgrey").setAttribute("style", "display:none");
document.getElementById("upgold").setAttribute("style", "display:block");
}
function flag() {
document.getElementById("flaggrey").setAttribute("style", "display:none");
document.getElementById("flagred").setAttribute("style", "display:block");
}
I thought this was the bread and butter functionality of JavaScript and no idea what else I can do at all to fix this.
Ah, when the simple things fail to work!
Edit:
Seems like another div's padded region was covering one of the images (almost completely ~95%) and i was unable to click the image and rather just clicking the other div's padded region. Everything is sorted out. Learned a thing or two here. Thank you everyone.
My friend your code is perfect and it is running.
see this example: http://jsfiddle.net/k5wfH/16/
See this discursion its an jsfiddle config seeting. when you use external file.
How to use function declaration with jsfiddle
I done this in your fiddle and now it is working.
And use this if you want it like an document.ready
(function() {
// your page initialization code here
// the DOM will be available here
})();
when simple things fail to work, try solving it with simple solutions. :) Try changing the code beginning at the setAttribute part; say change document.getElementById("upgrey").setAttribute("style", "display:none"); to document.getElementById("upgrey").style="display:none"; and so on.
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 have seen numerous other posts here at SO and across the web, but those deal with trying to add the event handler before the element is created. My situation is different.
I have an html document that has the following segment:
<nav id="main_menu">
<ul>
<li id="liMapFilter" class="list"><img id="imgFilter" src="images/filter_icon.png">Filter</li>
<li id="liDiagnostics" class="list"><img id="imgTools" src="images/tools_icon.png">Administration</li>
</ul>
</nav>
I set after page is loaded, a number of event handlers by calling:
$(document).ready(function() {
home.init();
});
within the home.init() function I set the following listener:
var elmMapFilter = document.getElementById('liMapFilter"');
cs_core.addEvent(elmMapFilter, 'click', home.showDialogMapFilter, false);
All the other listener handlers wire up just fine, but this particular one always throws a null reference. I cannot understand when this handler works just fine:
var elmDiagnostics = document.getElementById('liDiagnostics');
cs_core.addEvent(elmDiagnostics, 'click', core.showDiagnostics, false);
Please advise.
You've got a typographic error. There's a stray " character in your id.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 9 years ago.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Improve this question
I have a div which is like this:
<div id="mainDiv">
<script>
javascript here...
</script>
</div>
I basically want to get the ID of the div it is inside.
I have tried using jQuery and classic javascript to do this but it keeps returning undefined.
Does anyone have any idea's? Thanks
Since broswer read the code from up to down, you can do this:
Vanilla JS
var scriptTags = document.getElementsByTagName('script');
var id = scriptTags[scriptTags.length - 1].parentNode.id;
jQuery
var id = $('script').last().parent().prop('id');
when it will read this code, the last script tag is the one the browser is reading.
Here's a fiddle : http://jsfiddle.net/nb234/
Check this out http://jsfiddle.net/78N9A/1/
<div id="parent">
<script id="scr">
function show()
{
alert('hello');
}
</script>
</div>
window.onload = function(){
var ele = document.getElementById('scr').parentNode;
alert(ele.id);
}
<script id="script">
Then
$('#script').parent();
If I understand correctly, you are saying that the id on the parent div is unknown in advance, and you want to use JS to determine what it is.
If you can't edit the script tag to add an id, maybe you could do a document.write() within that block to add in a little hidden element, then you can test to see what that element's parent is.
http://jsfiddle.net/AtRYF/
JAVASCRIPT:
Give your script an ID and then use parentNode to move up the DOM.
var the_div_you_want = document.getElementById("skript").parentNode.id;
JQUERY:
Pretty sure .parent() is what you're after
$('#scriptId').parent().attr("id");
Regardless, you need to find some way to locate the script and the move up the dom to find that relationship. Hope this helps.
http://jsfiddle.net/Zbuf8/1/
jQuery(document).ready(function($) {
$('div').attr('id');
});
should get you the value you need.