on click result

[Jaswinder]

What i want to achieve is...

 On clicking the button, i want to check the answer and print the result correct or incorrect after the button inside the <li>..

 

Is it possible ??

 

What i have done still now is

  <div id="view2">
            	<ol>
                <li><strong>16 x 11  = </strong><input type="text" name="p1"><button>Check</button></li>
                <li><strong>20 x 11  = </strong><input type="text" name="p2"><button>Check</button></li>

                </ol>
            </div><!--view2 end-->

I dont know how to move further

[denno020]

What javascript have you written? Are you using jQuery or vanilla javascript?

[Jaswinder]

I didn't write any script yet..

 

I need one.. I dont know javascript

 

Will u help me ,

how to move on or how to achieve this ?

[denno020]

I am about to go to bed, got notified on your reply just before I was about to shut down my PC, so to help, I will provide you with what you should search Google for.

 

Ideally, I would suggest that you find some javascript tutorials on YouTube, users like Adam Khoury, mybringback, and JReam have fantastic tutorial series for beginners to follow. You're guaranteed to learn from their videos.

 

As for your specific question, you will want to know these things from Google:

"How to include jQuery" //Only if you choose to use the jQuery plugin, you could very well choose to use plain (vanilla) javascript

 

"How to attach click handler to element with jQuery" //If you included jQuery above

"How to attach click handler to element with vanilla js" //If you chose not to use jQuery

 

"jQuery read value from input field" //if jQuery

"javascript read value from input field" //if not

 

"javascript addition" //This will be the same whether you choose to include jQuery or not. It's pretty much the same as other programming languages though

 

"jQuery add element after another" //you will be looking for insertAfter()

"vanilla javascript add element after another"

 

If you can start with those searches, you should be able to figure out how to achieve your goal. If not, come back with the code that you try, and I, or someone else here, will be able to guide you further.

 

The absolute easiest thing to do would be to choose to add jQuery to your project, and use the functions it provides, however using plain javascript will help you to understand what a plugin like jQuery does for you in the background.

 

Hopefully that can get you started.

Denno

[Jaswinder]

Thanks for useful info.. i will give it a shot and come back

[Jaswinder]

i tried this and its working, but have one question

 <li>16 x 11  =<input type="text" name="p1" id="p1"><button id="check">Check</button><span id="display"></span>
                <script type="text/javascript">
               var p1 = $("#p1");
			   $("#check").click(function(){
				
					var getval = ($("#p1").val()?$("#p1").val():alert('please fill the text field'));
					if(getval != 171)
					{
				$('#display').html(getval+" <i class='fa fa-times'></i>");
					}
					else
					{
						$('#display').html(getval+" <i class='fa fa-check'></i>");
					}
					
				});
                </script></li>

I have 10 list items with different id's like p1,p2,p3,..... so on ..

so i have to write the code 10times ? or there is any other way ??

 

and also can this this code be more simplified ? or how to write it in venilla javascript ?

 

any help ?

[denno020]

Good work. So from the looks of it you chose to use jQuery, at least that makes it nice and easy.

 

As for your question about having to do it 10 times, no you don't.

 

Instead of giving the button an ID of check, give it the class check, and then you can use that as the handler for the click

 

Here is an example:

<button class="check">Check</button>
<script>
  $(".check").click(function() {
    var $button = $(this); //This is the button that was clicked on
    var $parentLi = $button.closest("li"); //Find the closest li parent, starting from the button, working up the DOM
    var value = $parentLi.find("input").val(); //From the li, work back down the DOM until an input field is found, and get the value of it
  });
</script>

That's how you get the value out of the input field, then to display it, change the span ID of display to a class:

<span class="display"></span>
//using the variables from the previous code block, and therefore still inside the function for the click()
  var $displayField = $parentLi.find(".display"); //Starting from the parent li again, search down the DOM until an element with a class display is found
  $displayField.html(value+"<i class='fa fa-check'></i>"); //Set the value of the element that has the display class

Obviously you'll use your if statements to display the check or cross appropriately.

 

Don't get too worried about the way I've named my variables either. It's a notation that I've picked up through work. Having the $ at the start means it's a jQuery object, not a static value, but it doesn't matter how you name your variables.

 

So provided each of your questions, answer fields and buttons are together in their own li, the code should work for however many you choose to have on the page.

 

Let me know if you have any more questions.

Denno

[Jaswinder]

Thanks for such great code.. its working for all ten now.. Just a conditional part left. i am using it like this now

<li><strong>16 x 11  = </strong><input type="text" name="p1" id="p1"><button class="check">Check</button><span class="display"></span></li>
<li><strong>62 x 11  = </strong><input type="text" name="p2" id="p2"><button class="check">Check</button><span class="display"></span></li>
<li><strong>43 x 11  = </strong><input type="text" name="p3" id="p3"><button class="check">Check</button><span class="display"></span></li>


