我想在单击按钮后显示output div标记中按钮上的颜色。
这里是我的javascript代码到目前为止,也是我的HTML和CSS代码。我试图采取的值,但它不工作。我不知道如何捕捉这个值。我希望创建一个事件处理程序,并将其分配给所有3个按钮。代码应该通过CLASS属性分配事件处理程序,但使用ID属性来区分哪个按钮被点击。
$(document).ready(function() {
$(".colorbutton").on("click", function() {
var colorid = $(this).attr("id");
$("#output").stop(true, true).hide().html(color).stop(true, true).show("fade", 1500);
}); // end event handler
}); // ends document.ready
body {
background-image: url("https://newton.ncc.edu/gansonj/ite154/img/crayons.jpg");
font-family: arial;
text-align: right;
color: #008B8B;
}
#pagewrap {
border: 8px #800000 solid;
padding: 10px;
width: 600px;
border-radius: 25px;
text-align: center;
background: white;
margin: 40px auto 0px auto;
}
#title {
font-size: 2.2em;
border-bottom: 7px #008B8B double;
padding: 10px 0px 10px 0px;
color: #008B8B;
text-align: center;
}
#formtext {
text-align: center;
font-size: 1.29em;
margin-top: 20px;
}
#usergrade {
text-align: center;
margin: 5px 20px 10px 20px;
}
.colorbutton {
color: white;
cursor: pointer;
padding: 5px 0px 5px 0px;
border: 3px solid #CCCC99;
border-radius: 25px;
width: 150px;
}
.colorbutton:hover {
background: #CCCCCC;
color: yellow;
border: 3px solid #003366;
}
#output {
font-size: 5em;
padding-top: 100px;
width: 200px;
height: 100px;
margin: 30px auto 30px auto;
border: 5px black double;
font-size: 1em;
font-family: arial;
}
<html>
<head>
<title></title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
</head>
<body>
<div id="pagewrap">
<div id="title">Crayon Color Factory</div>
<div id="formwrap" style="margin-top: 30px;">
<input type="button" class="colorbutton" id="red" style="background-color:red;" value="RED Color">
<input type="button" class="colorbutton" id="blue" style="background-color:blue;" value="BLUE Color">
<input type="button" class="colorbutton" id="green" style="background-color:green;" value="GREEN Color">
<div id="output">Change Me!!!!!</div>
</div>
<!-- ends div#formwrap -->
</div>
<!-- ends div#pagewrap -->
</body>
</html>
示例图片在这里:enter image description here
3条答案
按热度按时间z0qdvdin1#
未定义颜色变量。
你需要使用colorid变量来代替。如果你想改变颜色和盒子里的字符串,这里是代码。
nfzehxib2#
如果你想在框中显示颜色名称,你需要传递你分配给html函数的字符串:
这将改变输出框的背景颜色。
wswtfjt73#
你所需要做的就是传递你的 button id's 并生成 eventlistener。所以每次你点击按钮时,你的div的背景颜色会根据值而改变。