JavaScript onchange不會在單選按鈕上觸發

Question

在切換單選按鈕之後，某種方式更改功能不會正確觸發。目前我沒有收到帶有「取消選中圓圈」或「箭頭取消選中」的日誌消息。該HTML看起來像這樣：

var drawingArrow = document.getElementById('drawing-arrow-shape'), 
 
    drawingCircle = document.getElementById('drawing-circle-shape'); 
 

 
drawingCircle.onchange = function() { 
 
    console.log("on change circle btn"); 
 
    if ($("#drawing-circle-shape").is(":checked")) { 
 
    console.log("circle checked"); 
 
    } else { 
 
    console.log("circle uncheck"); 
 
    } 
 
}; 
 

 
drawingArrow.onchange = function() { 
 
    console.log("on change arrow btn"); 
 
    if ($("#drawing-arrow-shape").is(":checked")) { 
 
    console.log("arrow checked") 
 
    } else { 
 
    console.log("arrow uncheck"); 
 
    } 
 
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<label class="btn btn-default btn-lg"> 
 
    <input type="radio" name="drawing-shape" id="drawing-arrow-shape"> 
 
    <i class="glyphicon glyphicon-arrow-right"></i> 
 
</label> 
 
<label class="btn btn-default btn-lg"> 
 
    <input type="radio" name="drawing-shape" id="drawing-circle-shape"> 
 
    <i class="glyphicon glyphicon-record"></i> 
 
</label>

Answer 1

問題是因爲,在第二個變量定義之後應該是;。這是混淆JS解釋器，因爲它認爲下一個語句將是一個變量定義，事實上它是一個變量設置器。

然而，您應該注意，您可以直接在元素上使用addEventListener()來改善邏輯。然後，您可以使用關鍵字this來引用元素，而不必使用jQuery來選擇您已經引用的元素。試試這個：

document.getElementById('drawing-arrow-shape').addEventListener('change', function() { 
 
    if (this.checked) 
 
    console.log('arrow checked'); 
 
}); 
 

 
document.getElementById('drawing-circle-shape').addEventListener('change', function() { 
 
    if (this.checked) 
 
    console.log('circle checked'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<label class="btn btn-default btn-lg"> 
 
    <input type="radio" name="drawing-shape" id="drawing-arrow-shape"> 
 
    <i class="glyphicon glyphicon-arrow-right"></i> 
 
</label> 
 
<label class="btn btn-default btn-lg"> 
 
    <input type="radio" name="drawing-shape" id="drawing-circle-shape"> 
 
    <i class="glyphicon glyphicon-record"></i> 
 
</label>

Answer 2

我做你的JS小的變化，現在它正在請修改下面我做

var drawingArrow = document.getElementById('drawing-arrow-shape'); 
var drawingCircle = document.getElementById('drawing-circle-shape'); 

剛剛刪除逗號和製作單獨的變量。

var drawingArrow = document.getElementById('drawing-arrow-shape'); 
 
     var drawingCircle = document.getElementById('drawing-circle-shape'); 
 

 

 
    drawingCircle.onchange = function() { 
 
     console.log("on change circle btn"); 
 
     if($("#drawing-circle-shape").is(":checked")) { 
 
      console.log("circle checked"); 
 
     } else { 
 
      console.log("circle uncheck"); 
 
     } 
 
    }; 
 

 
    drawingArrow.onchange = function() { 
 
     console.log("on change arrow btn"); 
 
     if($("#drawing-arrow-shape").is(":checked")) { 
 
      console.log("arrow checked") 
 
     } else { 
 
      console.log("arrow uncheck"); 
 
     } 
 
    };

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<label class="btn btn-default btn-lg"> 
 
     <input type="radio" name="drawing-shape" id="drawing-arrow-shape"> 
 
     <i class="glyphicon glyphicon-arrow-right"></i> 
 
    </label> 
 
    <label class="btn btn-default btn-lg"> 
 
     <input type="radio" name="drawing-shape" id="drawing-circle-shape"> 
 
     <i class="glyphicon glyphicon-record"></i> 
 
    </label>

Answer 3

您需要更改這些2個語句：

var drawingArrow = document.getElementById('drawing-arrow-shape'); 
     drawingCircle = document.getElementById('drawing-circle-shape'); 

有兩個產品，其導致了問題到底','。用​​3210替換它解決了它。