<head>
<script type="text/javascript">
function page_onload(){
document.getElementById("name").value = "XXX小明"
}
</script>
</head>
<body onload="page_onload()">
<input id="name" name="name" type="text" value="" />
</body>
</html>
将id为name选框设置为:XXX小明
自己把这段代码在浏览器上运行一下,就明白了。
这个很简单,LZ稍微研究下就能写出来。
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title>简单计算器</title>
</head>
<body>
<input placeholder="数字1" id="num1" />
<select id="rule">
<option value="add">+</option>
<option value="sub">-</option>
<option value="multi">*</option>
<option value="division">/</option>
</select>
<input placeholder="数字2" id="num2" /> =
<input placeholder="结果" disabled="disabled" id="result" />
<button id="calcBtn" onclick="execute()">计算</button>
<script>
/**
* 执行计算,提取数据,交给计算函数
*/
function execute() {
var num1 = document.getElementById("num1").value
var num2 = document.getElementById("num2").value
var rule = document.getElementById("rule").value
var rs = calc(num1, num2, rule)
var result = document.getElementById("result")
result.value = rs
}
/**
* 计算函数,简单策略模式,严格来说应该给每个算法抽象接口。
* @param {Object} num1
* @param {Object} num2
* @param {Object} rule
*/
function calc(num1, num2, rule) {
num1 = parseFloat(num1)
num2 = parseFloat(num2)
if (isNaN(num1) || isNaN(num2)) {
return "非法的操作数"
}
switch (rule) { //简单选中算法规则
case "add":
return add(num1, num2)
case "sub":
return sub(num1, num2)
case "multi":
return multi(num1, num2)
case "division":
return division(num1, num2)
default:
return "不支持的运算符"
}
}
/**
* 加法规则,操作数必须合法。
* @param {Object} num1
* @param {Object} num2
*/
function add(num1, num2) {
return num1 + num2
}
/**
* 减法,对于js和java这种方法有财务精度bug
* @param {Object} num1
* @param {Object} num2
*/
function sub(num1, num2) {
return num1 - num2
}
/**
* 乘法
* @param {Object} num1
* @param {Object} num2
*/
function multi(num1, num2) {
return num1 * num2
}
/**
* 除法
* @param {Object} num1
* @param {Object} num2
*/
function division(num1, num2) {
if (num2 == 0) {
return "除数不能为零"
}
return num1 / num2
}
</script>
</body>
</html>
你查查document.write是什么意思,如果使用不合理它会把当前页面清空然后再输出,所以才会出现select标签不见了。一般的话,只有在页面加载的时候才会使用document.write这个函数,如果你在方法中调用这个方法,由于此时的document已经加载而且分析完了,那么document.write()将会重新加载document,而且在加载之前它会把以前加载的东西清除掉。这就是问什么你的select标签不见得原因。
对于你的程序你可以把要加载的东西用innerHTML输出到一个div中,这样的话就没有问题了,而且也比较的规范。