使用IE8的Javascript，但不使用chrome、safari和其他最新浏览器_Javascript_Html_Css

使用IE8的Javascript，但不使用chrome、safari和其他最新浏览器

javascript html css

使用IE8的Javascript，但不使用chrome、safari和其他最新浏览器,javascript,html,css,Javascript,Html,Css,下面是javascript代码 var text; var name; window.onload = init; function init() { var button = document.getElementById("submitButton"); text = document.getElementById("nameTextInput"); button.onclick = handleButtonClick; } function handleButton

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

当我单击按钮时，元素被删除，但是name 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>

编辑

这里是在线链接：-

并非所有浏览器都支持直接设置

innerHTML

或

innerText

。您可以创建一个文本元素并作为子元素追加。

并非所有浏览器都支持直接设置

innerHTML

或

innerText

。您可以做的是创建一个文本元素并作为子元素追加。

编辑：

就是这个

名字

把一切都搞砸了：

name = document.getElementById("name");

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

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

当然，删除

var名称在开头
name
是全局属性（window.name），否则不应在全局范围内使用。
编辑：
就是这个名字
把一切都搞砸了：
name = document.getElementById("name");

将该行和以下内容替换为：
document.getElementById("name").innerHTML = text.value + ", I am tracking you at ";

当然，删除var名称在开头
name
是全局属性（window.name），不应在全局范围内使用，否则。
是表单外部的div“name”
 是表单外的div“name”
 此代码不应该工作，因为您没有定义变量h4
、img
和表单

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')

只要添加这个，代码也会在其他浏览器中工作。
此代码不应该工作，因为您没有定义变量h4
、img
和表单

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')

只要添加这个，代码也可以在其他浏览器中使用。在浏览器中启用javascript。。。
请检查此链接以供参考
在浏览器中启用javascript。。。
请检查此链接以供参考
这里发生的事情是，您实际上没有使用自己的变量命名为名称，但是全局对象窗口命名为名称的属性，因此，它相当于使用window.name
，这是一个字符串，不能设置为任何其他类型（浏览器强制）。因此，当您将其设置为div时，它将转换为字符串，而字符串上没有innerHTML属性，因此您将使用该名称设置一个新属性，而该名称不起任何作用
你可以做两件事：
您可以将全局变量name
重命名为不在窗口中的对象（如name1
或inputName
）
您可以将所有代码放入一个函数中并运行该函数。这将创建一个新的作用域，您的变量将覆盖并隐藏全局变量
这里发生的事情是，您实际上没有使用自己的名为名称的变量，，而是全局对象的属性，窗口名为名称，因此，它相当于使用window.name
，这是一个字符串，不能设置为任何其他类型（浏览器强制）。因此，当您将其设置为div时，它将转换为字符串，而字符串上没有innerHTML属性，因此您将使用该名称设置一个新属性，而该名称不起任何作用
你可以做两件事：
您可以将全局变量name
重命名为不在窗口中的对象（如name1
或inputName
）
您可以将所有代码放入一个函数中并运行该函数。这将创建一个新的作用域，您的变量将覆盖并隐藏全局变量
您收到了什么错误消息？content.removeChild（h4）？除非定义了h4
、img
和form
，否则它将抛出错误。@JiminP，它不会抛出错误。顺便说一句，我现在已经定义了它们，但是name div仍然是空的，没有显示任何内容。我已经用服务器更新了帖子link@Pankaj请看我编辑过的答案。问题是你在JS代码中使用的name
。你会收到什么错误消息？content.removeChild（h4）？除非定义了h4
、img
和form
，否则它将抛出错误。@JiminP，它不会抛出错误。顺便说一句，我现在已经定义了它们，但是name div仍然是空的，没有显示任何内容。我已经用服务器更新了帖子link@Pankaj请看我编辑过的答案。问题是你在JS代码中使用的名称
。Chrome绝对允许你设置innerHTML
。他的问题完全在别的地方。Chrome绝对允许你设置innerHTML
。他的问题完全是其他地方的问题。你说得对，但它已经在Chrome中运行了（我刚刚对它进行了jsfiddle）。伙计，我尝试了这些var的名称，但仍然没有显示任何内容：-（用服务器链接更新了帖子。请自己检查这里。在IE8中，它显示输入的名称，而在其他浏览器中，它只是不显示。）up@PankajUpadhyay看看我编辑过的答案。问题是你在JS代码中使用的名称。@Rodolphe，你是对的，伙计，现在可以了