JavaScript使用选项更改颜色的内容_Javascript_Html

JavaScript使用选项更改颜色的内容

javascript html

JavaScript使用选项更改颜色的内容,javascript,html,Javascript,Html,嘿，我从javascript开始，想做点什么。。我希望用户将有一个文本区域，他可以写什么颜色，他喜欢红色，绿色，蓝色。。。。。按下按钮，bg将更改我在功能区堆叠。。这是我的密码，有人能告诉我我做错了什么吗 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="h

嘿，我从javascript开始，想做点什么。。我希望用户将有一个文本区域，他可以写什么颜色，他喜欢红色，绿色，蓝色。。。。。按下按钮，bg将更改我在功能区堆叠。。这是我的密码，有人能告诉我我做错了什么吗

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body bgcolor="#333333">
<form name="forme">
<p style="font-family:Tahome; font-size:20px; color:#06F">Please choose your favorite color background</p>
    <input type="text" name="color" onclick="color"() />
    <input type="button" value="Enter" onclick="check()" />
</form>
<script type="text/javascript">

    function bgColor(color)
    {
    var chose="document.forme.color.value;
    document.bgColor = "color";     
    }

</script>
</body>
</html>

使用HTML和Javascript，您可以编写：

<form>
    <input id="selected_color" type="text" placeholder="red,white,blue..." />
     <button  onclick="changeBg()">Change BgColor </button>
</form>

<script type="text/javascript">

function changeBg(){

     //fetch the value from the input field
     var selected_color = document.getElementById('selected_color').value;

     //set the backgroundColor
     document.body.style.backgroundColor = selected_color;

}
</script>

这不是一个文本区域，但下面应该给你一个如何做到这一点的想法

HTML:

JavaScript:

// Get Form Elements
var colorForm = document.getElementById('colorForm');
var colorList = document.getElementById('colorList');

// Colors
var colors = [
                {'key' : 'white', 'val': '#ffffff'},
                {'key' : 'black', 'val': '#000000'},
                {'key' : 'red',   'val': '#DC143C'},
                {'key' : 'green', 'val': '#006400'},
                {'key' : 'blue',  'val': '#0000FF'}
            ];

// Populate Select Element with colors
var len = colors.length;
for (var i = 0; i < len; i++) {
    // Create a new Option
    var opt = document.createElement('option');
    opt.innerHTML = colors[i].key;
    opt.value = colors[i].val;
    // Add new Option to Select Element
    colorList.appendChild(opt);
}

// Bind Form's submit event
colorForm.addEventListener("submit", function(event){
    // Stop form from submitting
    event.preventDefault();
    // Get color from Select Element
    var color = colorList.options[colorList.selectedIndex].value;
    // Change color
    document.body.style.background = color;
});

小提琴：

根据需要进行修改。

打开浏览器控制台，您将看到大量错误。例如，var select=document.forme.color.value；语法无效，与onclick=color相同。我还建议你读一些基础知识来达到这样的目的，比如，

// Get Form Elements
var colorForm = document.getElementById('colorForm');
var colorList = document.getElementById('colorList');

// Colors
var colors = [
                {'key' : 'white', 'val': '#ffffff'},
                {'key' : 'black', 'val': '#000000'},
                {'key' : 'red',   'val': '#DC143C'},
                {'key' : 'green', 'val': '#006400'},
                {'key' : 'blue',  'val': '#0000FF'}
            ];

// Populate Select Element with colors
var len = colors.length;
for (var i = 0; i < len; i++) {
    // Create a new Option
    var opt = document.createElement('option');
    opt.innerHTML = colors[i].key;
    opt.value = colors[i].val;
    // Add new Option to Select Element
    colorList.appendChild(opt);
}

// Bind Form's submit event
colorForm.addEventListener("submit", function(event){
    // Stop form from submitting
    event.preventDefault();
    // Get color from Select Element
    var color = colorList.options[colorList.selectedIndex].value;
    // Change color
    document.body.style.background = color;
});