Javascript：在没有JQuery的情况下使用单选按钮更改样式？_Javascript_Html_Button_Styles_Size

Javascript：在没有JQuery的情况下使用单选按钮更改样式？

javascript html button

Javascript：在没有JQuery的情况下使用单选按钮更改样式？,javascript,html,button,styles,size,Javascript,Html,Button,Styles,Size,我有三个单选按钮可以改变字体大小。每种字体都有一个id，用于指定更改的字体大小出于某种原因，我不断得到一个“未捕获类型错误：无法将属性'onchange'设置为null”。我猜这是因为sizeControl不存在，但它显然存在。变量被初始化并封装在window.onload=function（）中，这意味着这不是因为在脚本之前没有加载HTML（我知道如何处理此错误的唯一情况）在这种特殊情况下，我不应该使用onchange？我编写fontSizeChange函数的方式有问题吗单选按钮： &

我有三个单选按钮可以改变字体大小。每种字体都有一个

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;

中等
大的
更大的
var sizeControl=document.getElementById（“大小”）；
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";
}

函数fontSizeChange（）{
var display=document.getElementById（“display”）；
var fontChecked=[document.getElementById（“36pt”），
文件.getElementById（“48pt”），
文件getElementById（“78pt”）
];
对于（变量i=0；i

试试这个
<!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>


中等
大的
更大的
一串
var elements=document.getElementsByName（“大小”）；
对于（var i=0；i

问题中的代码在页面加载时只工作一次，当页面加载第一个单选按钮被选中时，字体大小将始终为36磅。单选按钮中没有添加eventListener
，因此当您单击时，不会发生任何事情
在我的代码中，我获取了所有元素，并添加了一个clickeventListener
并绑定了一个函数，因此每当单击一个按钮时，该函数都将执行，并且此
将引用所单击的按钮。我希望你能理解我的解释。
试试这个
<!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>


中等
大的
更大的
一串
var elements=document.getElementsByName（“大小”）；
对于（var i=0；i

问题中的代码在页面加载时只工作一次，当页面加载第一个单选按钮被选中时，字体大小将始终为36磅。单选按钮中没有添加eventListener
，因此当您单击时，不会发生任何事情
在我的代码中，我获取了所有元素，并添加了一个clickeventListener
并绑定了一个函数，因此每当单击一个按钮时，该函数都将执行，并且此
将引用所单击的按钮。希望您理解我的解释。
document.getElementById（“大小”）；这将返回一个id大小的元素，您的代码没有id大小的元素，这就是它返回null的原因。老实说，我不知道如何在不使用id的情况下获取元素；这将返回名为size的元素，在您的代码中，当您要更改字体大小时，它将返回一个元素数组。（3个名为size的元素）？onclick？是，当用户单击optiondocument.getElementById（“大小”）时立即单击；这将返回一个id大小的元素，您的代码没有id大小的元素，这就是它返回null的原因。老实说，我不知道如何在不使用id的情况下获取元素；这将返回名为size的元素，在您的代码中，当您要更改字体大小时，它将返回一个元素数组。（3个名为size的元素）？onclick？是的，当用户单击一个选项时会立即执行。对不起，我以前没有提到过这一点。事实上，我不允许在这个任务中使用onclick处理程序或任何可以在HTML代码中用Javascript处理的代码。代码–只有答案不受欢迎，你应该解释为什么OP会有问题，为什么你的答案会解决这个问题。有没有理由使用id='value'而不是value='value'？对不起，我之前没有提到这一点。实际上，我不允许在HTML代码中使用onclick处理程序或任何可以用Javascript处理的代码。代码–只有答案不受欢迎，您应该解释OP有问题的原因以及您的答案解决问题的原因。是否有理由使用id='value'而不是value='value'？