What is causing my jQuery functions not run? [closed] - javascript

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
I can't figure out why the jQuery functions will not work with the html here
JS Fiddle: http://jsfiddle.net/JonaTheApprentice/E89rg/
function addItem() {
$('#list').append('<li><input type="checkbox" /> item</li>');
}
function removeItem() {
$('#list').children().filter(function () {
return this.firstChild.checked;
}).remove();
}

I don't see an element with id="list", that's what #list refers to.
I think you mean #items-listed. Changing that, and it works

I would get the value from the input id. I would also assign a click event for cleaner coding. Here is an example of your fiddle adding an item. Removing an item is just the reversal.
DEMO http://jsfiddle.net/E89rg/5/
$('#Enter').click(function(){
var Val = $('#item').val();
$('#items-listed').append('<li><input type="checkbox" />'+Val+'</li>');
});

Related

jQuery: how to add eventListener to whole document/Webpage [closed]

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 2 years ago.
Improve this question
How do I add an eventListener to whole document with jQuery?
$("document").click(function (){
$("h1").css('color', 'red');
})
I want the h1 to change color if clicked anywhere in the document/webpage. Thanks!
Just remove the double quotations in the $("document") line
$(document).click(function (){
$("h1").css('color', 'red');
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Hello</h1>
just using "body" in quotation marks as following also works.
$("body").click(function (){
$("h1").css('color', 'red');
})

JavaScript Expanding Divs not working Correctly for me [closed]

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 2 years ago.
Improve this question
https://jsfiddle.net/alachgar/upezxLas/3/
Hello All,
My Javascript that was working fine earlier now is Broken.. it worked for me just yesterday.. now it is the HOUSING Section Part works fine...
However Starting the Second Section in Light Blue it's Broken... I am not sure what I am missing..!
Please help. Thanks a alot.
Ed-
<script>
function showRent (rent_box)
{
var rent_chboxs =
document.querySelectorAll('[name="rent_eval1"],
[name="rent_eval2"],
[name="rent_eval3"],[name="rent_eval4"],[name="rent_eval5"],
[name="own_concerns"],
[name="address_different"]');
var vis = "none";
for(var i=0;i<rent_chboxs.length;i++) {
if(rent_chboxs[i].checked){
vis = "block";
break;
}
}
document.getElementById(rent_box).style.display = vis;
}
</script>
You just need to change the onclick Event name from showOwn to showRent in from line 78 to line 90 in your HTMl file
'showOwn' is not defined.
Or change it to showRent may work.

How to invoke jQuery function on document ready? [closed]

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");
}
});

Can't remove a list item? [closed]

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 am trying to remove a list item.
I add an item in like so:
$('#btnAdd').click(function(){
var text = $('#item').val();
if(text.length){
$('<li />',{html: text}).appendTo('ul.justList')
}
});
then remove it like so:
$('#btnRemove').click(function(){
$("#justList li:last-child").remove();
});
Why does the last list item not remove? Any suggestions? Thanks so much!
I think the problem may be in your punctuation. Note the difference in punctuation between "justList" in .appendTo('ul.justList') and in $("#justList li:last-child").
ul.justList says, "Look for a <ul> with the class of 'justList'," or <ul class="justList">.
#justList says, "Look for any element with the ID of 'justList'," or <any-element id="justList">.
Classes and IDs are different, so make sure you're using the correct punctuation: . for a class, and # for an ID.
Based on your add statement I would guess that you need a remove statement like:
$('#btnRemove').click(function(){
$("ul.justList li:last-child").remove();
});
If your add statement is working then this should be accessing the same ul
Please use . instead of # while remove as well
$('#btnRemove').click(function(){
$(".justList li:last-child").remove();
});

document.getElementById returns null when others work fine [closed]

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.

Categories

Resources