在javascript中如何实现单击按钮将文本框中输入的内容显示在页面上?
比如一个helloworld程序，在文本框输入内容之前，网页页面上内容为helloworld，在文本框输入“您好”时，单击按钮，显示内容则为”helloworld您好“，...
比如一个hello world程序，在文本框输入内容之前，网页页面上内容为hello world，在文本框输入“您好”时，单击按钮，显示内容则为”hello world 您好“，最好是纯静态web应用！
<script language="JavaScript">
function Display()
{
var name = $(".username").val();
$("h1").html("hello world" + name);
}
</script>
<input type="button" value="查看" onclick="Display()"><br/>
<h1></h1>
<br/>
<div id="ad_wordle_01" class="public_ad"></div>
<h3 class="tp09 pt10 tp05"></h3>
<h3 class="tp09 tp05 pb10"></h3>
<p class="tp03 qw03 tp05 sumry"></p>
改下这里面的内容就行！ 展开
<script language="JavaScript">
function Display()
{
var name = $(".username").val();
$("h1").html("hello world" + name);
}
</script>
<input type="button" value="查看" onclick="Display()"><br/>
<h1></h1>
<br/>
<div id="ad_wordle_01" class="public_ad"></div>
<h3 class="tp09 pt10 tp05"></h3>
<h3 class="tp09 tp05 pb10"></h3>
<p class="tp03 qw03 tp05 sumry"></p>
改下这里面的内容就行！ 展开
4个回答
展开全部
文本框内容显示在指定地方：就是一个dom内容转移的操作，使用Jquery获取原生js都很好实现，配合具体js事件实现。具体操作如下：
//假定文本框的id='mytext',指定显示区域的id='show'
//div/span/p等节点，不是文本元素
function fun(){
getEle('show').innerHTML =getEle('mytext').value;
}
function getEle(id){
return document.getElementById(id);
}
<!--button click 触发-->
<input type='text' id='mytext'/>
<input type='button' onclick='fun();' value="button"/>
<!--input onblur 触发-->
<input type='text' id='mytext' onblur="fun();"/>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<script>
function show(){
var show = document.getElementById("showContent");//显示文本的对象
var content = document.getElementById("content");//输入文字的对象
show.innerHTML += content.value;//把两个相连接
}
</script>
<h1 id="showContent">Hello World!</h1>
<input id="content" name="content"/>
<button onClick="show()">把内容加载在页面上</button>
追问
你会错意思了，不是把每次结果相加，而是每次查询的结果都是一对一的！
追答
//那就把加号去掉就行了
show.innerHTML = content.value;
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<script type="text/javascript">
window.onload = function(){
var submit = document.getElementById("submit");
var text = document.getElementById('in');
var target = document.getElementById('target');
submit.onclick = function(e){
if(text.value !=""){
target.textContent = text.value;
}
};
};
</script>
<body>
<input type='text' id="in" /> <input type='button' id="submit" value="提交"/><br/>
<span style="color:red">hello world</span><span id="target" style="color:green;padding-left:10px;"></span>
</body>
</html>
更多追问追答
追问
为空的时候结果不会清除，即前一次结果被保留！
追答
现在就是这样的哦。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<input type=text id="hd" name="hd" value="hello world">
<input type=text id="nh" name="nh" value="您好">
<input type = "button" value="替换按钮" onclick="changeName();"/>
<javascript>
function changeName(){
var changeVal = document.getElementById("nh").value;
var hdVal = document.getElementById("nh").value;
document.getElementById("hd").value = hdVal+changeVal;
}
</javascript>
<input type=text id="nh" name="nh" value="您好">
<input type = "button" value="替换按钮" onclick="changeName();"/>
<javascript>
function changeName(){
var changeVal = document.getElementById("nh").value;
var hdVal = document.getElementById("nh").value;
document.getElementById("hd").value = hdVal+changeVal;
}
</javascript>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
