Verification of identifier for setting value

Question

I am making a threat panel, and I gave each div (each square of the question) id in index.html, so when it clicked, the correct question appears. I also wanted to set the point value for each div based on its id, so I used jquery.is and this if / else statement. I just made a code for A1 and A2, but while A2 costs $ 200, it returns $ 100. Why?

if ($('.well').is('#A1', '#B1', '#C1', '#D1', '#E1')) { questionValue = 100; } else if ($('.well').is('#A2', '#B2', '#C2', '#D2', '#E2')) { questionValue = 200; } else if ($('.well').is('#A3', '#B3', '#C3', '#D3', '#E3')) { questionValue = 300; } else if ($('.well').is('#A4', '#B4', '#C4', '#D4', '#E4')) { questionValue = 400; } else if ($('.well').is('#A5', '#B5', '#C5', '#D5', '#E5')) { questionValue = 500; } 

Thanks in advance. Please let me know if I have to add more code .. there is a div class for the question squares.

Adding html code

 <div id="wrapper"> <div class="row"> <div class="title"><h2></h2></div> <div class="question"> <form> Your Answer: <input type="text" id="answer" /></form> <button id="submit">Submit</button> <p id="instruct">When you're sure about your probably wrong answer, click submit</p> <!-- <div class = "result"> </div> --> </div> </div> <div class="row"> <div class="well" id="A1"> <p>$100</p> </div> <div class="well" id="B1"> <p>$100</p> </div> <div class="well" id="C1"> <p>$100</p> </div> <div class="well" id="D1"> <p>$100</p> </div> <div class="well" id="E1"> <p>$100</p> </div> </div> <div class="row"> <div class="well" id="A2"> <p>$200</p> </div> <div class="well" id="B2"> <p>$200</p> </div> <div class="well" id="C2"> <p>$200</p> </div> <div class="well" id="D2"> <p>$200</p> </div> <div class="well" id="E2"> <p>$200</p> </div> </div> <div class="row"> <div class="well" id="A3"> <p>$300</p> </div> <div class="well" id="B3"> <p>$300</p> </div> <div class="well" id="C3"> <p>$300</p> </div> <div class="well" id="D3"> <p>$300</p> </div> <div class="well" id="E3"> <p>$300</p> </div> </div> <div class="row"> <div class="well" id="A4"> <p>$400</p> </div> <div class="well" id="B4"> <p>$400</p> </div> <div class="well" id="C4"> <p>$400</p> </div> <div class="well" id="D4"> <p>$400</p> </div> <div class="well" id="E4"> <p>$400</p> </div> </div> <div class="row"> <div class="well" id="A5"><p>$500</p> </div> <div class="well" id="B5"><p>$500</p> </div> <div class="well" id="C5"><p>$500</p> </div> <div class="well" id="D5"><p>$500</p> </div> <div class="well" id="E5"><p>$500</p> </div> </div> <h3> score = </h3> <div class = "score">0</div> </div> 

And here is how I do each question.

 $("#A1").click(function() { $(".question").show(); $('<h4>The \"MVP\" quarterback whose team is 14-6 when he doesn't play.</h4>').appendTo('.question'); $('#submit').click(function() { $("#answer").on('input') var answer = $('#answer').val(); //what does this mean in words? if (answer == "Tom Brady" || answer == "Brady" || answer == "brady" || answer == "tom brady") { $('.question').replaceWith('<h3>omg you\'re so smart</h3>') //using h3 because it'll be unique, but there must be a better way score += questionValue; $(".score").text("$" + score); } else { $('.question').replaceWith('<h3>could NOT have been more wrong</h3>'); score -= questionValue; $(".score").text("$" + score); } 

}); });

Answer 1

Everything that you have implemented so far may be correct, but I think it is very difficult to maintain this code. It will also be quite difficult for any new person to understand this logic. Please take a look at the approach below. You can send it and not understand:

 $(document).ready(function() { $(".well").click(function() { var quesVal = $(this).data("questionvalue"); //reading the questionvalue associated with each question alert(quesVal); }); }); 

 .questionContainer { width: 250px; } .questionContainer .well { height: 40px; width: 40px; border: 1px solid red; margin-left: 5px; margin-top: 5px; float: left; /*Here you can also use display: inline-block instead of float:left*/ background: orange; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <div class="questionContainer"> <!--Putting question value in each and every box along with id and class as a data- attribute --> <div class="well" id="A1" data-questionvalue="100">A1</div> <div class="well" id="B1" data-questionvalue="100">B1</div> <div class="well" id="C1" data-questionvalue="100">C1</div> <div class="well" id="D1" data-questionvalue="100">D1</div> <div class="well" id="E1" data-questionvalue="100">E1</div> <div class="well" id="A2" data-questionvalue="200">A2</div> <div class="well" id="B2" data-questionvalue="200">B2</div> <div class="well" id="C2" data-questionvalue="200">C2</div> <div class="well" id="D2" data-questionvalue="200">D2</div> <div class="well" id="E2" data-questionvalue="200">E2</div> </div> 

Answer 2

You can try this way

 $('.well').click(function(){ if ($(this).is('#A1')||$(this).is('#B1')||$(this).is('#C1')||$(this).is('#D1')||$(this).is('#E1')) { alert(100); } else if ($(this).is('#A2') ||$(this).is('#B2')||$(this).is('#C2')||$(this).is('#D2')||$(this).is('#E2')) { alert(200); } }) 

it may be long but works.

Fiddle test

Answer 3

Simplification (this does not apply to a specific implementation, but simplifies it so that you can solve your problem)

You can use classes instead of using specific identifiers for each cell and have 5 from 1 to 5 and from A to E:

 <div class="row"> <!-- row 1 --> <div class="r1 a"></div> <div class="r1 b"></div> <!-- blah blah --> <div class="r5 d"></div> <div class="r5 e"></div> </div> <!-- row 5 --> 

For reference: I use r as the first letter, because you cannot run the class name with a number.

Then in your JavaScript:

 if($('.well').is('.r1')) questionValue = 100; 

etc.

For reference: You can skip curlybraces {} in the if if the content is a single line (for example, in this example).