Trying to execute a if/else statement in JQuery - javascript

I'm trying to execute a simple JQuery code a.k.a an if/else statement. Here's my code:
$('#butt_click, #pary').click(function() {
if ($(this).attr('id').val() == "butt_click") {
alert("You clicked button");
} else {
alert("You clicked pary");
}
});
The code above doesn't work AT ALL. Can't seem to find the problem... Help would be appreciated. Thanks..

This doesn’t look right:
$(this).attr('id').val()
Try using $(this).attr('id') or simply this.id instead (if you are trying to access the id property from the clicked element).

You have wrong code.
code must be as below.
if ($(this).val() == "butt_click")
OR
if ($(this).attr('id') == "butt_click")
not
if ($(this).attr('id').val() == "butt_click")

Remove val(). $(this).attr('id') already returns value
if ($(this).attr('id') == "butt_click") {

Remove .val() from if statement
Change your if statement to
if ($(this).attr('id') == "butt_click") {
alert("You clicked button");
} else {
alert("You clicked pary");
}

Related

If the value of this drop down is "1" and the value of this dropdown is " Active"

I am having trouble writing this conditional properly. I want to change it to if the value of #number equals "1" and the value of #status_dropdown equals " Active" then do stuff. This is what I have so far:
var status = document.getElementById("status_dropdown").value;
$('#number').on('change', function(){
if ($(this).val() == "1" && (status).val() == " Active") {
$('div[class*="member-"], .amounts').hide();
$('.member-1, .donation-0').show();
} else if ($(this).val() == "2") {
$('div[class*="member-"]').hide();
$('.member-2').show();
} else if ($(this).val() == "3") {
$('div[class*="member-"]').hide();
$('.member-3').show();
} else if ($(this).val() == "0") {
$('div[class*="member-"]').hide();
}
});
here is the js fiddle with the html with it as well:
https://jsfiddle.net/jelane20/c11z8xak/
I am not sure how to combine the logical operator with jQuery but open to a straight JS solution as well.
You're storing the value of the status select on page ready. You've to get the value on the change event too, instead of (status).val() use $("#status_dropdown").val().
The reason this isn't working is that you're combining Vanilla JS with jQuery. In the first line, you take status as the value of #status-dropdown, which is syntactically fine.
You're then using that value and passing it to jQuery $(status), so it's trying to look for an element with the selector of whatever the value of status is. If you just want a jQuery solution, you can skip the first line and replace $(status) with the selector, $('#status-dropdown').
Additionally, you're only checking the value of status once, so your code is checking if the status is active and the value is 1 on the initial conditional, but then it's only checking the value of $(this).
You can either add && $('#status-dropdown').val() == "Active") to each check, or better would be to perform that check first:
$('#number').on('change', function() {
if ($('#status-dropdown').val() === 'Active') {
if ($(this).val() === "1") {
$('div[class*="member-"], .amounts').hide();
$('.member-1, .donation-0').show();
} else if ($(this).val() === "2") {
$('div[class*="member-"]').hide();
$('.member-2').show();
} else if ($(this).val() === "3") {
$('div[class*="member-"]').hide();
$('.member-3').show();
} else if ($(this).val() === "0") {
$('div[class*="member-"]').hide();
}
}
});
Side note: I've changed your == to === for stronger checking.

How to show and hide something in jQuery using if's

Hello everyone so I want to show and hide a button using jQuery, but only if a variable is true for example.
Ex:
var st1wch1 = false;
$(document).ready(function(){
$("#choice1").click(function(){
var st1wch1 = true
state1_1warrior()
});
});
$(document).ready(function(){
if(st1wch1 == false){
$("button#choice1").show()
}
else if(st1wch1 == true){
$("button#choice1").hide()
}
})
But for some reason it never hides, any ideas??? Thanks in Advance.
The most simple way to do it may be this:
$(document).ready(function(){
$("#choice1").click(function(){
$("button#choice1").toggle()
});
});
The logic you've implemented to show or hide the element is defined within the document ready event, which is raised before the user has a chance to click on the button and raise the event handler which toggles your global variable.
You probably wanted to hide and show when the element is clicked?
$("#choice1").click(function(){
$(this).toggle();
});
After changing the variable, you code does not go through the if else conditions. Put that show and hide condition inside a function like below
function toggleButton(){
if(st1wch1 == false){
$("button#choice1").show()
}
else if(st1wch1 == true){
$("button#choice1").hide()
}
}
and then call this function everytime you change the variable's value.
You must place your code inside the click handler.
I think you want to add at least 2 buttons later, and you want to toggle just a part of them or something like this.
var st1wch1 = false;
$(document).ready(function(){
$("#choice1").click(function(){
if(st1wch1 == false){
st1wch1 = true;
$("button#choice1").show()
}
else if(st1wch1 == true){
st1wch1 = false;
$("button#choice1").hide()
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="choice1">choice1</button>
You can use toggle:
var st1wch1 = true;
$('#choice1').toggle(condition);
Side note: Don't use things like
if (st1wch1 === true)
Do:
if (st1wch1)
and (for the == false / === false case):
if (!st1wch1)
document.ready() is only called when the page initially loads, so it evaluates the if/else statement when you load the page and then never again. Clicking the element doesn't rerun the if else statement.
To get the behavior you want you can either do
$("#choice1").click(function(){
$(this).toggle();
});
or
$("#choice1").click(function(){
evaluateBoolean();
});
function evaluateBoolean(){
if(st1wch1 == false){
$("button#choice1").show()
}
else if(st1wch1 == true){
$("button#choice1").hide()
}
}
You can use toggleClass.
$('#button').toggleClass('hidden', condition);
Created css class with display: none;

Background color change onclick refactoring

I'm fairly new to JQuery/JavaScript.
I have successfully got the toggle to work on the am/pm buttons you may view it here:
Working Code
I am now trying to refactor my code using "this". I haven't figured out whats wrong with using if statements to change the background. Please view here:
Code I'm refactoring
$('.ampm').click(function() {
console.log($(this).attr('id'));
var text = $(this).text();
$('#meridiem').val(text);
if ($(this).attr('id') === $('#am')) {
$('#wrapper').css('background-color', 'orange');
} else if ($(this).attr('id') === $('#pm')) {
$('#wrapper').css('background-color', 'blue');
}
});
Let me know if you have any questions!
When you test .attr('id'), don't use the # in the string. Also, when you are comparing it, just use 'am' and 'pm' instead of wrapping it as a jQuery object. Lastly, when setting CSS with JavaScript/jQuery, use the backgroundColor syntax instead of background-color.
$('.ampm').click(function() {
var text = $(this).text();
$('#meridiem').val(text);
if ($(this).attr('id') === 'am') {
console.log('am');
$('#wrapper').css('backgroundColor', 'orange');
} else if ($(this).attr('id') === 'pm') {
$('#wrapper').css('backgroundColor', 'blue');
}
});
you need to change this:-
if ($(this).attr('id') === $('#am')) {
to this:-
if ($(this).attr('id') === 'am') {
and the same for your else if
you were comparing a string to a jquery object

jQuery if condition for radio button name and value

I have a radio button like
<input type="radio" name="user-type" value="Store">
<input type="radio" name="user-type" value="Brand">
I tried writing jQuery script like
if($("input[name=user-type]:checked").val()) == "Brand"){
$(".showstore").hide();
$(".showbrand").show();
}
and also tried
if($("input[name=user-type]:checked").val()) == "Brand").click(function(){
$(".showstore").hide();
$(".showbrand").show();
});
and also tried
if ( $("input[name=user-type]:radio").val() == "Brand"){
$(".showstore").hide();
$(".showbrand").show();
}
None of these worked, any correction is appreciated. Thanks.
Update1
I tried in this way and this hide both
if($("input[name=user-type]:checked").val() == "Brand"){
$(".showstore").hide();
$(".showbrand").show();
}
else if($("input[name=user-type]:checked").val() == "Store"){
$(".showstore").show();
$(".showbrand").hide();
}
Try the following code - it basically listens for click on radio name=user-type, and toggles based on which radio button was clicked.
$(function () {
$('.showstore').hide();
$('.showbrand').hide();
$("input[name=user-type]:radio").click(function () {
if ($('input[name=user-type]:checked').val() == "Brand") {
$('.showstore').hide();
$('.showbrand').show();
} else if ($('input[name=user-type]:checked').val() == "Store") {
$('.showstore').show();
$('.showbrand').hide();
}
});
});
A working fiddle: http://jsfiddle.net/FpUSH/1/
This is short
$('input:radio').change(
function(){
if($(this).val() == 'Store'){
$('.showbrand').hide();
$('.showstore').show();
}
else{
$('.showstore').hide();
$('.showbrand').show();
}
}
);
there are just some syntax errors:
$("input[name='user-type']:checked").each(function(){
if($(this).val() == "Brand"){
$(".showstore").hide();
$(".showbrand").show();
}
});
You need to check like this:
if($('input[name="user-type"]:checked').val() === "Brand")
{
alert("Test");
// do something here
}
Working Fiddle Example
You have one syntax error, You have closed the parenthesis belongs to the if statement wrongly
if($("input[name=user-type]:checked").val() == "Brand"){
$(".showstore").hide();
$(".showbrand").show();
}
DEMO
$("input[name=user-type]").change(function(){
$(".showstore").toggle(this.value === "Store");
$(".showbrand").toggle(this.value === "Brand");
});
NEW DEMO
demo try this,
if(jQuery("input:radio[name='user-type']:checked").val()=="Brand"){
//do your stuff
}
Definitely #karthikr has a good and functional approach.
Here it's one example for Yes/No radio-buttons in case you want to disable an element depending if the radio-button selection
$("input[name=button-name]:radio").click(function () {
if ($('input[name=input-radio-name]:checked').val() == "Yes") {
$( "element" ).removeClass('btn-display-none');
$( "element" ).prop('disabled', false);
} else {
$( "element" ).addClass('btn-display-none'));
$( "element" ).prop('disabled', true);
}
});
Source: Used for a own project

If else condition not working in jQuery

I am using if else condition in jQuery to handle check boxes.
My condition is that at least one check box is selected and after that alert if condition is running and not the other one. Here is my code
$(document).ready(function() {
$('#outer_menu').click(function() {
var $fields = $(this).find('input[name="mychoice"]:checked');
if (!$fields.length) {
alert('You must check at least one box!');
if(".a:checked "){
$(".language").find(".translate-language").toggleClass("translate-language translate-language_show");
} else if (".a_orignal:checked") {
$(".language").find(".orignal-language_hide").toggleClass("orignal-language_hide orignal-language");
} else {
alert('chose one');
}
return false;
}
});
});
our else if condition is not working when if condition false
I think what you are trying to do is to check whether the element with class a or a_original is checked, for that you need
if ($(".a").is(":checked ") {
$(".language").find(".translate-language").toggleClass("translate-language translate-language_show");
} else if (".a_orignal").is(":checked") {
$(".language").find(".orignal-language_hide").toggleClass("orignal-language_hide orignal-language");
} else {
alert('chose one');
}
use .is() to check whether the element satisfies the given selector
you need to fetch the jQuery object for the target element
Look at this line of code:
if(".a:checked ")
I believe it should be:
if ($(".a:checked "))
That might not be the end of your issues though, unless a is a class rather than you intending to select links.
Same problem here:
else if (".a_orignal:checked")
Change to:
if($(".a").is(":checked")){
and:
else if ($(".a_orignal").is(":checked")){
The .prop() method gets the property value for the first element in the matched set.
Write:
if(".a").prop("checked"){
$(".language").find(".translate-language").toggleClass("translate-language translate-language_show");
}
else if (".a_orignal").prop("checked"){
$(".language").find(".orignal-language_hide").toggleClass("orignal-language_hide orignal-language");
}

Categories

Resources