Targeting an inputs value inside an HTML collection - javascript

I am making a card flipping game and I'm stuck on a particular function. During gameplay, cards disappear (by changing class name)
function reShuffle() {
var cds = document.getElementsByClassName('nocard');
for (var t = 0; t < cds.length; t++) {
console.log(cds[t]);
///i need to target an input within a div, inside another div, inside cds[t];
///make sense?
}
}
The function above is sending a collection of HTML to my console. The console looks like this: (the html collection are the items that the user got points for, so the console return can vary based on user actions)
Now, i want to target all inputs inside of divs that have class 'nocard', but not the other inputs of the same name. When I tried to make a loop to call the class 'fntCls' the console returned all of the inputs and not just the ones inside of the divs with class 'nocard'.
I hope i explained this right. I need to target the values of class 'fntCls' that are in the cards that have the class 'nocard', but not the ones that are in class 'cards'.
I went to make a fiddle, but it doesn't work properly with the way i use localStorage. So i can post a git if necessary. Also, i should mention that i am not using Jquery or any other libraries. I would like "vanilla" JavaScript assistance.
I'm sorry if this is long, or not precise to describe what i need. I really struggled to find the right words to explain what is going on here, it's my first time trying to do this particular action. Thanks in advance.

Using document.querySelectorAll you can target the inputs like so:
document.querySelectorAll('.nocard input.fntCls')
The .nocard targets the elements with the class nocard and input.fntCls will target the inputs inside those elements with the fntCls class.

Related

Assigning JQuery On Click Function in For Loop

I have a function that dynamically creates div elements based upon whatever input is given, and lets them choose certain items by clicking on each div. I have it so that if the div is clicked, a function (named checkToggle) is called that makes it looks like it is selected and adjusts some related variables. There is a checkbox in the div element that is toggled by this function (hence its name). Long story short, I had to jump through some hoops to get it to work, most of which I don't even remember. Please don't ask me about that.
The point of this question is this. I initially used the following JavaScript code to run the function when the checkbox was clicked. It was assigned by the main function, which created these div elements using a for loop.
document.getElementById(`${itemID}-checkbox`).onclick = function() {
checkToggle(`${itemID}-checkbox`);
};
This works, but I wanted to try to convert all of my onClick functions to JQuery. Here is the JQuery alternative I created.
$(`${itemID}-checkbox`).on(`click`, function() {
checkToggle(`${itemID}-checkbox`);
});
While the code itself seems to be fine, it does not work. It seems as if JQuery functions cannot be created like this in a for loop or something. It is applied after the element is created and put in its place, so I don't think it has anything to do with the element not being ready. I am also having the same issue with 2 other similar cases. Any idea as of why this isn't working?
Let me know if more information is needed and if so, what kind of information is needed.
You need to update the selector to Target HTML id using the # character. Simply prepend the character to the query:
$(`#${itemID}-checkbox`).on(`click`, function() { checkToggle(`${itemID}-checkbox`); });
It would also apply to DOM methods querySelector or querySelectorAll as well.
Hopefully that helps!

How to count classnames of dynamically added elements

Is there something I should keep in mind when trying to count ClassNames of dynamically added elements?
For the following description, refer to the link. Upon clicking the "(+)Course" button on any Semester (which are dynamically added), a Course will be appended to the corresponding Semester, with buttons of its own. This works. However, like I have for the Semesters, I have a limit of how many of each element there can be (i.e., 5 Semesters in total, 7 Courses per Semester), but I can't seem to be able to count my Courses.
Each Semester has a unique ClassName for its Courses, which is a concatenation of the Semester's Id and the word "Course", resulting in something like "sem#4Course". This code snippet is how I assemble and count the ClassNames for each Course. Is there something wrong with it? I've attached the rest of my code in the link.
var parentId = $(this).parent().attr('id');
var crsClass = parentId+"Course";
var crsCount = $('.'+crsClass).length;
https://jsfiddle.net/4efzf681/2/
I only started learning JavaScript/JQuery last week, so please bear with me. And I apologize for not separating my code between HTML, CSS and JavaScript. I work in a single file and separate it upon completion, and I've also never used fiddle before. I appreciate any help.
The # character in your class name values sem#1 and sem#1Course are creating a problem for the $() query selector which sees a class .sem and an id #1 or #1Course. It is better not to use the # and . characters in your class names and IDs. Instead use hyphens and underscore characters.
The improved fiddle is here: https://jsfiddle.net/6pdfjbt1/
You are confusing jQuery's selector engine by adding the parents id attribute to your course class name. The classes will inculde #, guess jquery thinks you want to select an element by it's id.
Changed that by doing
var crsClass = parentId.replace("#", "")+"Course";
I fixed your fiddle. Make sure to put your js in the bottom window next time ;).
I also moved the crsCount variable to the bottom to assign the value after the courses have been appended to the DOM.
YOUR FIDDLE
You can get the elements by class name using javascript method getElementsByClassName
var crsCount = document.getElementsByClassName(crsClass).length;

