0

I think this is really easy, but I just can't get it to work.

I want my button to say different things when a different option is selected.

I tried this:

<select id="selector123">
  <option>test</option>
  <option>tes2</option>
</select>
<br><br>
<button onclick="test()">hoi</button>
<script>
    var e = document.getElementById("selector123");
    var strUser =
        e.options[e.selectedIndex].value;

    function test() {
        if (strUser =
            "test") {
            alert('this should a different text');
        } else if (strUser = "tes2") {
            alert('this should say this text');
        }
    }
</script>

But its not working.

Maybe know what I'm doing wrong?

Adam Azad
  • 11,171
  • 5
  • 29
  • 70
  • 2
    your if and else statements are not correct. "=" is used for assignment, if you want to compare stuff you use "==" –  Jan 09 '17 at 16:39
  • Another problem you have: [Why doesn't my equality comparison using = (a single equals) work correctly?](http://stackoverflow.com/q/38268329/218196) – Felix Kling Jan 09 '17 at 16:39
  • *"But its not working."* Can you elaborate on that? What is happening and what do you expect to happen instead? Please read [ask] a question. – Felix Kling Jan 09 '17 at 16:41

4 Answers4

2

The problem is that you are setting the value of strUser on load only, if you move it inside of the test() function it will update each time you click the button. You're also using the wrong comparison operator, should be ===:

<select id="selector123">
  <option>test</option>
  <option>tes2</option>
</select>
<br><br>
<button onclick="test()">hoi</button>

<script>
var e = document.getElementById("selector123");

function test() {
    var strUser = e.options[e.selectedIndex].value;
    if (strUser === "test") {
        alert('this should a different text');
    } else if (strUser === "tes2") {
        alert('this should say this text');
    }
}
</script>
APAD1
  • 13,509
  • 8
  • 43
  • 72
1

You got two mistakes, replace = with == and use e.value (optionally). The most important thing is that the code that reads the value from the select box should be in the function!

Also pay attention to equals "==" operator and assignment operator "="

Here is working code snippet

<html> <body>
 
  <select id="selector123"> 
 <option>test</option>
 <option>tes2</option>
 </select><br><br> <button onclick="test()">hoi</button>
 
 <script> 
 
 function test(){  
 var e = document.getElementById("selector123"); 
 var strUser = e.value; 
  
  if (strUser == "test") {
         alert('this should a different text');
     }
 else if (strUser == "tes2") {
  alert('this should say this text');
   } } </script>
 
 </body> </html>
Uri Lukach
  • 1,093
  • 1
  • 14
  • 28
0

You need to use '==' to compare strings and not just '=', and also move the strUser to inside the function:

var e = document.getElementById("selector123");

function test(){  
    var strUser = e.options[e.selectedIndex].value;
 if (strUser =="test") {
  alert('this should a different text');
 }else if (strUser == "tes2") {
  alert('this should say this text');
 } 
}
<html>
<body>
<select id="selector123">
 <option>test</option>
 <option>tes2</option>
</select>
<br><br>
<button onclick="test()">hoi</button>
</body>
</html>
M.M
  • 2,254
  • 1
  • 20
  • 33
0

Issues :

1: use === for comparison in if condition.

2: Declare the struser inside the click event else it will always take the value selected at the time of page load

<html>

<body>

  <select id="selector123">
    <option>test</option>
    <option>tes2</option>
  </select>
  <br>
  <br>
  <button onclick="test(event)">hoi</button>

  <script>
    var e = document.getElementById("selector123");
   

    function test(event) {
      
      var strUser = e.options[e.selectedIndex].value;      
      if (strUser =="test") {
        alert('this should a different text');
      } else if (strUser == "tes2") {
        alert('this should say this text');
      }
    }
  </script>

</body>

</html>
Deep
  • 9,594
  • 2
  • 21
  • 33