浏览器兼容性问题Javascript

时间：2014-07-22 08:20:09

标签： javascript cross-browser compatibility

我得到了以下可在Mozilla Firefox中正常运行的Javascript代码，但它并不适用于Google Chrome。任何想法为什么会这样做？ 即使值为45，Chrome中的totalBMI（检查所有最后一个按钮将为您提供的值45大于26，因此结果应该是将hRisk div设置为display:-inline而不是display:none，如函数changeCss()可以。）它仍然认为它为0，因为它显示低风险消息。在Firefox中，它始终显示正确的答案。

Javascript代码：

function CalculateValue()  {
var age = +getAgeValue('age'),
    bmi = +getBmiValue('bmi'),
    fami = +getFamValue('fam'),
    diet = +getDietValue('diet'),
    totalBMI = age + bmi + fami + diet;
    totalBMI = parseFloat(totalBMI); 
    alert(totalBMI);
if (totalBMI > 26) {
    function changeCSS() {           
        document.getElementById("btn").onclick = function() {
        var hMessage = document.getElementById("hRisk");
        hMessage.style.display = 'inline';
        /*var newSpan = document.createElement("span");
        var newSpanText = document.createTextNode("Your main factors risk are "  );
        newSpan.appendChild(newSpanText);
        var pElem = document.getElementById("space");
        pElem.appendChild(newSpan); */
        }
    } 
    changeCSS();

} else if (totalBMI > 16 ) {
    function changeCSS() {           
        document.getElementById("btn").onclick = function() {
        var mMessage = document.getElementById("mRisk");
        mMessage.style.display = 'inline';
        }
    } 
    changeCSS();
} else {
    function changeCSS() {           
        document.getElementById("btn").onclick = function() {
        var lMessage = document.getElementById("lRisk");
        lMessage.style.display = 'inline';
        }
    } 
    changeCSS();
}
}



function getAgeValue()
{
    for (var i = 0; i < document.getElementsByName('age').length; i++)
{
    if (document.getElementsByName('age')[i].checked)
    {
        return document.getElementsByName('age')[i].value;
    }
}
}

function getBmiValue()
{
    for (var i = 0; i < document.getElementsByName('bmi').length; i++)
    {
        if (document.getElementsByName('bmi')[i].checked)
        {
            return document.getElementsByName('bmi')[i].value;
        }
    }
}    


function getFamValue()
{
    for (var i = 0; i < document.getElementsByName('fam').length; i++)
    {
        if (document.getElementsByName('fam')[i].checked)
        {
            return document.getElementsByName('fam')[i].value;
        }
    }   
}

function getDietValue()
{
    for (var i = 0; i < document.getElementsByName('diet').length; i++)
    {
        if (document.getElementsByName('diet')[i].checked)
        {
            return document.getElementsByName('diet')[i].value;
        }
    }     
}

HTML code：

<script src="jsbmi4.js"></script>
<title>Java</title>
<body>
    <form method="post" action="process.php" id="radioForm">
        <fieldset>
            <div>
                <label for="age" class="lClass"> <span class="span1"> How old are you?     </span>
                <input type="radio" id="age1" name="age" value="0">0-25
                <input type="radio" id="age1" name="age" value="5">26-40
                <input type="radio" id="age1" name="age" value="8">41-60
                <input type="radio" id="age1" name="age" value="10">60+
                </label> 
            </div>
        <div>   
            <label for="bmi"> <span class="span1"> What is your BMI? </span>
                <input type="radio" id="bmi1" name="bmi" value="0">0-25
                <input type="radio" id="bmi1" name="bmi" value="0">26-30
                <input type="radio" id="bmi1" name="bmi" value="9">31-35
                <input type="radio" id="bmi1" name="bmi" value="10">35+
            </label>
        </div>
        <div>   
            <label for="fam"> <span class="span1"> Does anybody in your family have diabetes? </span>
                <input type="radio" id="fam1" name="fam" value="0">No
                <input type="radio" id="fam1" name="fam" value="7">Grandparent
                <input type="radio" id="fam1" name="fam" value="15">Sibling
                <input type="radio" id="fam1" name="fam" value="15">Parent
            </label>
        </div>
        <div>   
            <label for="diet"> <span class="span1"> How would you describe your diet? </span>
                <input type="radio" id="diet1" name="diet" value="0">Low sugar
                <input type="radio" id="diet1" name="diet" value="0">Normal sugar 
                <input type="radio" id="diet1" name="diet" value="7">Quite high sugar
                <input type="radio" id="diet1" name="diet" value="10">High sugar
            </label>
        </div>  
        <div class="button">
            <input id="btn" type="button" value="Calculate" onclick="CalculateValue()"> 
        <!--    <input id="submit" type"submit" value="submit"> -->
        </div>
    </fieldset>         
</form> 
<div id="lRisk">
    <h2> Your Result </h2>
    <p> Your results show that you currently have a low risk of developing diabetes.     However, it is important that you maintain a healty lifestyle in terms of diet and exercise. </p>
</div>
<div id="mRisk">
    <h2> Your Result </h2>
    <p> Your results show that you currently have a medium risk of developing diabetes. For more information on your risk factors, and what to do about them, please visit our diabetes advice website at <a href="http://www.zha.org.zd">http://www.zha.org.zd.</a> </p>
</div>       
<div id="hRisk">
    <h2> Your Result </h2>
    <p>Your results show that you currently have a HIGH risk of developing diabetes.<span id="space"></span> We advice that you contact the Health Authority to discuss your risk factors as soon as you can. Please fill in our <a href="index2.html"> contact form</a> and a member of the Health Authority Diabetes Team will be in contact with you. </p>
</div>  
</body>

2 个答案:

答案 0 :(得分：0)

我只需要修改就是删除函数changeCSS（），只需添加if语句中的内容。

感谢Fuximus Foe。

JSCode就在这里。

 function getAgeValue()
{
for (var i = 0; i < document.getElementsByName('age').length; i++)
{
    if (document.getElementsByName('age')[i].checked)
    {
        return document.getElementsByName('age')[i].value;
    }
}
}

function getBmiValue()
{
for (var i = 0; i < document.getElementsByName('bmi').length; i++)
{
    if (document.getElementsByName('bmi')[i].checked)
    {
        return document.getElementsByName('bmi')[i].value;
    }
}
}    


function getFamValue()
{
for (var i = 0; i < document.getElementsByName('fam').length; i++)
{
    if (document.getElementsByName('fam')[i].checked)
    {
        return document.getElementsByName('fam')[i].value;
    }
}   
}

function getDietValue()
{
for (var i = 0; i < document.getElementsByName('diet').length; i++)
{
    if (document.getElementsByName('diet')[i].checked)
    {
        return document.getElementsByName('diet')[i].value;
    }
}      
}

function CalculateValue()  {
var age = +getAgeValue('age'),
    bmi = +getBmiValue('bmi'),
    fami = +getFamValue('fam'),
    diet = +getDietValue('diet'),
    totalBMI = age + bmi + fami + diet;
    totalBMI = parseFloat(totalBMI); 
    alert(totalBMI);
if (totalBMI > 26) {           
        document.getElementById("btn").onclick = function() {
        var hMessage = document.getElementById("hRisk");
        hMessage.style.display = 'inline';
        /*var newSpan = document.createElement("span");
        var newSpanText = document.createTextNode("Your main factors risk are "  );
        newSpan.appendChild(newSpanText);
        var pElem = document.getElementById("space");
        pElem.appendChild(newSpan); */
        }         
} else if (totalBMI > 16 ) {
        document.getElementById("btn").onclick = function() {
        var mMessage = document.getElementById("mRisk");
        mMessage.style.display = 'inline';
        } 
} else {
        document.getElementById("btn").onclick = function() {
        var lMessage = document.getElementById("lRisk");
        lMessage.style.display = 'inline';
        } 
    }
}

答案 1 :(得分：-1)

考虑使用input自关闭标记，您尚未关闭任何<input ... />代码。您错放了关闭</label>标记。

你不应该重新声明一个只是在下一行使用的功能。 不确定，当您已经有答案时，为什么你会绑定到onclick事件，只有当用户点击calculate按钮两次时才会有效。

在解决这个问题之后，删除changeCSS函数并立即执行他们的代码可以解决问题。这是因为无论光标是否到达，Chrome都会抓取函数的第一个定义，因此在所有三种情况下只执行第一个changeCSS函数; firefox读取正确的定义。

JAVASCRIPT：

    function CalculateValue() {
    var totalBMI = 0+parseInt(getAgeValue('age'))
            +parseInt(getBmiValue('bmi'))
            +parseInt(getFamValue('fam'))
            +parseInt(getDietValue('diet'));
    alert(totalBMI);
    if (totalBMI > 26) {
        //function changeCSS(){
            //document.getElementById("btn").onclick = function () {
                var hMessage = document.getElementById("hRisk");
                hMessage.style.display = 'block';
                /*var newSpan = document.createElement("span");
                var newSpanText = document.createTextNode("Your main factors risk are "  );
                newSpan.appendChild(newSpanText);
                var pElem = document.getElementById("space");
                pElem.appendChild(newSpan); */
            //}
        //}
        //changeCSS();
    } else if (totalBMI > 16) {
        //function changeCSS(){
            //document.getElementById("btn").onclick = function () {
                var mMessage = document.getElementById("mRisk");
                mMessage.style.display = 'block';
            //}
        //}
        //changeCSS();
    } else {
        //function changeCSS(){
            //document.getElementById("btn").onclick = function () {
                var lMessage = document.getElementById("lRisk");
                lMessage.style.display = 'block';
            //}
        //}
        //changeCSS();
    }
}



