我是需要先点击第一个按钮获取www.baidu.com这个网址;然后将这个网址放在valu_1这个文本域里面显示出来;
如下是我想到的,但是点击后没反应;求大神指教;哪里写错了。应该怎么改;谢谢大神们哈;
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script>
function xul(){
var box_li1 = document.getElementById("xul_li1").innerHTML;
var box_value1 = document.getElementById("valu_1").value;
box_li1.innerHTML = box_value1.value;
};
</script>
</head>
<body>
<input value="点击后这里获取内容" id="valu_1"/>
<input type="button" value="获取LI1的内容" onclick="xul()"/>
<input type="button" value="获取li2的内容" />
<ul id="xul_1">
<li id="xul_li1">http://www.baidu.com</li>
<li id="xul_li2"><a href="http://www.163.com">这个是163网页</a></li>
</ul>
</body>
</html>
下面的算是同一个问题的延伸:
我想要的效果是,当我点击按钮二获取“163网页”这个值后,并交这个值赋给 文本域;但是在赋值的过程中会弹出一个prompt对话框;在对话框加输入内容,点击确定后;对话框中的内容会替代“163网页”这个值赋给文本域;
box_shuru = box_value2.value; 这是我想到的写法,但实行了没效果;
我又不想再将获值“163网页”再赋值的过程再走一次;要怎么写呀?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script>
function xul(){
var box_li1 = document.getElementById("xul_li1").innerHTML;
var box_value1 = document.getElementById("valu_1").value=box_li1;
alert(box_value1);
};
//第二个按钮点击后实行的代码
function xul2(){
var box_li2 = document.getElementById("xul_li2").innerHTML;
var box_value2= document.getElementById("valu_1").value=box_li2;
var box_xiaoxi = confirm("是否将要修改获取的值");
if(box_xiaoxi == true){
var box_shuru = prompt("要将获取的内容替换为?","请在这里输入要替换的内容")
if(box_shuru != null){
box_shuru = box_value2.value;
}
else{
alert("你选择了不替换内容");
}
}
};
</script>
</head>
<body>
<input value="点击后这里获取内容" id="valu_1"/>
<input type="button" value="获取LI1的内容" onclick="xul()"/>
<input type="button" value="获取li2的内容" onclick="xul2()"/>
<ul id="xul_1">
<li id="xul_li1">http://www.baidu.com</li>
<li id="xul_li2"><a href="http://www.163.com">这个是163网页</a></li>
</ul>
</body>
</html>
两个问题:
-
你的js代码在加载页面前执行了,也就是说,方法没有附加在目标上,应该移到body最后再去加载js代码:
<body> <input value="点击后这里获取内容" id="valu_1"/> <input type="button" value="获取LI1的内容" onclick="xul()"/> <input type="button" value="获取li2的内容" /> <ul id="xul_1"> <li id="xul_li1">http://www.baidu.com</li> <li id="xul_li2"><a href="http://www.163.com">这个是163网页</a> </li> </ul> <script> function xul(){ var box_li1 = document.getElementById("xul_li1").innerHTML; alert(box_li1); document.getElementById("valu_1").value = box_li1; }; </script>
2.document.getElementById("xul_li1").innerHTML和document.getElementById("valu_1").value就已经获取值了,不用再去.value或.innerHTML了
将函数包裹在立即执行中
<body>
<input value="点击后这里获取内容" id="valu_1"/>
<input type="button" value="获取LI1的内容" />
<input type="button" value="获取li2的内容" />
<ul id="xul_1">
<li id="xul_li1">http://www.baidu.com</li>
<li id="xul_li2"><a href="http://www.163.com">这个是163网页</a></li>
</ul>
<script>
(function(window){
document
.getElementById("valu_1")
.value = document.getElementById("xul_li1").innerHTML;
})(window);
</script>
</body>
这个称为立即执行的函数表达式
<body>
<input value="点击后这里获取内容" id="valu_1"/>
<input type="button" value="获取LI1的内容" />
<input type="button" id='btn2' value="获取li2的内容" onclick="foo()" />
<ul id="xul_1">
<li id="xul_li1">http://www.baidu.com</li>
<li id="xul_li2"><a id="target" href="http://www.163.com">这个是163网页</a></li>
</ul>
<script>
function foo(){
var text = document
.getElementById('target')
.innerHTML;
document
.getElementById('valu_1')
.value = prompt('check your input',text);
}
</script>
</body>