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 个答案: