Javascript 在 IE8 中工作，但不适用于 chrome 和 safari 以及其他最新浏览器答案

【问题标题】：Javascript working in IE8 but not chrome and safari and other latest browsersJavascript 在 IE8 中工作，但不适用于 chrome 和 safari 以及其他最新浏览器
【发布时间】：2012-01-03 16:15:18
【问题描述】：

下面是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();
    }
}

当我单击按钮时，元素被删除，但名称 div 不显示任何内容。它可以在 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

【问题讨论】：

你得到什么错误信息？
content.removeChild(h4);?除非你定义了h4、img和form，否则会抛出错误。
@JiminP ，它不会抛出错误。顺便说一句，我现在已经定义了它们，但名称 div 仍然是空的，不显示任何内容。
我已经用服务器链接更新了帖子
@Pankaj Upadhyay 看看我编辑的答案。问题在于您在 JS 代码中使用的 name。

标签： javascript html css

【解决方案1】：

编辑：

只是这个name 搞砸了一切：

name = document.getElementById("name");

将此行和以下内容替换为：

document.getElementById("name").innerHTML = text.value + ", I am tracking you at ";

当然，删除开头的var name;。

name 是一个全局属性 (window.name)，否则不应在全局范围内使用。

【讨论】：

但是昨天当我使用名称时，它工作正常，可能是我昨天在函数中定义的，这就是没有问题的原因：P
这不是关键字（见我的回答），但你是对的，这就是这里的问题。
我的错。我很久以前遇到过这个问题，但我不记得一切。你完全正确。但我认为不使用关键字/保留词作为变量名仍然是一个很好的建议。

【解决方案2】：

这里发生的情况是您没有实际使用自己的变量名为name，而是一个属性 全局对象 window 命名为name，因此它相当于使用window.name，它是一个字符串，不能设置为任何其他类型（浏览器强制这样做）。因此，当您将其设置为 div 时，它会转换为字符串，并且该字符串上没有属性 innerHTML，因此您使用该名称设置了一个新属性，该名称什么都不做。

你可以做两件事：

您可以将全局变量 name 重命名为已不在 window 对象中的名称（例如 name1 或 inputName）；
您可以将所有代码放在一个函数中并运行它。这将创建一个新范围，您的变量将覆盖并隐藏全局变量。

(function(){
    /* your code goes here */
})();

【讨论】：

【解决方案3】：

此代码不应该工作，因为您没有定义变量 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')

只需添加此代码，该代码也可以在其他浏览器中运行。

【讨论】：

你说得对，但它已经在 Chrome 中工作了（我刚刚对它进行了修改）。
伙计，我尝试了这些 var，但仍然是名称，没有显示任何内容 :-(
用服务器链接 rdinvent.com/locateMe.html 更新了帖子。自己检查这里。在 IE8 中它显示输入的名称，而在其他浏览器中，它只是不显示
@Pankaj Upadhyay 看看我编辑的答案。问题在于您在 JS 代码中使用的 name。
@Rodolphe，你是正确的伙伴，现在它的工作......谢谢，谢谢大家

【解决方案4】：

在浏览器中启用 javascript... 检查此链接以供参考

Adjusting images, JavasScript, and other web content settings

【讨论】：

【解决方案5】：

您的 div “名称”是否在表单之外。

【讨论】：

【解决方案6】：

并非所有浏览器都支持直接设置innerHTML 或innerText。您可以做的是创建一个文本元素并作为子元素追加。

【讨论】：

Chrome 绝对允许你设置innerHTML。他的问题完全出在其他地方。