$(".check").click(function() {
    var button = $(this); //This is the button that was clicked on
    var parentLi = button.closest("li"); //Find the closest li parent, starting from the button, working up the DOM
    var value = parentLi.find("input").val(); //From the li, work back down the DOM until an input field is found, and get the value of it
	var displayField = parentLi.find(".display"); //Starting from the parent li again, search down the DOM until an element with a class display is found
	if(value == 176)
	{
  		displayField.html(value+"<i class='fa fa-check'></i>"); //Set the value of the element that has the display class
	}
	else
	{
		displayField.html(value+"<i class='fa fa-times'></i>");
	}
  });
</script>

Now how to check for other two also like 682 ( 62 x 11 ) and 473 ( 43 x 11) ?

 

As the above code is checking for 176 for all the fields, and user will use all the fields and check it individually

 

I put id's in input field , Are they useful anyhow ? or i just remove them ?

[denno020]

Ok so to get the values for the multiplcation, you'll probably have to surround them in a <span>, give them a class (different classes), and then find them using the $parentLi that I showed you before.

Here is how I think you should contain them:

<strong><span class="num1">16</span> x <span class="num2">11</span> = </strong>

Then update your jQuery to find those two numbers, perform the calculation, and store it in a variable called answer. You then compare this variable in place of the 176

 

As for the ID's, you probably don't required them in this instance.

 

As before, any further questions, just let me know.

Denno

Edited April 15, 2014 by denno020

[Jaswinder]

But num1 and num2 don't have input fields, so how variables get value ?

 

I did this  -

                  <script>
  $(".check").click(function() {
    var button = $(this); //This is the button that was clicked on
    var parentLi = button.closest("li"); //Find the closest li parent, starting from the button, working up the DOM
    var value = parentLi.find("input").val(); //From the li, work back down the DOM until an input field is found, and get the value of it
    var num1 = parentLi.find(".num1").val();
    var num2 = parentLi.find(".num2").val();
    var result = num1*num2;
    var displayField = parentLi.find(".display"); //Starting from the parent li again, search down the DOM until an element with a class display is found
    if(value == result)
    {
          displayField.html(value+"<i class='fa fa-check'></i>"); //Set the value of the element that has the display class
    }
    else
    {
        displayField.html(value+"<i class='fa fa-times'></i>");
    }
  });
</script>
 

Is it the right way to do calculations ?

 

i am not getting the multiplication value in result variable, may be num1 and num2 variables are empty

[denno020]

To get the value of any element that isn't an input, use .text().

 

You may also need to run parseInt() on the value before you can do a multiplication..

 

var num1 = parentLi.find(".num1").text();
var num1Int = parseInt(num1);
var num2 = parentLi.find(".num2").text();
var num2Int = parseInt(num2);
var answer = num1Int * num2Int;

 

Try without the parseInt first, see if it'll work. I'm not sure off the top of my head. I'll usually just try it one way, if it doesn't work, then run with parseInt.

This means you will also have to run parseInt() on the values that you pull out of the input field, before you compare their answer with the calculated one.

[Jaswinder]

Finally Its working

 here is the script

<li><strong><span class="num1">16</span> x <span class="num2">11</span>  = </strong><input type="text" ><button class="check">Check</button><span class="display"></span></li>
<li><strong><span class="num1">62</span> x <span class="num2">11</span>  = </strong><input type="text" name="p2"><button class="check">Check</button><span class="display"></span></li>

                   <script>
  $(".check").click(function() {
    var button = $(this); //This is the button that was clicked on
    var parentLi = button.closest("li"); //Find the closest li parent, starting from the button, working up the DOM
    var value = parentLi.find("input").val(); //From the li, work back down the DOM until an input field is found, and get the value of it
	var num1 = parentLi.find(".num1").text();
	var num1Int = parseInt(num1);
	var num2 = parentLi.find(".num2").text();
	var num2Int = parseInt(num2);
	var answer = num1Int * num2Int;
	var displayField = parentLi.find(".display"); //Starting from the parent li again, search down the DOM until an element with a class display is found
	if(value == answer)
	{
  		displayField.html(value+"<i class='fa fa-check'></i>"); //Set the value of the element that has the display class
	}
	else
	{
		displayField.html(value+"<i class='fa fa-times'></i>");
	}
  });
</script>
 

[Jaswinder]

Thanks denno020 for such quick and lovely support..

Keep on helping people.. Stay Blessed

[denno020]

Thanks denno020 for such quick and lovely support..

Keep on helping people.. Stay Blessed

 

No worries, glad you worked it out

Denno