Я думаю, что это действительно легко, но я просто не могу заставить его работать.

Я хочу, чтобы моя кнопка говорила разные вещи, когда выбрана другая опция.

Я попробовал это:

<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>

Но это не работает.

Может знаете что я делаю не так?

0
Rooster Rooney 9 Янв 2017 в 19:35

4 ответа

Лучший ответ

Проблема в том, что вы устанавливаете значение strUser только при загрузке, если вы перемещаете его внутри функции test(), оно будет обновляться при каждом нажатии кнопки. Вы также используете неправильный оператор сравнения, должно быть ===:

<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>
2
APAD1 9 Янв 2017 в 16:40

Вам нужно использовать '==' для сравнения строк, а не только '=', а также переместить strUser внутрь функции:

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>
0
M.M 9 Янв 2017 в 16:42

Вы получили две ошибки, замените = на == и используйте e.value (необязательно). Самое главное, чтобы код, который читает значение из поля выбора, был в функции!

Также обратите внимание на оператор равенства = == и оператор присваивания "="

Вот рабочий фрагмент кода

<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>
1
Uri Lukach 9 Янв 2017 в 16:47

Вопросы :

1: используйте === для сравнения в условии if.

2: Объявите структурирующий элемент внутри события click, иначе он всегда будет принимать значение, выбранное во время загрузки страницы.

<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>
0
Deep 9 Янв 2017 в 16:40