以下是javascript代码
var text;
var name;
window.onload = init;
function init() {
var button = document.getElementById("submitButton");
text = document.getElementById("nameTextInput");
button.onclick = handleButtonClick;
}
function handleButtonClick() {
if (text.value == "") {
alert("oops !! Enter Name");
}
else {
var content = document.getElementById("content");
content.removeChild(h4);
content.removeChild(img);
content.removeChild(form);
name = document.getElementById("name");
name.innerHTML = text.value + ", I am tracking you at ";
getMyLocation();
}
}
当我单击按钮时,元素会被删除,但namediv不会显示任何内容。它在IE8上运行,但在chrome、safari和opera中却步履蹒跚。
以下是HTML:-
<body>
<div class="topMiddle">Locate ME ;-)
</div>
<div id="content" class="content">
<h4 id="h4">Your Name</h4>
<img id ="img" src="rows-hand-.png" alt="arrow image" height="70" width="70" />
<form id="form">
<input type="text" id="nameTextInput" size="40" placeholder="Enter your name dear" class="inputTextClass">
<input type="button" id="submitButton" value="Submit" class="inputButtonClass">
</form>
<div id="name" class="name">
</div>
<div id="user" class="user">
<div id="map_canvas"></div>
</div>
<div id="me" class="me">
</div>
</div>
以下是CSS:-
.content
{
text-align:center;
margin-top:10px;
}
h4
{
color: #E9E9E9;
}
.inputTextClass
{
width:150px;
}
.inputButtonClass
{
margin-top:20px;
width:80px;
}
.name
{
color:#000;
font-size:16px;
}
编辑
这是在线链接:-http://rdinvent.com/locateMe.html
此代码不应该工作,因为您没有定义变量h4
、img
和form
。
content.removeChild(h4);
content.removeChild(img);
content.removeChild(form);
它之所以能在IE8中工作,是因为默认情况下,IE会为具有相同名称的id
属性的每个元素生成全局JavaScript变量。因此h4
、img
和form
等效于IE中的以下代码
h4 = document.getElementById('h4')
img = document.getElementById('img')
form = document.getElementById('form')
只要添加这个,代码也可以在其他浏览器中工作。
这里发生的情况是,实际上并不是使用自己的变量,名为name
,而是全局对象window
的属性(名为name
(,因此这相当于使用window.name
,它是一个字符串,不能设置为任何其他类型(浏览器强制执行(。因此,当您将其设置为div时,它会被转换为一个字符串,而该字符串上没有innerHTML属性,因此您将使用该名称设置一个新属性,但该属性不会起任何作用。
你可以做两件事:
- 您可以将全局变量
name
重命名为不在window
对象中的内容(如name1
或inputName
( - 您可以将所有代码放入一个函数中并运行该函数。这将创建一个新的范围,您的变量将覆盖并隐藏全局范围
(function(){ /* your code goes here */ })();
编辑:
正是这个name
把一切都搞砸了:
name = document.getElementById("name");
将该行和以下内容替换为:
document.getElementById("name").innerHTML = text.value + ", I am tracking you at ";
当然,一开始就去掉var name;
。
name
是全局属性(window.name(,否则不应在全局范围中使用。
是表单外的div"名称"。
在浏览器中启用javascript。。。检查此链接以获取参考
调整图像、JavasScript和其他web内容设置
并非所有浏览器都支持直接设置innerHTML
或innerText
。您可以做的是创建一个文本元素并作为子元素进行追加。