Javascript在IE8中工作但不是chrome和safari以及其他最新的浏览器
[英]Javascript working in IE8 but not chrome and safari and other latest browsers
问题描述
Following is the javascript code 
以下是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();
}
}
When I click the button, the elements are removed but name div doesn't show anything. 单击按钮时，元素将被删除，但名称div不显示任何内容。 It works on IE8 but in chrome, safari and opera it falters. 它适用于IE8，但在chrome，safari和opera中它蹒跚而行。
Following is the HTML :- 以下是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>
Following is the CSS :- 以下是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;
}
EDIT 编辑
Here is the online link :- http://rdinvent.com/locateMe.html 这是在线链接： - http://rdinvent.com/locateMe.html
6 个解决方案
解决方案1
3
This code shouldn't work, because you didn't define variables h4 , img and form . 此代码不起作用，因为您没有定义变量h4 ， img和form 。
content.removeChild(h4);
content.removeChild(img);
content.removeChild(form);
Why it does work in IE8, is because IE does by default make global JavaScript variables for each element with an id attribute, with the same name. 为什么它在IE8 中工作，是因为IE默认为具有id属性的每个元素创建全局JavaScript变量，具有相同的名称。 So h4 , img and form are equivalent to the following code in IE. 所以h4 ， img和form等同于IE中的以下代码。
h4 = document.getElementById('h4')
img = document.getElementById('img')
form = document.getElementById('form')
Just add this, and the code will work in the other browsers as well. 只需添加此代码，代码也可以在其他浏览器中使用。
解决方案2
2 2011-11-22 10:01:46
What is happening here is that you're not actually using your own variable named name , but a property of the global object window named name , so it's equivalent to using window.name which is a string and cannot be set to any other type (the browser forces that). 这到底是怎么发生的事情是，你实际上并没有使用自己的变量命名的name ， 但 全球对象的属性 window命名的name ，所以它等同于使用window.name这是一个字符串，不能设置任何其他类型（浏览器强制那个）。 So when you're setting it to the div it gets converted to a string and the string does not have a property innerHTML on it so you're setting a new property with that name which does nothing. 因此，当您将其设置为div时，它将转换为字符串，并且字符串上没有属性innerHTML，因此您要设置一个具有该名称的新属性，该属性不执行任何操作。
You can do two things: 你可以做两件事：
- You can rename your global variable
nameto something that's not inwindowobject already (likename1orinputName);您可以将全局变量name重命名为不在window对象中的name1（如name1或inputName）; - You can put all your code inside a function and run that. 您可以将所有代码放在函数中并运行它。 This would make a new scope and your variables would override and hide the global ones. 这将创建一个新范围，您的变量将覆盖并隐藏全局变量。
(function(){ /* your code goes here */ })();
解决方案3
0 已采纳 2011-11-22 09:21:26
EDIT: 编辑：
It's just this name which messes everything up: 正是这个name让一切都搞砸了：
name = document.getElementById("name");
Replace this line and the following with: 将此行和以下内容替换为：
document.getElementById("name").innerHTML = text.value + ", I am tracking you at ";
And of course, remove the var name; 当然，删除var name; at the beginning. 在开始。
name is a global property (window.name) and should not be used in the global scope otherwise. name是全局属性（window.name），否则不应在全局范围内使用。
解决方案4
0 2011-11-22 09:32:15
你的div“名字”是否在表格之外。
解决方案5
0 2011-11-22 09:41:58
Enable javascript in the browsers... Check this link for reference 在浏览器中启用javascript ...请查看此链接以供参考
Adjusting images, JavasScript, and other web content settings 调整图像，JavasScript和其他Web内容设置
解决方案6
-1 2011-11-22 08:59:22
Not all browsers support setting innerHTML or innerText directly. 并非所有浏览器都支持直接设置innerHTML或innerText 。 What you can do is create a text-element and append as a child. 你可以做的是创建一个文本元素并作为一个孩子追加。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.