我可以在javascript中的选择列表上使用onblur吗？

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

因此，您的两个最大问题是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 2

整个过程中存在一些错误。开始使用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 3

为了在if语句中进行比较，您必须使用==而不是=。也不要忘记为函数添加一个右括号。

Answer 4

欢迎hannon qaoud！

您的代码中有几个语法错误。

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 (document.getElementById("ops").value == 'Select size') {
// Change this to like:
if (document.getElementById("ops").value == 'op1') {

它应该起作用。