可以在IE8中使用Javascript，但不能在chrome和safari等最新浏览器中使用

Javascript working in IE8 but not chrome and safari and other latest browsers

本文关键字：safari 浏览器 chrome 最新 Javascript IE8 但不能      更新时间：2023-09-26

以下是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属性，因此您将使用该名称设置一个新属性，但该属性不会起任何作用。

你可以做两件事：

  1. 您可以将全局变量name重命名为不在window对象中的内容(如name1或inputName(
  2. 您可以将所有代码放入一个函数中并运行该函数。这将创建一个新的范围，您的变量将覆盖并隐藏全局范围
(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。您可以做的是创建一个文本元素并作为子元素进行追加。

相关文章：