Question

我想创建一个输入，当我输入'blue'（或'＃..'）时，它会将BGcolor更改为蓝色。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>MAKE YOUR OWN WEB PAGE INSIDE OF THIS WEB PAGE!</title>

        <style>

            #design{

    background-color: gray;
    width: 194px;
    margin-left: auto;
    margin-bottom: 12px;
    padding: 25px;
    border-radius: 2px;
    min-height: 347px;  
    float: right;
    text-align: left;
    display: inline
            }
              #draw{

    background-color: lightgray;
    width: 405px;
    margin-right: auto;
    padding: 25px;
    border-radius: 2px;
    min-height: 347px; 
    float: left;
    text-align: left;
    display: inline
            }
        </style>

    </head>
    <body>

<div id="draw">

</div>

<div id="design">
    <p style="text-align:center">BACKGROUND COLOUR</p>
    <button onclick="blue()">Blue</button>
    <button onclick="lightblue()">Light Blue</button>
    <button onclick="black()">Black</button>
    <button onclick="white()">White</button>
    <button onclick="red()">Red</button>
    <button onclick="lightgray()">Default</button>
   <input type="text" id="create">
<input id="drawcolor" type="button" value="Click" />

    <script>

         blue = function(){
         document.getElementById('draw').style.backgroundColor = "blue"   
        }
         lightblue = function(){
         document.getElementById('draw').style.backgroundColor = "lightblue"   
        }
         black = function(){
         document.getElementById('draw').style.backgroundColor = "black"   
        }
         white = function(){
         document.getElementById('draw').style.backgroundColor = "white"   
        }
         red = function(){
         document.getElementById('draw').style.backgroundColor = "red"   
        }
         lightgray = function(){
         document.getElementById('draw').style.backgroundColor = "lightgray"   
        }


         document.getElementById("drawcolor").onclick = function () { 
    var x = document.getElementById("create").value; 
    document.getElementById("draw").style.backgroundColor = x;

       }

    </script>

</div>

    </body>
</html>

非常感谢！我已经完成了我需要的东西。非常感谢您的帮助。我已经更新了上面的代码;这是我的最终解决方案！再次感谢！

Answer 1

在按键上添加事件监听器并每次更新颜色：

document.getElementById('create').addEventListener("keyup", function() {
    document.getElementById('draw').style.backgroundColor = this.value;
});

Answer 2

看看这个简单的JQuery解决方案

＆＃13;

$("#create").keyup(function()
{
    var color;
    var value = $(this).val().trim();
    
    switch( value )
    {
        case "blue" : color = "blue"; break;
        case "red" : color = "red"; break;
        case "green" : color = "green"; break;
        default: color = "black";
    }
    $("#draw").css("background-color", color);
});

＆＃13;

#draw
{
    text-align:center;
    background-color:black;
    height:100px;
    width:200px;
}

.block 
{
    height:20px;
    width:100px;
    text-align:left;
}
.center {
    margin:auto;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id = "draw">
    <input type="text" id="create" class="block center">
</div>

＆＃13;

只需运行代码段并在文本框中键入颜色即可更改背景颜色。


输入：



红色，

绿色

或蓝色

Answer 3

HTML：

<body>
<div id = "draw">Test area</div>
<input type="text" id="create">
<input id="drawcolor" type="button" value="Click" />
</body>

JavaScript：

document.getElementById("drawcolor").onclick = function () { 
    var x = document.getElementById("create").value; 
    document.getElementById("draw").style.backgroundColor = x;
};

读取颜色的输入

3 个答案: