How can IF and ELSE IF statements be used in JavaScript?

Question

How can IF and ELSE IF statements be used in JavaScript?

I am struggling to figure out the correct and efficient way to implement IF and else IF statements in javascript.

Here is my current challenge...

Currently, I am combining the values of 2 input fields and displaying them in another input field like this:

function FillIn() {
  document.getElementById('custom').value = 

'Main Text:' + ' ' +  document.getElementById('inputName').value + ', ' + '1st Text:' + ' ' + document.getElementById('inputName101').value

    ; 
}

The code mentioned above successfully puts the values of inputName and inputName101 into the custom input field.

Now, I have two radio buttons that I want to display their values in the custom input field based on the selected one.

Here is the code I am using for this purpose:

function FillIn() {
  document.getElementById('custom').value = 

    'Main Text:' + ' ' +  document.getElementById('inputName').value + ', ' + '1st Text:' + ' ' + document.getElementById('inputName101').value

if(document.getElementById('male').checked) {

   + ', ' + 'Type:' + ' ' + document.getElementById('male').value

}else if(document.getElementById('female').checked) {

     + ', ' + 'Type:' + ' ' + document.getElementById('female').value

}

; 
}

However, I am facing an issue as the radio button values are not showing up in the custom input field at all.

Any guidance or advice on how to resolve this would be greatly appreciated.

EDIT:

Below is the HTML for the radio buttons:

<input id="male" type="radio" name="gender" value="Road Legal" onclick="showhidediv(this);">  

<input id="female" type="radio" checked="checked" name="gender" value="Show Plate" onclick="showhidediv(this);">

javascript

Answer 1

Answer №1

It appears that the current approach is incorrect. It's not advisable to directly concatenate if/else conditions with strings. A more efficient way to structure your code would be:

function FillIn() {
    var str = 'Main Text: ';
    str += document.getElementById('inputName').value;
    str += ', 1st Text: ';
    str += document.getElementById('inputName101').value;

    if ( document.getElementById('male').checked ) {
        str += ', Type: ';
        str += document.getElementById('male').value;
    } else if ( document.getElementById('female').checked ) {
        str += ', Type: ';
        str += document.getElementById('female').value;
    }

    document.getElementById('custom').value = str;
}

Answer 2

It appears that the current approach is incorrect. It's not advisable to directly concatenate if/else conditions with strings. A more efficient way to structure your code would be:

function FillIn() {
    var str = 'Main Text: ';
    str += document.getElementById('inputName').value;
    str += ', 1st Text: ';
    str += document.getElementById('inputName101').value;

    if ( document.getElementById('male').checked ) {
        str += ', Type: ';
        str += document.getElementById('male').value;
    } else if ( document.getElementById('female').checked ) {
        str += ', Type: ';
        str += document.getElementById('female').value;
    }

    document.getElementById('custom').value = str;
}

Answer 3

Answer №2

Attempting to concatenate strings within and outside of if statements won't yield the desired result. It's crucial to follow this structure...

function FillIn() {
  document.getElementById('custom').value = 'Main Text:' + ' ' +  
    document.getElementById('inputName').value + ', ' + '1st Text:' + ' ' + 
    document.getElementById('inputName101').value;

  if (document.getElementById('male').checked) {
    document.getElementById('custom').value += ', ' + 'Type:' + ' ' +
      document.getElementById('male').value;
  }
  else if (document.getElementById('female').checked) {
    document.getElementById('custom').value += ', ' + 'Type:' + ' ' + 
      document.getElementById('female').value;
  }
}

It is highly likely that your code produced an error in the console. Reviewing those errors will help pinpoint what needs fixing.

Answer 4

Attempting to concatenate strings within and outside of if statements won't yield the desired result. It's crucial to follow this structure...

function FillIn() {
  document.getElementById('custom').value = 'Main Text:' + ' ' +  
    document.getElementById('inputName').value + ', ' + '1st Text:' + ' ' + 
    document.getElementById('inputName101').value;

  if (document.getElementById('male').checked) {
    document.getElementById('custom').value += ', ' + 'Type:' + ' ' +
      document.getElementById('male').value;
  }
  else if (document.getElementById('female').checked) {
    document.getElementById('custom').value += ', ' + 'Type:' + ' ' + 
      document.getElementById('female').value;
  }
}

