JavaScript - 按钮或功能不起作用

时间:2016-10-27 06:12:46

标签: javascript



<!DOCTYPE html>
    <html>
	<head>
		<title> Javascript 1 </title>
		<style type = "text/css">
			#firstid
			{
				color:red;
				background-color:blue;
				font-size:25px;
				font-style:italics;
			}
			#firstid:hover
			{
				color:white;
			}
			.firstclass
			{
				color:cyan;
				background-color:pink;
				font-size:35px;
				font-face:verdana;
			}
		</style>
		<script type = "text/javascript">
		document.write("<h1>Hello<br/></h1> ");
		function changeBG()
		{
			document.body.stlyle.background="green";
			var x = document.getElementById("firstid");
			x.style.color="brown";
			x.style.fontSize="10px";
		}
		
		</script>
	</head>
	<body>
		<pre id="firstid">
			To do:
			1. Class
			2. ID
			3. Function
		</pre><br/>
		<p class="firstclass">
			Harry Potter is a wizard.
		</p>	
		
		<button type="button" onClick="changeBG()">Change To do</button>
	</body>
    </html>	
	
&#13;
&#13;
&#13;

这是代码。

我创建了一个函数changeBG()和一个按钮&#34; Change To do&#34; 。当我单击按钮时,此功能应该运行但它不会运行。请解决这个问题。

该功能包括更改背景和更改指定ID的颜色和字体大小。

3 个答案:

答案 0 :(得分:2)

你拼错了

document.body.stlyle.background="green";

document.body.style.background="green";

答案 1 :(得分:0)

你输入样式词有错  document.body.stlyle.background = “绿色”;

答案 2 :(得分:0)

更改为:

<!DOCTYPE html>
<html>
<head>
<title> Javascript 1 </title>
<style type = "text/css">
#firstid
{
color:red;
    background-color:blue;
    font-size:25px;
    font-style:italics;
}
#firstid:hover
{
color:white;
}
.firstclass
{
color:cyan;
    background-color:pink;
    font-size:35px;
    font-face:verdana;
}
</style>

<script type = "text/javascript">
document.write("<h1>Hello<br/></h1> ");

</script>
</head>
<body>
<pre id="firstid">
To do:
1. Class
2. ID
3. Function
</pre><br/>
<p class="firstclass">
Harry Potter is a wizard.
</p>

<button type="button" onClick="changeBG()">Change To do</button>
</body>


<script type = "text/javascript">

function changeBG()
{

    document.body.style.background="green";
    var x = document.getElementById("firstid");
    x.style.color="brown";
    x.style.fontSize="10px";
}

</script>

</html>