请教大家这个入门级的JS代码怎么写
要求是在html中的一段文字下边做几个和JS文件相关联的按钮，我大概做出来了，但是不知道为什么不能用，还有如何在JS上编辑指令可以让文字变大或者变小，麻烦大神解答一下,谢谢。HTML: Task1.html
<!doctype html>
<html lang="en">
<head>
<title> Task 2 </title>
<meta charset="utf-8">
<script src="task2.js"></script>
<style>
#paragraph {
padding: 10px;
margin-bottom: 10px;
background-color: silver;
border: 1px dashed black;
width: 50%; /* you can adjust this on Firefox if needed */
height: 200px;
overflow: hidden;
margin-top: 10px;
}
</style>
</head>
<body>
<h1> Put your name </h1>
<p id="paragraph"> Click buttons below to change this text style. </p>
<p>
<button id="Green">Green</button>
<button id="Blue">Blue</button>
<button id="Mono">Mono</button>
<button id="SansSerif">Sans Serif</button>
<button id="Serif">Serif</button>
<button id="Size++">Size++</button>
<button id="Size--">Size--</button>
</p>
</body>
</html>
JS: Task2.js
window.onload = pageLoad;
function pageLoad()
{
var green = document.getElementById("Green");
green.onclick = myFunction1;
var blue = document.getElementById("Blue");
blue.onlclick = myFunction2;
var mono = document.getElementById("Mono");
mono.onclick = myFunction3;
var sansserif = document.getElementById("SansSerif");
sansserif.onclick = myFunction4;
var serif = document.getElementById("Serif");
serif.onclick = myFunction5;
}
function myFunction1() {
var p = document.getElementById("paragraph");
p.style.color = "green";
}
function myFunction2() {
var p = document.getElementById("paragraph");
p.style.color = "blue";
}
function myFunction3() {
var p = document.getElementById("paragraph");
p.style.fontFamily = "monospace";
}
function.myFunction4() {
var p = document.getElementById("paragraph");
p.style.fontFaimly = "SansSerif";
}
function.myFunction5() {
var p = document.getElementById("paragraph");
p.style.fontFaimly = "Serif";
}
