How to select element inside button using jQuery - javascript

What I'm trying to do is, to change i's class (which located inside button) on click
<button><i class="fa fa-square-o"></i></button>
Using js code like below (inside on click function):
...
$(this).child("i.fa").removeClass("fa-square-o");
...
getting child is not a function error
What am I doing wrong?

Yes, really there is no child() method in jQuery.
You may use find() or children() for that.
$(this).children("i.fa").removeClass("fa-square-o");

You could use find() instead.
$('button').click(function() {
$(this).find("i.fa").removeClass("fa-square-o");
});
Fiddle

child is not a function.
try this function:
$(this).children("i.fa").removeClass("fa-square-o");

jQuery accepts a second argument as context:
$('button').click(function() {
$('i.fa', this).removeClass('fa-square-o');
});

You are looking for jQuery .children() function. If you are trying to call that function from onclick attribute, you have to remember to pass reference to object by using "this" word.
<button onclick="removeClass(this)"><i class="fa fa-square-o">test</i></button>
removeClass = function(obj){
$(obj).children("i.fa").removeClass("fa-square-o");
}
Working fiddle:
http://jsfiddle.net/4wvgvzL9/

Related

Hide DIV element with onclick command

Thanks to anyone who helps me solve this issue.
So the issue is I'm trying to hide an element (by class) with an onclick event using a button. But I am unable to do so.
Here's the code on jsfiddle http://jsfiddle.net/1tpdgrnj/
Here's the code for those who wish to help me here:
HTML:
<div class="box">Hide on button click!!
<button onclick="close();">Close</button>
Javascript:
function close() {
document.getElementsByClassName("box").style.display = 'none';}
UPDATE
Refer to the answer below and to the jsfiddle to see how it's different.
See this fiddle
Change your javascript as follows
function myFunction() {
document.getElementsByClassName("box")[0].style.display = 'none';
}
First change that should be done is, rename your function name, as close is a keyword in Javascript.
Second one is that, document.getElementsByClassName() returns an array and thus to get the first element you should use the index position 0.
According to the docs
The Element.getElementsByClassName() method returns a live
HTMLCollection containing all child elements which have all of the
given class names. When called on the document object, the complete
document is searched, including the root node.
Read more about it here
You can use Jquery
<div class="box">Hide on button click!!
<button class="close">Close</button>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".close").click(function(){
$(this).parent().hide(); return false;
});
});
</script>
Check this fiddle
You can also do this easily with jQuery.
$("#hide").click(function(){
$(".box").fadeOut(150);
});

Add class to div when clicked

I am trying to get a class to be added to a div element when clicked. I can not get it to work, I have it set up similar to this:
javascript:
function choose() {
this.addClass("selected");
}
html:
<div class="initialclass" onclick="choose()">CLICK</div>
I have other javascript commands in that function that are working properly I just can't get the class to add.
You have two issues with your current code. First is that this in your JS function refers to the window, not the element that was clicked. Second if it did refer to that element, it would be a DOMElement, not a jQuery object, so it would not have the addClass() method - you need to convert it to a jQuery object. Try this:
<div class="initialclass" onclick="choose(this)">CLICK</div>
function choose(el) {
$(el).addClass("selected");
}
Note however, that it is better practice to hook up your events using JavaScript. As you are using jQuery, you can do this:
<div class="initialclass">CLICK</div>
$(function() {
$('.initialclass').click(function() {
$(this).addClass("selected");
});
});
change your html like this:-
<div class="initialclass" onclick="choose(this)">CLICK</div>
and function:-
function choose(dv) {
$(dv).addClass("selected");
}
Use classList:
classList returns a token list of the class attribute of the element.
el.classList.add("selected");
classList.add:
Adds a class to an element's list of classes. If class already exists in the element's list of classes, it will not add the class again.
CODE
HTML:
<div class="initialclass" onclick="choose(this)">CLICK</div>
Javascript:
function choose(el) {
el.classList.add("selected");
}
DEMO
If you use jquery add this is code in your $(document).ready()
$(".initialclass").click(function(){
$(this).addClass("selected");
});

Put an id to a parent element

I wanted to put an id in my element's parent element. Below is my code:
<div>
<div id="child"></div>
<div>
Im aware that jquery has a way to select a parent element , but I dont know how what method shall I use to put an id to it. Below is my jquery code:
div_resizable = $( "#child" ).parent();
div_resizable.id = "div_resizable";
Above code doesnt work with me. It doesnt throw an error, but no changes had taken effect. Any solution to my problem?
For achieve what you want, you can use the jquery attr:
$("#child" ).parent().attr('id', 'newID');
Or you can use the prop:
$("#child" ).parent().prop('id', 'newID');
And you can check the difference between the two here: difference between prop() and attr()
Of course div_resizable.id = "div_resizable" doesn't work. div_resizeable is an jQuery array and you are trying to assign id to it.
Try .attr instead:
$("#child").parent().attr({id: "div_resizable"});
To set a property on the first element inside a jQuery result object:
div_resizable = $( "#child" ).parent()[0];
// ^^^
div_resizable.id = "div_resizable";
This picks the first Element from the result so that you can directly access the property.
Or:
$('#child').parent().prop('id', 'div_resizable');
Use the .prop() helper method to accomplish the same thing.

Passing element ID to function

I have this function:
function op_up(){
this.style.color=#FF0000;
}
And I have this HTML element:
<span id="trigger" onClick="op_up(#element_1)">Click to change #element_1<span>
<span id="trigger" onClick="op_up(#element_2)">Click to change #element_2<span>
I would like the function to affect the id of the element in the onClick event.
Any help would be much appreciated. Thanks :)
Your function call is not valid, but you can pass a string to the function:
op_up('#element_1')
Then you can use document.querySelector to get a reference to the element:
function op_up(selector){
document.querySelector(selector).style.color='#FF0000';
}
Or as I already said in the comments, if you pass the ID as
op_up('element_1')
use document.getElementById:
function op_up(id){
document.getElementById(id).style.color='#FF0000';
}

getting the value of span inside div's

I am trying to iterate through all the span elements that is the children of a div:
$('#recommendTextArea').children('span').each(function () {
console.log(this.html());
});
However I always get this error:
Uncaught TypeError: Object #<HTMLSpanElement> has no method 'html'
I tried changing it to text(), but it also doesn't work
Try with this :
console.log($(this).html());
You were trying to call .html() on DOM element, not a jQuery object.
$('#recommendTextArea').children('span').each(function () {
console.log($(this).text());
});
1) Try $(this).html() or $(this).text()
2) you could use alternatively $('#recommendTextArea').find("span") to get the spans
.html() is a jQuery function and must be called on a jQuery object. You can create a jQuery object from this by passing it to the jQuery object, like $(this)
In your code this is a <span> which does not have any native method called .html(), hence the JavaScript error.

Categories

Resources