jQuery Select One Element From Class name

I am in a position where I need to use the .slideToggle() function in jQuery, on a regular JavaScript determined element.
I can use this code:
var feedback = document.getElementsByClassName('feedback');
and then a bit later on in a function:
feedback[index].style.display = 'block';
However, what I want to do is use the slideToggle('fast') function on feedback[index], so instead of so brutally changing its display to block, I get a nice jQuery-esque transition.
Obviously this code won't work:
feedback[index].slideToggle('fast');
However this will:
$('.feedback').slideToggle('fast');
but I can't choose which feedback by index to run the slideToggle() function on, it just does them all, which makes sense.
If I could get some code that effectively does this:
$('.feedback')[index].slideToggle('fast');
That would be perfect. I like the fact that I can stick a class on something and iterate through the list of items that appear in .getElementsByClassName('classname'), so I don't have to stick an ID on everything of the same class, and it would be nice if I could choose which $('.feedback') element I am using in the list of all elements returned by this but I cannot figure out how that would work. If I can somehow choose by index which items in a list by class, to run jQuery commands on it would make this a lot simpler as I do not want to stick an ID on each and every item that has the class of feedback.
Thanks a lot.
Try this : You can use eq() to select element with specific index.
$('.feedback:eq('+index+')').slideToggle('fast');
You can use JQuery like this:
$(feedback[index]).slideToggle('fast');
Here you can see demo

javascript find node without id

Due to a limitation of the Javascript library I'm using, I can't assign an id to a <div>. Unfortunately, I don't know how to attach a Tooltip object from Tipped, a Javascript tooltip library, to the element without an id. I don't know if this is possible, but I'm trying to find the object via other means which will hopefully allow me to modify the id.
The element I'm looking for is a button on a toolbar, but it's not an HTML button. It's a <div> that has CSS styles and Javascript events assigned to make it look and feel like a button. I know the class name of the parent and I know the id of the grandparent <div>, but that's as much as I know. Part of the issue is that there doesn't seem to be a good reference for how to iteratively operate on HTML objects once you get a reference to them. I've seen plenty of examples like this:
var x = document.getElementsById("asdf")
but no follow-up code showing how to actually do anything. What's in x? What methods does it have? I know of innerHTML and innerTEXT, but I can't figure out if they apply to x, a child of x, or ???. The Chrome console has helped a little bit, but I'm basically lost.
This is the relevant code for my button:
As you can see, there is no id on the Export button, but the parent has a class name and the grandparent has an id. The other snag is that the grandparent's id isn't static. It always starts with "dhxtoolbar" and there is only one toolbar on the page, but I haven't been able to make a regex search find the toolbar.
Ultimately, I'd like to be able to attach a Tipped tooltip to the Export button. I think Tipped requires an id, but maybe it doesn't. Regardless, I'd like to understand more about how to iterate through the DOM and, as a bonus, figure out how or if I can change the id of an element on a live page. Thanks.
Tipped actually accepts any CSS selector as an argument. If the class is unique, you could target it that way:
Tipped.create('.dhx_toolbar_btn', 'some tooltip text');
Or if the class isn't unique, you could try target it via the tree structure. Made up example:
Tipped.create('.header .sidebar .dhx_toolbar_btn', 'some tooltip text');
I noticed in your html that the buttons have empty title attributes (or maybe your inspector just added them). If you can set the title attribute for the buttons Tipped will pick it up automatically. Example:
<div class="dhx_toolbar_btn" title="test title">
You would then only have to use:
Tipped.create('.dhx_toolbar_btn');
And Tipped will automatically pick up the title and use it.
This is what I was trying to have explained:
var Obj = document.getElementsByClassName("classname");
var ObjChildren = Obj[0].getElementsByTagName("tag")
var searchText = "string";
for (var i = 0; i < ObjChildren.length; i < i++) {
if (ObjChildren[i].innerHTML == searchText) {
console.log(ObjChildren[i].innerHTML);
}
}

How to count the number of listitems in an asp.bulletedlist with JavaScript

I have an asp:bulletedlist control, which sits inside a div tag, and I need to count the number of list items inside the control. Searching the internet, and noting the fact the html given back by the items is a list i.e. <li>, I thought I could use an example of:
var listcontrol = document.getElementById('BulletedList1');
var countItems = listcontrol.getElementByTagName('li').length;
However, when I do this, it throws and error saying that no object exists for this control.
So, my problem is, and because I must do this clientside because I want to use this to set the height of the div tag, is how do you count the number of items inside a asp:bulletedlist control with javascript?
You can't use document.getElementById like you are using it because the actual ID for an Asp.Net control when rendered is different than what you set for the ID on the control. View the source of your page and you will see what the actual ID is. You can then use that if you want and this code should work, but it would break if you ever moved the bulletedlist control, since the hierarchy would change.
Another way to do this would be to use jQuery. In your example, you could do this:
$('[id$=BulletedList1]').children('li').size()
This would select the element that ends with 'BulletedList1', gets the li children, and then returns the size of the collection.

Categories