Utilizing a dropdown selection to trigger an IF statement in a function

Question

Utilizing a dropdown selection to trigger an IF statement in a function

I have an HTML code snippet as shown below:

The value "Test" is just for my reference to ensure that the code is functioning properly :)

<script>     

var tfa78 = document.getElementById("tfa_78").selvalue;

if( tfa78 == "karte" )
{
document.getElementById('tfa_2448').innerHTML ='<b>Bei karte anrufen.</b> <br>';
} else {
document.getElementById('tfa_2448').innerHTML ='Test';
}

I'm having trouble getting the desired result from this code. Could it be because I'm using the wrong method to select the dropdown value with the 'selvalue'? Previously, I used a similar code with a textfield and it worked fine, so I suspect there might be an issue with how I'm retrieving the value.

Thank you in advance for any help!

I made some updates to my code based on feedback:

 <script>     
 var tfa78 = document.getElementById("tfa_78").value;
 if( tfa78 == 'tfa_2438' ) {
 document.getElementById('tfa_2448').innerHTML ='<b> anrufen.</b> <br>';
 }else {
 document.getElementById('tfa_2448').innerHTML ='Test'+ tfa78;
 }
</script>

And here's the dropdown code which cannot be modified:

<select id="tfa_78" name="tfa_78" title="Quelle?" class="required"><option 
value="">Bitte auswählen:</option>
<option value="tfa_2438" id="tfa_2438" data-conditionals="#tfa_93" 
class="">karte</option>
<option value="tfa_2437" id="tfa_2437" data-conditionals="#tfa_93" 
class="">Test</option>
</select>

javascript

Answer 1

Answer №1

If you want to retrieve the chosen value, make sure to access the value property. As for selvalue, I am not sure if it is a valid term in any programming language. Here is an example for better understanding:

function update(){
  var userInput = document.getElementById("user_input").value;

  if( userInput == "option1" )
  {
  document.getElementById('result_output').innerHTML ='<b>Call option1 function.</b> <br>';
  } else {
  document.getElementById('result_output').innerHTML ='Test';
  }
}

<select id="user_input" onchange="update()">
  <option/>
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
</select>

<div id="result_output"/>

Answer 2

If you want to retrieve the chosen value, make sure to access the value property. As for selvalue, I am not sure if it is a valid term in any programming language. Here is an example for better understanding:

function update(){
  var userInput = document.getElementById("user_input").value;

  if( userInput == "option1" )
  {
  document.getElementById('result_output').innerHTML ='<b>Call option1 function.</b> <br>';
  } else {
  document.getElementById('result_output').innerHTML ='Test';
  }
}

<select id="user_input" onchange="update()">
  <option/>
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
</select>

<div id="result_output"/>

Answer 3

Answer №2

 <script>
    var selectedOption = document.getElementById("tfa_78").options[document.getElementById("tfa_78").selectedIndex].value;
    if (selectedOption == "karte") {
        document.getElementById('tfa_2448').innerHTML = '<b>Make a call using the card.</b> <br>';
    } else {
        document.getElementById('tfa_2448').innerHTML = 'Test';
    }
</script>

Answer 4

 <script>
    var selectedOption = document.getElementById("tfa_78").options[document.getElementById("tfa_78").selectedIndex].value;
    if (selectedOption == "karte") {
        document.getElementById('tfa_2448').innerHTML = '<b>Make a call using the card.</b> <br>';
    } else {
        document.getElementById('tfa_2448').innerHTML = 'Test';
    }
</script>

Answer 5

Answer №3

Always remember to use .value over .selvalue;

var tfa78 = document.getElementById("tfa_78").value;

Here is the complete code snippet:

<script>     
    function updateMessage() {
        var tfa78 = document.getElementById("tfa_78").value;
        console.log(tfa78);
        if( tfa78 == "volvo" ){
            document.getElementById('tfa_2448').innerHTML ='<b>Call for map.</b> <br>';
        } else {
            document.getElementById('tfa_2448').innerHTML ='Test';
        }
    }

    </script>

    </head>

    <body>
    <select id="tfa_78" onchange="updateMessage()">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="fiat">Fiat</option>
      <option value="audi">Audi</option>
    </select>
    <div id = "tfa_2448"> </div>
    </body>

Answer 6

Always remember to use .value over .selvalue;

var tfa78 = document.getElementById("tfa_78").value;

Here is the complete code snippet:

<script>     
    function updateMessage() {
        var tfa78 = document.getElementById("tfa_78").value;
        console.log(tfa78);
        if( tfa78 == "volvo" ){
            document.getElementById('tfa_2448').innerHTML ='<b>Call for map.</b> <br>';
        } else {
            document.getElementById('tfa_2448').innerHTML ='Test';
        }
    }

    </script>

    </head>

    <body>
    <select id="tfa_78" onchange="updateMessage()">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="fiat">Fiat</option>
      <option value="audi">Audi</option>
    </select>
    <div id = "tfa_2448"> </div>
    </body>

Utilizing a dropdown selection to trigger an IF statement in a function

Answer №1

Answer №2

Answer №3

Similar questions

Why does the method Array.concat on an extended class remove empty values in Node.js version 8.9.3?

The WebSocket function is returning undefined even though it successfully fetches the user; however, the user is

Modify the heading color of elements in a class to a distinct color when the cursor hovers over the element

What is the best way to delete a property from an object in an array using Mongoose? This is crucial!

How can you transform a nested array into a flat JavaScript map?

Discovering the specific marker that was clicked from a group of Google map markers

Utilize ng-checked in AngularJS to bind all values from an array to checkboxes

Merging pertinent information from separate arrays

Substitute for SendKeys() in Angular JS web pages using Selenium

Loop through data and use jQuery to insert it into the server

"Optimizing Performance: Discovering Effective Data Caching

Enhancing ag-grid with alternating row group colors following row span

Guide to showcasing associated information in HTML using Angular 7

I am unfamiliar with this specific JavaScript algorithm problem from Codewars

Using Flask to Render Templates with Repeated HTML Components

What is the best way to set values for the outcomes of a jQuery/AJAX post?

Unable to zoom in on D3 Group Bar Chart

Pass an image into an input field with the attribute type="filename" using JavaScript directly

Swapping out the entire vue.js container

Utilizing the power of AWS Lambda in conjunction with moment JS to generate unique