It is highly likely that your code produced an error in the console. Reviewing those errors will help pinpoint what needs fixing.

Answer 5

Answer №3

It is not possible to incorporate an if statement directly into an expression. Despite this, your current implementation manages to execute; however, the logic within the if statement is simply evaluated and then discarded.

Instead of using an if statement, you can employ the conditional operator within an expression:

function FillIn() {
  document.getElementById('custom').value = 
    'Main Text:' + ' ' +  document.getElementById('inputName').value + ', ' +
    '1st Text:' + ' ' + document.getElementById('inputName101').value +
    (document.getElementById('male').checked ?
      ', ' + 'Type:' + ' ' + document.getElementById('male').value :
      (document.getElementById('female').checked ?
        ', ' + 'Type:' + ' ' + document.getElementById('female').value :
        ''
      )
    ); 
}

To enhance readability, utilizing local variables for the elements is recommended:

function FillIn() {
  var male = document.getElementById('male');
  var female = document.getElementById('female');
  document.getElementById('custom').value = 
    'Main Text:' + ' ' +  document.getElementById('inputName').value + ', ' +
    '1st Text:' + ' ' + document.getElementById('inputName101').value +
    (male.checked ?
      ', ' + 'Type:' + ' ' + male.value :
      (female.checked ?
        ', ' + 'Type:' + ' ' + female.value :
        ''
      )
    ); 
}

Answer 6

It is not possible to incorporate an if statement directly into an expression. Despite this, your current implementation manages to execute; however, the logic within the if statement is simply evaluated and then discarded.

Instead of using an if statement, you can employ the conditional operator within an expression:

function FillIn() {
  document.getElementById('custom').value = 
    'Main Text:' + ' ' +  document.getElementById('inputName').value + ', ' +
    '1st Text:' + ' ' + document.getElementById('inputName101').value +
    (document.getElementById('male').checked ?
      ', ' + 'Type:' + ' ' + document.getElementById('male').value :
      (document.getElementById('female').checked ?
        ', ' + 'Type:' + ' ' + document.getElementById('female').value :
        ''
      )
    ); 
}

To enhance readability, utilizing local variables for the elements is recommended:

function FillIn() {
  var male = document.getElementById('male');
  var female = document.getElementById('female');
  document.getElementById('custom').value = 
    'Main Text:' + ' ' +  document.getElementById('inputName').value + ', ' +
    '1st Text:' + ' ' + document.getElementById('inputName101').value +
    (male.checked ?
      ', ' + 'Type:' + ' ' + male.value :
      (female.checked ?
        ', ' + 'Type:' + ' ' + female.value :
        ''
      )
    ); 
}

How can IF and ELSE IF statements be used in JavaScript?

Answer №1

Answer №2

Answer №3

Similar questions

How can I retrieve the Id from a TextField in MUI when the select property is activated?

What is the best way to turn off autocorrect in a textarea on IE11 without turning off spellcheck?

when webpack loads the bundle.js file, the mime type is converted to text/html

Utilizing JSON for live population of search filter results

Filtering in JavaScript arrays based on conditions that are not related to the elements in the array

Troubleshooting error messages in the console during conversion of image URL to Base64 in AngularJS

Managing two variables in C# Controller and View

Can a text file be loaded into the title of a Bootstrap tooltip?

Having trouble selecting an element by name that contains a specific string followed by [..] using jQuery

PersistJS callback function is malfunctioning

Tips for extracting data from a JSON using a variable

When a link with the href attribute set to "#" is clicked while using hammer.js, it will smoothly scroll the page

Unable to access a user's public information using Instagram's API

Tips for efficiently handling MongoDB data on the server side with socket management

Steer clear of cross-domain solutions

How can I attach an event listener to each row in a table that is dynamically generated?

Auto Suggest: How can I display all the attributes from a JSON object in the options list using material-ui (@mui) and emphasize the corresponding text in the selected option?

Tips for showcasing nested information on the web page

Developing an HTML table dynamically with JavaScript and incorporating CRM data

Is it possible for me to use any text as a JSON key?