Javascript:使用没有JQuery的单选按钮更改样式

Javascript: Changing style with radio buttons without JQuery?

本文关键字：单选按钮 样式 JQuery Javascript      更新时间：2023-09-26

我有三个单选按钮，应该改变字体大小。每个字体都有一个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;

尝试更改显示器大小属性的函数：

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";
}

试试这个

<!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将引用单击的按钮。我希望你理解我的解释.

相关文章：