function getAgeValue() {
    for (var i = 0; i < document.getElementsByName('age').length; i++) {
        if (document.getElementsByName('age')[i].checked) {
            return document.getElementsByName('age')[i].value;
        }
    }
    return 0;
}

function getBmiValue() {
    for (var i = 0; i < document.getElementsByName('bmi').length; i++) {
        if (document.getElementsByName('bmi')[i].checked) {
            return document.getElementsByName('bmi')[i].value;
        }
    }
    return 0;
}


function getFamValue() {
    for (var i = 0; i < document.getElementsByName('fam').length; i++) {
        if (document.getElementsByName('fam')[i].checked) {
            return document.getElementsByName('fam')[i].value;
        }
    }
    return 0;
}

function getDietValue() {
    for (var i = 0; i < document.getElementsByName('diet').length; i++) {
        if (document.getElementsByName('diet')[i].checked) {
            return document.getElementsByName('diet')[i].value;
        }
    }
    return 0;
}

HTML：

<body>
    <form method="post" action="process.php" id="radioForm">
        <fieldset>
            <div>
                <label for="age" class="lClass"><span class="span1"> How old are you?</span></label> 
                <input type="radio" id="age1" name="age" value="0"/>0-25
                <input type="radio" id="age1" name="age" value="5"/>26-40
                <input type="radio" id="age1" name="age" value="8"/>41-60
                <input type="radio" id="age1" name="age" value="10"/>60+
            </div>
        <div>   
            <label for="bmi"> <span class="span1"> What is your BMI? </span></label>
                <input type="radio" id="bmi1" name="bmi" value="0"/>0-25
                <input type="radio" id="bmi1" name="bmi" value="0"/>26-30
                <input type="radio" id="bmi1" name="bmi" value="9"/>31-35
                <input type="radio" id="bmi1" name="bmi" value="10"/>35+
        </div>
        <div>   
            <label for="fam"> <span class="span1"> Does anybody in your family have diabetes?</span></label>
                <input type="radio" id="fam1" name="fam" value="0"/>No
                <input type="radio" id="fam1" name="fam" value="7"/>Grandparent
                <input type="radio" id="fam1" name="fam" value="15"/>Sibling
                <input type="radio" id="fam1" name="fam" value="15"/>Parent
        </div>
        <div>   
            <label for="diet"> <span class="span1"> How would you describe your diet? </span></label>
            <input type="radio" id="diet1" name="diet" value="0"/>Low sugar
            <input type="radio" id="diet1" name="diet" value="0"/>Normal sugar 
            <input type="radio" id="diet1" name="diet" value="7"/>Quite high sugar
            <input type="radio" id="diet1" name="diet" value="10"/>High sugar
        </div>  
        <div class="button">
            <input id="btn" type="button" value="Calculate" onclick="CalculateValue()"/> 
        <!--    <input id="submit" type"submit" value="submit"> -->
        </div>
    </fieldset>         
</form> 
<div id="lRisk" style="display:none;">
    <h2> Your Result </h2>
    <p> Your results show that you currently have a low risk of developing diabetes.     However, it is important that you maintain a healty lifestyle in terms of diet and exercise. </p>
</div>
<div id="mRisk" style="display:none;">
    <h2> Your Result </h2>
    <p> Your results show that you currently have a medium risk of developing diabetes. For more information on your risk factors, and what to do about them, please visit our diabetes advice website at <a href="http://www.zha.org.zd">http://www.zha.org.zd.</a> </p>
</div>       
<div id="hRisk" style="display:none;">
    <h2> Your Result </h2>
    <p>Your results show that you currently have a HIGH risk of developing diabetes.<span id="space"></span> We advice that you contact the Health Authority to discuss your risk factors as soon as you can. Please fill in our <a href="index2.html"> contact form</a> and a member of the Health Authority Diabetes Team will be in contact with you. </p>
</div>  
</body>

和JSFiddle：http://jsfiddle.net/kWyx8/

相关问题
最新问题