могу ли я использовать onblur в списке выбора в javascript?

Question

когда я выбираю другой вариант, отличный от первого в списке выбора, я хочу удалить звездочку!

<script>
function opchk() {
  if (document.getElementById("ops").value = 'Select size') { 
    document.getElementById(asterisk9).style.display = "block";
  }
  else {
    document.getElementById(asterisk9).style.display = "none";
  }
</script>

где моя ошибка?

<div class="type1" id="top4">
  <h>Size:</h>
  <h class="astyle" id="asterisk9">*</h>
</div>

<select style="width:90px" id="ops" onblur="opchk()">
  <option value="op1">Select size</option>
  <option value="op2">5</option>
  <option value="op3">10</option>
  <option value="op4">15</option>
  <option value="op5">20</option>
</select>

Answer 1

Было несколько ошибок повсюду. Начало работы с javascript может быть немного сложным, но использование console.log () может быть действительно полезным, чтобы увидеть, как далеко продвигается код, прежде чем он сломается, или выяснить, возвращает ли что-то значение, которое вы не ожидаете. Удачи!

function opchk() {
  if (document.getElementById("ops").value == "op1") { //in the select list, you set the values to op1, op2, etc. So that's what you should be using for comparison. Also you need to use == or === to compare values, = is used to set the value of things.
    document.getElementById("asterisk9").style.visibility = "visible"; //this is situational, but using "visibility" rather than "display" will prevent things from shifting around since the element is still there just hidden/visible.
  }
  else {
    document.getElementById("asterisk9").style.visibility = "hidden"; //the id "asterisk9" should be in quotes when selecting it with document.getElementById()
  }
} //missing closing bracket of opck()

<div class="type1" id="top4">
  <h>Size:</h>
  <h class="astyle" id="asterisk9">*</h>
</div>

<select style="width:90px" id="ops" onchange="opchk()"><!--I would also use onchange in this case to make it feel more responsive.-->
  <option value="op1">Select size</option>
  <option value="op2">5</option>
  <option value="op3">10</option>
  <option value="op4">15</option>
  <option value="op5">20</option>
</select>

Answer 2

Итак, ваши две самые большие проблемы - отсутствие скобки для функции opchk, и использование одного значения = сверх == или ===.

= назначает значение справа к переменной слева
== свободно проверяет равенство (1 равно 1, а также "1")
=== проверяет строгое равенство (1 равно 1, но не " 1 ")

<script>
function opchk() {
  if (document.getElementById("ops").value === 'Select size') { 
    document.getElementById("asterisk9").style.display = "block";
  }
  else {
    document.getElementById("asterisk9").style.display = "none";
  }
}
</script>


<div class="type1" id="top4">
  <h>Size:</h>
  <h class="astyle" id="asterisk9">*</h>
</div>

<select style="width:90px" id="ops" onblur="opchk()">
  <option value="op1">Select size</option>
  <option value="op2">5</option>
  <option value="op3">10</option>
  <option value="op4">15</option>
  <option value="op5">20</option>
</select>

Answer 3

Вы должны просто изменить одну строку, тогда она должна работать

if (document.getElementById("ops").value == 'Select size') {
// Change this to like:
if (document.getElementById("ops").value == 'op1') {

Она должна работать.

Answer 4

Добро пожаловать, Ханнон Кауд!

В вашем коде пара синтаксических ошибок.

function opchk() {
  // if (document.getElementById("ops").value = 'Select size') { // <- error here, one = means you are setting a value
  if (document.getElementById("ops").value == 'Select size') { // should be == or ===

    // document.getElementById(asterisk9).style.display = "block"; <- error here, asterisk9 is already element reference
    
    // will work like this
    document.getElementById('asterisk9').style.display = "block"; // reselect by id
    // or 
    asterisk9.style.display = "block"; // using asterisk9 as element reference
  }
  else {
    // same here
    document.getElementById('asterisk9').style.display = "none";
    // or 
    asterisk9.style.display = "none";
  }
}

<div class="type1" id="top4">
  <h>Size:</h>
  <h class="astyle" id="asterisk9">*</h>
</div>

<select style="width:90px" id="ops" onblur="opchk()">
<option value="op1">Select size</option>
<option value="op2">5</option>
<option value="op3">10</option>
<option value="op4">15</option>
<option value="op5">20</option>
</select>

Answer 5

для сравнения внутри оператора if вы должны использовать == вместо = .
также не забудьте добавить закрывающую скобку для вашей функции.