Javascript / Ajax适用于Mozilla firefox，但不适用于Google Chrome和IE

Javascript / Ajax works in Mozilla firefox but not in Google Chrome and IE

本文关键字：适用于 Google 不适用 Chrome IE Ajax Mozilla firefox Javascript      更新时间：2023-09-26

我有一个适用于注册和登录的表单，并且正在使用javaScript Ajax提交它。

它在Mozilla firefox中运行良好，但在Chrome和IE中失败。

我正在尝试执行一个 AJAX 和 PHP 脚本，该脚本在文本框中使用电子邮件 ID 检查数据库。如果数据库中已存在电子邮件 ID，则显示密码字段（登录），否则显示其他必填字段。即姓名和电话号码（注册）。

我的主要问题是这部分不起作用。 

document.getElementById("contbtn").style="display:none";
document.getElementById("subbtn").style="display:block";

以下是javaScript Ajax代码：

<script>
function CheckUser()
{
    var uemail = document.getElementById("email").value;
    var xmlhttp;    
    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
var frm_element = document.getElementById('contbtn');
var vis = frm_element.style;
if (vis.display=='' || vis.display=='none') {
    vis.display = 'block';
}
else {
    vis.display = 'none';
}
var frm_element1 = document.getElementById('subbtn');
var vis1 = frm_element1.style;
if (vis1.display=='' || vis1.display=='none') {
    vis1.display = 'block';
}
else {
    vis1.display = 'none';
}
        }
    }
    xmlhttp.open("GET","check_user.php?emlid="+uemail,true);
    xmlhttp.send();
}
</script>
<body>
<form action="" method="post">
<ul class="contactform">
<li><label>Email</label><input name="email" id="email" required="" onblur=" return CheckUser();" type="text"></li>
<div id="txtHint"></div>
<li>
<input class="btn" id="contbtn" onclick="CheckUser();" type="button" value="Next" style="display: block;">
<input class="btn" id="subbtn" style="display: none;" type="submit" value="Submit">
</li>
</ul>
</form>

要实际回答为什么它不起作用的问题：

style是不能覆盖的HTMLElement属性。（它受到保护）。在您的第一个示例中，您尝试通过执行style = "string"来执行此操作。

然而，JavaScript代码中的样式是一个object，所有style attributes都可以作为object attributes使用。CSS代码和JavaScript之间的区别在于破折号。单独的单词在CSS代码中得到一个破折号-，并在JavaScript中通过camelCasing连接，例如：CSS代码中的border-width在JavaScript中变得borderWidth。

因此，要在 JavaScript 中正确设置或检索样式属性，请将style视为对象。 例如：

  1. Element.style.display = "block"
  2. Element.style.borderBottomColor = "#ff0000"

我让它工作只是替换了这个

    document.getElementById("contbtn").style="display:none"
    document.getElementById("subbtn").style="display:block";

跟

var frm_element = document.getElementById('contbtn');
var vis = frm_element.style;
if (vis.display=='' || vis.display=='none') {
    vis.display = 'block';
}
else {
    vis.display = 'none';
}
var frm_element1 = document.getElementById('subbtn');
var vis1 = frm_element1.style;
if (vis1.display=='' || vis1.display=='none') {
    vis1.display = 'block';
}
else {
    vis1.display = 'none';
}
相关文章：