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