Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/apache-kafka/3.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 是否使用“单选值”设置类背景颜色?_Javascript_Radio Button_Background Color - Fatal编程技术网

Javascript 是否使用“单选值”设置类背景颜色?

Javascript 是否使用“单选值”设置类背景颜色?,javascript,radio-button,background-color,Javascript,Radio Button,Background Color,我是新手 试图找到一种方法将选中单选按钮(格式化为十六进制代码)的值作为特定类的背景色。基本上,我有一个盒子,我希望用户能够自定义和设置基于无线电选择的元素的颜色是至关重要的工作。以下是我目前掌握的情况: <form id="2019-Holiday" name="2019-Holiday" data-name="2019 Holiday" class="form"> <input type="radio" name="box-color" value="#177262" da

我是新手

试图找到一种方法将选中单选按钮(格式化为十六进制代码)的值作为特定类的背景色。基本上,我有一个盒子,我希望用户能够自定义和设置基于无线电选择的元素的颜色是至关重要的工作。以下是我目前掌握的情况:

<form id="2019-Holiday" name="2019-Holiday" data-name="2019 Holiday" class="form">
<input type="radio" name="box-color" value="#177262" data-name="box-color" id="177262">
<input type="radio" name="box-color" value="#80a44a" data-name="box-color" id="80a44a">
</form>

<div class=box-color" id="box-color">
    <div class="box-background-color" id="box-wall1"></div>
    <div class="box-background-color" id="box-wall2"></div>
</div>

<script>
    document.getElementById("box-color").onclick = function() {
        boxBackgroundColor();
    };

    function boxBackgroundColor() {
        var ele = document.getElementsByName("box-color");
        var elements = document.getElementsByClassName("box-background-color"); // get all elements
        for (var i = 0; i < elements.length; i++)
            for (i = 0; i < ele.length; i++) {
                if (ele[i].checked)
                    elements[i].style.backgroundColor = ele[i].value;
            }
    }
</script>

我如何编写此代码(如果有帮助?)

const myForm=document.querySelector(“#我的表单”)
myForm.onchange=\u=>
{
document.body.style.background=myForm['box-color'].value;
}
body{背景色:白色;}
标签{显示:块;宽度:200px;背景色:灰色;边距:0.5em;}

白色
蓝色
红色
绿色
函数更改颜色(e){
//凭身份证
document.getElementById(“box”).style.backgroundColor=e.value;
//按类名
let element=document.getElementsByClassName(“框”);
Array.prototype.forEach.call(元素,函数(el){
el.style.backgroundColor=e.value;
});
}

文件
红色
黄色的
绿色

我宁愿为表单本身设置onChange处理程序,并在radiobutton发生更改时获取所选值,而不是向特定的div添加onClick处理程序

此外,ID
2019 Holiday
无效,因为ID不能以数字开头

document.querySelector(“#Holiday-2019”).onchange=function(e){
var selectedColor=e.target.value;
boxBackgroundColor(selectedColor);
};
功能盒背景色(selectedColor){
var elements=document.getElementsByClassName(“框背景色”);//获取所有元素
对于(var i=0;i
表单{
填充:10px0;
}
#盒色{
宽度:400px;
高度:200px;
背景:灰色;
}
.box背景色{
宽度:100%;
身高:49%;
利润底部:2%;
对齐项目:居中;
显示器:flex;
证明内容:中心;
}

深绿色
浅绿色
Boxwall1
Boxwall2

将.value设置为什么?它必须是有效的背景颜色值。例如,像
#ffffff
rgb(255255)
。另外,要小心嵌套循环共享相同的迭代值
i
。请将HMTL部分添加到此(全部
)首先,这看起来应该可以工作,但我在codepen中运行了它,但它不起作用?请澄清:)@JoshJacobs你能指定你得到的错误吗。谢谢你,但我正在尝试设计一个特定的类,而不是body@JoshJacobs好吧,我为这个案例添加了一个新代码