Question

以下是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

Answer 1

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

只需添加此代码，代码也可以在其他浏览器中使用。

Answer 2

这里发生的事情是你不实际上使用你自己的变量命名为name，但是 a window的全局对象 name的属性，因此它等同于使用window.name这是一个字符串，不能设置为任何其他类型（浏览器强制）。因此，当您将其设置为div时，它会转换为字符串，并且字符串上没有属性innerHTML，因此您要设置一个具有该名称的新属性，该属性不执行任何操作。

你可以做两件事：

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

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

Answer 3

修改

正是这个name让一切都搞砸了：

name = document.getElementById("name");

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

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

当然，请在开头删除var name;。

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

Answer 4

你的div“名字”在表格之外吗？

Answer 5

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

Adjusting images, JavasScript, and other web content settings

Answer 6

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

Javascript在IE8中工作但不是chrome和safari以及其他最新的浏览器

6 个答案: