IF在Chrome中返回True，但在Safari中爲False

我的JavaScript函數在Chrome/Firefox與Safari/Opera中的評估方式不同。關於我的展示/隱藏的總體目標有很多答案（即here）。我寧願不要在這種情況下使用jQuery。無論如何，我想要解決的主要問題是條件在所有瀏覽器中都不是相同的。IF在Chrome中返回True，但在Safari中爲False

如果我在Chrome或Firefox中運行我的代碼，我會收到以下提示：「Foo - 新功能運行」。如果我在Safari或Opera中運行相同的代碼，我會收到警告：「Foo - Else Function Ran」。

我不知道爲什麼這是瀏覽器特定的。我很高興去閱讀一些額外的線程或文檔，如果這是其他地方解決，但我似乎無法弄清楚。

//編輯：根據要求，簡化代碼以僅顯示相關部分。

function bar(){ 
 
\t var addGiftVal = document.forms["subscribe"]["addGift"].value; 
 

 
\t if (addGiftVal == "yes"){ 
 
\t \t alert("Bar - Yes Function Ran."); 
 
\t } 
 
\t 
 
\t else { 
 
\t \t alert("Bar - Else Function Ran."); 
 
\t } 
 

 
} 
 

 
function foo(){ 
 
\t var subTypeVal = document.forms["subscribe"]["sub_type"].value; 
 
\t var subShipVal = document.forms["subscribe"]["ship_address_check"].value; 
 

 
\t if (subTypeVal == "renewal"){ 
 
\t \t alert("Foo - Renewal Function Ran."); 
 
\t \t } 
 
\t 
 
\t else if (subTypeVal == "new"){ 
 
\t \t alert("Foo - New Function Ran."); 
 
\t \t } 
 
\t 
 
\t else { 
 
\t \t alert("Foo - Else Function Ran."); 
 
\t \t } 
 
\t \t 
 
}

<body onLoad="foo();"> 
 

 
<form name="subscribe" id="subForm"> 
 
<p><input type="radio" name="sub_type" value="new" id="subf_new" checked="checked" onclick="foo();"> <label for="subf_new">New</label> 
 
<input type="radio" name="sub_type" value="renewal" id="subf_renewal" onclick="foo();"> <label for="subf_renewal">Renewal</label> 
 
<input type="radio" name="sub_type" value="gift" id="subf_gift" onclick="foo();"> <label for="subf_gift">Gift</label> </p> 
 

 
<p><input type="radio" name="ship_address_check" id="subf_same" value="same" checked="checked" onclick="foo();"><label for="subf_same">Same</label> </p> 
 
<p><input type="radio" name="ship_address_check" id="subf_different" value="different" onclick="foo();"><label for="subf_different">Different</label> </p> 
 

 
<p>Yes or No?</p> 
 
<input type="radio" name="addGift" id="subf_yes" value="yes" onclick="bar();"><label for="subf_yes">Yes</label> 
 
<input type="radio" name="addGift" id="subf_no" value="no" onclick="bar();"><label for="subf_no">No</label> 
 

 
<div id="submitBox"><input type="submit" value="Submit"> 
 
</form> 
 

 
</body>

來源

2014-12-31 Kilpatrick

什麼是document.forms [「subscribe」] [「sub_type」]？它是一個複選框，下拉，輸入，隱藏，否則？ –

你可以把這段代碼剁碎成一個小的，容易重現的例子嗎？ –

是「sub_type」選擇框？ – tanaydin

document.forms["subscribe"]["sub_type"]爲您提供了元素的集合，而不只是選擇之一。看起來，Chrome允許你在這個集合上調用.value並獲得選定的值，但一些瀏覽器不（我沒有Safari，但IE也失敗）。無論如何，在集合上調用.value並不是正確的方法。

您可以通過調用行動看到這一點：從您的瀏覽器開發工具的控制檯內

document.forms["subscribe"]["sub_type"]

和

document.forms["subscribe"]["sub_type"].value

。

您需要使用策略from these answers才能正確獲取選中的值。如果您不使用jQuery，那麼您必須通過循環遍歷整個組來查找選中的選項，或者如果您不關心舊瀏覽器，請使用querySelector。

$("[name=sub_type]:checked").val() 
// or 
document.querySelector("[name=sub_type]:checked").value 
// or 
var theValue; 
var elems = document.getElementsByName("sub_type"); 
for (var i = 0; i < elems.length; ++i) { 
    if (elems[i].checked) { 
     theValue = elems[i].value; 
     break; 
    } 
}

來源

2014-12-31 20:32:35

-2

的問題是，你是不是通過「本」的功能。嘗試打印出subTypeVal的值來了解我的意思 - 您會注意到，在Safari中，這會返回一個HTML元素列表，而在Chrome中，它（正確或錯誤地）推斷您需要單擊的元素。

爲了解決這個問題，通過「這」給你的函數是這樣的：

<input type="radio" name="sub_type" value="renewal" id="subf_renewal" onclick="foo(this);"><label for="subf_renewal">Renewal</label>

，並在你的JavaScript，添加參數到您的「富」功能：

function foo(myButton)

，並使用

var subTypeVal = myButton.value;

代替。

這裏看到的jsfiddle：http://jsfiddle.net/fprfk146/2/

來源

2014-12-31 20:11:03 benh

當我遇到問題時，實際上是通過了這個，但是在撕掉一些頭髮並閱讀了一些更多的問題之後，我按照上面的方式嘗試了它，看看它是否有幫助。 Chrome瀏覽器/火狐瀏覽器 - 無論是更好的還是更糟糕的 - 似乎都不在乎我是否使用它，添加/取走分號等。Safari不兼容或不兼容。謝謝你的例子。當我在Mac（10.7.5）的Firefox（34.0.5）上運行jsFiddle時，它返回「Boo：renewal」。但是，當我在Safari（6.1.6）中運行它時，它返回「Boo：undefined」。 – Kilpatrick

IF在Chrome中返回True，但在Safari中爲False

回答

相關問題