在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>

改下这里面的内容就行!
展开
 我来答
思绪無痕
2015-05-31 · TA获得超过1016个赞
知道小有建树答主
回答量:415
采纳率:57%
帮助的人:324万
展开全部

文本框内容显示在指定地方:就是一个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();"/>
ouyangqunli101
2014-07-03 · TA获得超过667个赞
知道小有建树答主
回答量:421
采纳率:100%
帮助的人:188万
展开全部
<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;
本回答被提问者采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
zhou2003737
2014-07-03 · TA获得超过1427个赞
知道小有建树答主
回答量:1082
采纳率:77%
帮助的人:397万
展开全部
<!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>
更多追问追答
追问
为空的时候结果不会清除,即前一次结果被保留!
追答
现在就是这样的哦。
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
bj262948
2014-07-03 · 超过34用户采纳过TA的回答
知道答主
回答量:133
采纳率:100%
帮助的人:75.5万
展开全部
<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>
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 更多回答(2)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式