Javascript：在沒有JQuery的情況下通過單選按鈕更改樣式？

Question

我有三個應該更改字體大小的單選按鈕。 每個字體都有一個id ，用於指定要更改的字體大小。

由於某些原因，我一直收到“未捕獲的類型錯誤：無法將屬性'onchange'設置為null”。 我猜測這是因為sizeControl不存在而發生的，但顯然如此。 該變量已初始化並包含在window.onload = function() ，這意味着不是因為未在腳本之前加載HTML（我知道如何解決此錯誤的唯一情況）。

在這種特殊情況下，我不應該使用onchange嗎？ 我編寫fontSizeChange函數的方式是否存在問題？

單選按鈕：

 <label><input id="36pt" type="radio" name="size" checked="checked" />Medium</label>
 <label><input id="48pt" type="radio" name="size" />Big</label>
 <label><input id="60pt" type="radio" name="size" />Bigger</label>     


  var sizeControl = document.getElementById("size");
  sizeControl.onchange = fontSizeChange;

嘗試更改顯示的size屬性的函數：

function fontSizeChange() {
  var display = document.getElementById("display");
  var fontChecked = [document.getElementById("36pt"),
    document.getElementById("48pt"),
    document.getElementById("78pt")
  ];
  for (var i = 0; i < fontChecked.length; i++) {
    if (fontChecked[i].checked == true) {
      display.style.fontSize = fontChecked[i].id;
    }
  }
  display.innerHTML = "String";
}

Answer 1

嘗試這個

<!DOCTYPE html>
<html>
<body>

<label><input id="36pt" type="radio" name="size" />Medium</label>
<label><input id="48pt" type="radio" name="size" />Big</label>
<label><input id="60pt" type="radio" name="size" />Bigger</label>

<label id="display">String</label> 
<script>
var elements = document.getElementsByName("size");

for(var i=0; i < elements.length; i++){
  elements[i].addEventListener('click', fontSizeChange, false);
}


function fontSizeChange(){
   var display = document.getElementById("display");
   display.style.fontSize = this.id;
}
</script>

</body>
</html>

該問題中的代碼僅在頁面加載時起作用一次，當頁面加載時選擇了第一個單選按鈕，則字體大小將始終為36pt。 沒有將eventListener添加到單選按鈕，因此單擊時將不會發生任何事情。

在這里，在我的代碼我得到的所有元素，並添加點擊eventListener和綁定的功能，因此只要點擊一個按鈕，此功能將執行與this將把單擊按鈕。 我希望你能理解我的解釋。

Javascript：在沒有JQuery的情況下通過單選按鈕更改樣式？

問題描述

1 個解決方案

解決方案1
2 已采納 2016-01-30 06:53:42

Javascript：在沒有JQuery的情況下通過單選按鈕更改樣式？

問題描述

1 個解決方案

解決方案1 2 已采納 2016-01-30 06:53:42

解決方案1
2 已采納 2016-01-30 06:53:42