Constraint the effect of JQuery Code

No, we’re counting the number of <cheese>'s. So the answer should be 5. I gave you the x variable as a starting pointer.

1 Like

Ok so here we have to publish that number

<board type=“Cedar”></board>

He’s trying to help you to understand the thought process that’s used to get information from the HTML, about what you need. Here’s a list of what’s needed, in reverse order working from the end, towards the start.

  • To get an answer of 5, you need to get a count of the number of cheeses.
  • To get that, you need to get all of the cheese elements inside of the sample object.
  • To get that, you need to get the parent of the x variable.

You should work through those from the bottom to the top, in terms of code, to make further progress.

1 Like

This is what i comeup with:

var x = $('board[type="Cedar"]').parent().find( "cheese").length();
console.log(x);

But this has some bug because console log is throwing error despite I have added JQUERY from the CDN.

This says that length is not a function. I implemented that also. still error, but number 5 is printing now in console log.

image

Your codepen still has parenthesis on the length. Length is not a function, so remove the parenthesis from it. I saw that the error goes away after doing that.

1 Like

Done! I reverted that accidentally, previously.

Correct :slight_smile: Now, apply that process, to your own code. We want to find the number of <div>s inside the parent of the button, and compare that number to 10. If it’s less than 10, run the line to add a row. Keep in mind that the button that was chosen is already defined as $(this) inside your function, so you don’t need to go hunting for it.

2 Likes

Hi there @m_hutley and @Paul_Wilkins

This is how I did it:

var count = $('button[type="button"]').parent().find( "div").length;
				if(count !=10) {
					$('<div class="htmljs"><label for=""><h3>Subject 1</h3></label><input type="text" name="" value=""><input type="text" name="" value="">').insertBefore(this);
				}

But we are still not spot on. where am I going wrong? Intended functionalities are not yet attained.

I told you in the previous post, don’t go hunting for the button. It’s already in your function as $(this)

Hi there @m_hutley Then what should we hunt for because rest all are siblings:

The event trigger has done it for you already; you dont need to hunt for anything. $(this) points to the button that was clicked on, whichever button it is. Replace $('button[type="button"]') with $(this) and it should work.

1 Like

If this one:

var count = $(this).parent().find( "div").length;

Then already tried sir, but didn’t deliver the anticipated results.

quite possible if condition is not coded correctly or correctly placed.

define “didn’t deliver the anticipated results.”

What does it do that it shouldn’t, or what does it not do that it should?

All semester should have maximum 10 subjects, but it is counting total 10 for all semesters.

Can we please see the relevant HTML code, and the updated JavaScript code that you are currently using?

Yes,

I have put it here:

The x variable that you have there is now meaningless and useless., as the count serves that purpose instead.

Remove code that relates to the x variable and it should work. At least, it does when I did that.

1 Like

You havent removed the other if.

1 Like

My bad @m_hutley was asking me to focus on X I introduced a new variable count.

Yes, fixed. Its working now.

1 Like

If my understanding is right then previously we hard coded:

var x = 5;

You was expecting me to change this:

var x = $(this).parent().find( “div”).length;