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

The outcomes of my JavaScript code are not aligning with my expectations

Viewing HTML web pages using Mozilla Firebox

“What is the process of setting a referenced object to null?”

Automatically Dismissing a Bootstrap Alert After a Set Number of Seconds

Using Javascript code within functions.php

What causes the issue when attempting to import multiple CSS files in a Vue.js project using @import more than once?

Using Nuxt.js to import custom NPM packages on a global scale

Regular expression for parsing any CSS font properties

spill the elements from one div into another div

When attempting to use nodejs's collection.find() method with MongoDB, no response is received

Node and Web scraping Promise: a powerful combination

What is the best way to gradually transform a continuously shifting text color into a single, consistent hue?

Tips for preventing the use of website URLs as variables in jQuery ajax() calls:

Warning: The DataTables alert has been triggered for table ID DimStatus. It is indicating that an unknown parameter, 'Code', has been requested for row 0 and column 0 during the initialization

After adding data to an empty array, index 0 becomes undefined for someEmptyArray

Serve an image in Node.js from a location outside of the public folder

NodeJS guide: Enabling cross-domain access for web services

fetching numerous JSON documents using jquery

What is the best way to store the outcome of a promise in a variable within a TypeScript constructor?

Tips for accessing the values of fields in React Material UI components