CODEWITHSUNDEEP
jqueryhtmlcss
rajshekar
rajshekar

Reputation: 3

comparing one element text with hidden element text using jQuery

I want to compare selected button text with answer text on click. Assume these div elements are generated dynamically.

Consider the following example of HTML snippet

<div class="list-group" id="id1">
  <button >text1</button>
  <button >text2</button>
  <button >text3</button>
  <button >text4</button>
  <button style="display:none;"> answer </button>
  <p> Display the result </p>
</div>
<div class="list-group" id="id2">
  <button >text1</button>
  <button >text2</button>
  <button >text3</button>
  <button >text4</button>
  <button style="display:none;"> answer </button>
  <p> Display the result </p>
</div>
I tried this jQuery

$("div[id^='id'] button").on('click',function(){
	
var x=$(this).parent(".list-group").find("button:last").text();
var y=$(this).text();
if(x.trim()==y.trim()){
	#dosomething
}
	else{
		#dosomething
	}


});

Can anybody help in this regard is much appreciated

Upvotes: 0

Views: 257

Answers (5)

Ankit Mori
Ankit Mori

Reputation: 775

I have done little bit modification. i have added HTML attribute in hidden button control with name demo to identify its value.

Here is my html markup.

<div class="list-group" id="id1">
  <button >text1</button>
  <button >text2</button>
  <button >text3</button>
  <button >text4</button>
  <button demo style="display:none;">text1</button>
  <p> Display the result </p>
</div>
<div class="list-group" id="id2">
  <button >text1</button>
  <button >text2</button>
  <button >text3</button>
  <button >text4</button>
  <button demo style="display:none;">text3</button>
  <p> Display the result </p>
</div>
<div class="list-group" id="id3">
  <button >text1</button>
  <button >text2</button>
  <button >text3</button>
  <button >text4</button>
  <button demo style="display:none;">text2</button>
  <p> Display the result </p>
</div>
<div class="list-group" id="id4">
  <button >text1</button>
  <button >text2</button>
  <button >text3</button>
  <button >text4</button>
  <button demo style="display:none;">text2</button>
  <p> Display the result </p>
</div>

Here is script.

$(document).on("click","button",function(){
      var id = $(this).parent('div')[0].id;
      var answer = $( "#"+ id + " button[demo] ").text(); 
      var question = $(this).text();
      if(question.trim()==answer.trim()){
        alert('match')
     }
      else{
         alert('not match')
    }       
});

Please refer link for Demo purpose : Click here for fiddle Link

I think it will be helpful for you.

Upvotes: 1

json
json

Reputation: 51

My answer would require a slight modification to your markup. Since you're really wanting the text value for the answer, I've made the 'answer' a hidden text input field (which also could help avoid bugs in your markup) instead and added an .answer class name. Here I can access it's value property and compare that against the answer provided from the clicked button. I have also added a .result class to your p tag.

So your markup for one question block might look like this: 

<div class="list-group" id="id1">
   <button value="apple" >apple</button>
   <button value="orange" >orange</button>
   <button value="mandarin" >mandarin</button>
   <button value="cake">cake</button>
   <input class="answer" style="display:none;" value="cake" /> 
   <p class="result"> Result: </p>
</div>

Whether the answer is correct or incorrect, the p tag below will be updated with the result. 

$('button').on('click', function(e){
     // the clicked buttons text
   let input = $(this).text();
     // the answer to this quiz block
   let answer = $(this).siblings(".answer")[0].value;
     // the result of the users attempt
   let result = input == answer;
     // if true, display 'correct!'
   result ? result = 'correct!'
     // else display 'incorrect!' 
          : result = 'incorrect!';
     // show the result to the user 
     // by selecting the .results sibling
   let display = $(this).siblings('.result')[0];
     // and updating it's innerText value. 
   display.innerText = `Result: ${result}`
});

A working codepen is here

Good luck, I hope this helps!

Upvotes: 0

Ujwal Khairnar
Ujwal Khairnar

Reputation: 548

You can do it as follows:

$(document).ready(function(){

$('#id1 > button').click(function(){

$('#id1  > p').text($.trim($(this).text())==$.trim($('#id1hiddedbtn').text()))

});

$('#id2 > button').click(function(){

$('#id2  > p').text($.trim($(this).text())==$.trim($('#id2hiddedbtn').text()))

});

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="list-group" id="id1">
<button >text1</button>
 <button >text2</button>
 <button >text3</button>
 <button >answer</button>
 <button id="id1hiddedbtn" style="display:none;"> answer </button>
<p> Display the result </p>
 </div>
 <div class="list-group" id="id2">
<button >answer</button>
 <button >text2</button>
 <button >text3</button>
 <button >text4</button>
 <button id="id2hiddedbtn" style="display:none;"> answer </button>
<p> Display the result </p>
 </div>

Upvotes: 0

SRK
SRK

Reputation: 3496

$(document).on("click","button",function(){
      let answer = $(this).parents(".list-group").find("button:last").text();
      let value = $(this).text();
      if(value.trim() == answer.trim()){
       alert("matched");
      }else{
       alert("not matched");
      }
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list-group" id="id1">
       <button >text1</button>
       <button >text2</button>
       <button >text3</button>
       <button >text4</button>
       <button style="display:none;">text1</button>
       <p> Display the result </p>
     </div>
     <div class="list-group" id="id2">
       <button >text1</button>
       <button >text2</button>
       <button >text3</button>
       <button >text4</button>
       <button style="display:none;">text3</button>
      <p> Display the result </p>
     </div>

You can use this script.

Upvotes: 0

Schorsch
Schorsch

Reputation: 319

To group, you could give those buttons id's too. Like button one of group one gets id1_btn1. In your jquery code you check the part of the senders id in front if the underscore. That is the id of your group. Give your answer a fitting id and your problem should be solved. But why don't you just give the button with the right answer an extra class? If a button is pressed, you just check if it has this special class, and if so, the answer was right. So you don't need your hidden fields.

Upvotes: 0

Related Questions