兄弟你几个地方写错了
1、js事件名称写错了。是onclick不是onclik,少了一个c
2、获取控件是getElementById,不是getElemenById,少了一个t
3、逻辑不够严谨,如果文本框没有输入内容就提示对了。
修改后的代码如下:
<!DOCTYPE html><html>
<head>
<mate charset="UTF-8">
<title>Insert title here</title>
<script>
//网页加载时直接生成随机数,
//该数在body加载钱就有了,所以
//用户点击猜时在对应函数内可以用。
//0<=x<1
var ran = parseInt(Math.random() * 100)
//无论此函数写在前面还是这里,它都是在用户点击按
//钮时调用的,它都比生成的随机数执行的晚。
function guess() {
//获取文本框里的值
var n = document.getElementById("num").value
var span = document.getElementById("result")
if (n == "") {
span.innerHTML = "请在文本框输入数字"
return
}
//判断该值是否为数字
if (isNaN(n)) {
//不是数字,给予提示
span.innerHTML = "请输入数字"
} else {
//是数字,和随机数比较
if (n < ran) {
span.innerHTML = "太小了"
} else if (n > ran) {
span.innerHTML = "太大了"
} else {
span.innerHTML = "对了"
}
}
}
</script>
</head>
<body>
<input type="text" id="num" />
<input type="button" value="猜" onclick="guess()" />
<span id="result"></span>
</body>
</html>
“函数的调用只能在自执行函数内”这句话是错的,应该说如果函数内的语句涉及页面DOM元素的操作,则函数的调用最好是放到自执行函数内,否则就可以放在外面执行。这是因为如果不放在自执行函数内而是放在外面立即执行,那么执行的时候页面的整个DOM结构很可能尚未完全加载到内存,这时候如果要对页面的某个DOM元素进行操作就很可能会失败(JS可能会认为这个元素不存在而返回null),所以为了保险起见就把函数的调用放到自执行函数内,因为自执行函数肯定是在页面全部调入内存后才执行的。而如果你的代码没有涉及任何页面元素的操作,自然就不需放到自执行函数内啦,比如下面这个:
function fun1(){return 1+2 //这个fun1函数只是进行最简单的数学运算,没有操作页面元素
}
console.log(fun1()) //所以fun1可以直接调用