同一页面的javascript的变量怎么在页面中显示

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了同一页面的javascript的变量怎么在页面中显示相关的知识,希望对你有一定的参考价值。

例如
<html>
<head>

<title>主界面</title>
<script type="text/javascript">
function test()

var sName = "周杰伦";

</script>
</head>
<body>
// 怎么在这个位置显示sName的值?
</body>
</html>

javascript的value属性可以设置表单元素的显示值,innerHTML属性可以设置文本元素的显示文字,因此可以将某个变量赋值给页面中的元素。下面进行实例演示:

1、创建Html元素

<div class="box">
<span>实例演示:点击按钮后在文本框显示变量的值</span><br>
<div class="content">
input元素:<input type="text" id="test1"><br>
span元素: <span id = "test2"></span><br>
    <input type='button' onclick='test()' value='显示变量的值' />
</div>
</div>

2、设置css样式

div.boxwidth:300px;padding:20px;margin:20px;border:4px dashed #ccc;
div.box>spancolor:#999;font-style:italic;
div.contentwidth:250px;margin:10px 0;padding:20px;border:2px solid #ff6666;
input[type='button']height:30px;margin:10px;padding:5px 10px;
input[type='text']width:100px;padding:5px 10px;margin:5px 0;border:1px solid #ff9966;

3、编写jquery代码

function test()
var name1 = "表单元素的值";
var name2 = "文本元素的值";
document.getElementById("test1").value = name1;
document.getElementById("test2").innerHTML = name2;

4、观察效果

4.1 初始样式

4.2 点击按钮之后

参考技术A 方法很多:
1.直接输出:
<script language="javascript">
document.write(sName);
</scritp>
2.使用innerHTML属性:
<span id="span_name"></span>
<script language="javascript">
document.getElementById("span_name").innerHTML=sName;
</scritp>追问

说清楚一点好么 我刚刚学 把我那个例子补完就好了

追答

照着代码写就可以 详细的不能在详细了 还要怎么详细

本回答被提问者采纳

在同一页面上将javascript变量传输到php而不提交

【中文标题】在同一页面上将javascript变量传输到php而不提交【英文标题】:Transfer javascript variable to php on the same page without submitting 【发布时间】:2013-01-26 07:07:35 【问题描述】:

您好,我想将我的 javascript 变量传输到 php,就像实时传输一样。在文本框中输入的用户输入将被传输到 php 脚本以检查它是否在数据库中。然后,输出将显示在另一个只读文本框中。

【问题讨论】:

你不能这样做。 javascript 是客户端,php 是服务器端...您基本上是在寻找 AJAX。 【参考方案1】:

您必须为此使用AJAX。如果您能理解客户端(JavaScript)和服务器端(PHP)脚本之间的区别,我希望它会更好。类似的问题已经回答了很多问题。请谷歌,你可以找到他们的例子。另请参阅Client side vs server side basics。

Difference Between Client Side & Server Side Programming

【讨论】:

【参考方案2】:

您需要研究 AJAX。作为首字母缩写词听起来很吓人,但它很容易使用。

在您的 Javascript 中(使用 jQuery,并假设您有一个 id 为“searchbox”的文本框:

$.get("search.php", "term":$("#searchbox"), function(data) 
    alert(data);

在您的 PHP 文件“search.php”中:

echo "Yay! " . $_GET['term'] . " Woo!";

如果您在文本框的 keyup 事件上运行 javascript,它将实时获取数据。因此,如果您在框中输入:“Hello World”,您会收到一串烦人的消息框:

“耶!H Woo!”,“耶!He Woo!”,“耶!Hel Woo!”,“耶!Hell Woo!”...“耶!Hello World Woo!”

从那里开始,就是让 PHP 代码返回一些有用的东西。为此,请查看 JSON。从那里开始,只需编写 Javascript 来处理新的有用信息。

http://jquery.com/

http://api.jquery.com/jQuery.get/

http://www.json.org/

http://en.wikipedia.org/wiki/Ajax_(programming)

【讨论】:

我可以输入代码:"$.get("search.php", "term":$("#searchbox"), function(data) alert(data); " 到 search.php? 以及如何使用您提供的给定示例使用 keyup

以上是关于同一页面的javascript的变量怎么在页面中显示的主要内容,如果未能解决你的问题,请参考以下文章

php怎么获取当前页面 javascript的变量值

在 html 页面内的 javascript 中访问 django 表单变量

如何在 Drupal 的主分类页面中显​​示子术语?

Javascript 代码重定向到同一页面上的一个部门

如何在同一页面中使用相同的javascript过滤器两次使用不同的表?

Axure中怎么实现变量值在页面中的传递