html 如何使用< input>方法、〈onclick =“func()">和javascript来更改页面的背景颜色

elcex8rz  于 2022-12-28  发布在  Java
关注(0)|答案(1)|浏览(130)

这是我目前这个问题的代码。是否有任何东西,我可以放在脚本标记

<!DOCTYPE html>
<html>
<head>
<title>
Color picker
</title>
</head>
<body style="text-align: center;">
    <h1> COLOR PICKER </h1>
    <label for="R">R: </label>
    <input type="number" maxlength="3" min="0" max="255" id="r">
    <label for="G">G: </label>
    <input type="number" maxlength="3" min="0" max="255" id="g">
    <label for="B">B: </label>
    <input type="number" maxlength="3" min="0" max="255" id="b"><br><br>
    <input type="submit" onclick="getColor()">Get color</input>
    <script>
    function getColor() {
        var r = document.getElementById("r");
        var g = document.getElementById("g");
        var b = document.getElementById("b"); 
        var color = "rgb("+ [r,g,b].join(',')")";
        document.body.style.background = color;
    }
    </script>
</body>

</html>

例如,输入:右:255,右:0,B:当我想要的页面应该是一个可爱的洋红色。但当我真的按下按钮什么也没有发生。我能做些什么来解决这个问题吗

smdnsysy

smdnsysy1#

您需要获取每个input元素的.value

var r = document.getElementById("r").value;
    var g = document.getElementById("g").value;
    var b = document.getElementById("b").value;

并且字符串串联中还缺少+

var color = "rgb(" + [r,g,b].join(',') + ")";

相关问题