變量未在檢查值上重新分配

Question

選擇復選框時變量garageVal 的值未更新。

Since the default position of the checkbox is checked on the first selection, garageVal is 15000, but it does not change when a different value is selected.

本節的目的是計算房屋的估價。 GarageVal 與其他變量一起插入計算器以生成最終值。

HTML：

  <div class="garage-block">
      <input type="checkbox" class='g1' name='garage'/>1</label>
      <input type="checkbox" class='g2' name='garage'/>2</label>
      <input type="checkbox" class='g3' name='garage'/>3</label>
  </div>

JS：

    let g1 = document.querySelector('.g1');
    let g2 = document.querySelector('.g2');
    let g3 = document.querySelector('.g3');
    let garageVal;
    if(g1.checked = true){
       garageVal = 15000;
    }else if(g2.checked = true){
       garageVal = 30000;
    } else if(g3.checked = true){
       garageVal = 45000;
    }
    console.log(garageVal);

默認情況下，控制台將顯示 15000，盡管我努力了，但我仍然無法更新garageVal。

Answer 1

if (g1.checked = true)

您的條件都是賦值，始終為true ，尤其是在第一次檢查時（賦值是評估為所分配值的表達式）。

 const obj = {} const foo = (obj.rar = 'yasss,') // "=" is assignment. not comparison console.log('obj:rar,'. obj,rar) // 'yasss.': but you probably didn't expect this console,log('foo,', foo) // also 'yasss!', but you probably expected boolean

將=更改為===以進行比較：

if(g1.checked === true){
   garageVal = 15000;
}else if(g2.checked === true){
   garageVal = 30000;
} else if(g3.checked === true){
   garageVal = 45000;
}

或者只是省略比較，因為element.checked已經是 boolean 值。

if(g1.checked){
   garageVal = 15000;
}else if(g2.checked){
   garageVal = 30000;
} else if(g3.checked){
   garageVal = 45000;
}

Answer 2

加載腳本后，您的 if 和 elseif 語句會立即運行。 因此，在頁面加載時，腳本會運行，評估哪些框被選中，然后根據您的 HTML 分配一個值。 您需要將事件監聽器添加到每個復選框以使其實時更新。 例如：

g2.addEventListener("click", function(){
    // if statement to see if box is already checked or not
    if (g2.checked === false){
        g2.checked = true;
        garageVal = 30000;
    } else {
        g2.checked = false;
        // remove 3000 from garageVal, or whatever you need done when box is unchecked
    }
}, false);