gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-02 15:06:26 28 4
gpt4 key购买 nike

我有三个单选按钮,应该可以更改字体大小。每个都有一个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并绑定(bind)了一个函数,因此每当单击按钮时,该函数就会执行,并且this将引用到单击的按钮。我希望你能理解我的解释。

关于Javascript:在没有 JQuery 的情况下使用单选按钮更改样式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35098832/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com