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

Question

when i choose another option than the first in a select list i want the asterisk to be removed!

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

where is my mistake?

<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

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

Answer 2

欢迎 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 3

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

你只需更改一行就可以了

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

应该可以。

Answer 5

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

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

can i use onblur on a select list in javascript?

javascript

select

function

onblur