當輸入有值時，將類名添加到數字輸入

我使用純JS嘗試在輸入有值時向數字輸入添加類。 JS的第一部分（添加了「checked」狀態）正在工作，但添加類名稱（「selected」）的部分未被應用。任何想法我做錯了什麼？當輸入有值時，將類名添加到數字輸入

這是一個組合無線電和數字輸入，因此是額外的輸入類型。

function select_radio_item_other_button(text_obj, radio_but) 
{ 
    if (document.getElementById) 
    { 
     el = document.getElementById(radio_but); 
     if (el.checked) 
      return; 
     if (text_obj.value != '') 
      el.checked = true; 
     text_obj.className += " selected"; 
    } 
}

和HTML

<div class="other"> 
    <input type="radio" name="radio_21" id="radio_21_22" checked="checked"> 
    <label for="radio_21_22" id="radio_21_22_amt"> 
    <input type="number" style="padding-left:0;" name="radio_21_22_amt" id="radio_21_22_amt" value="" min="0" max="50000000" step="1" onblur="javascript:select_radio_item_other_button(this, 'radio_21_22')"> 
    </label> 
</div>

來源

2016-09-15 bad_juju

爲什麼我們回程的時候'el.checked'是truthy？如果我註釋掉這些行，我會看到它添加了類名......可能檢查單選按鈕的邏輯（由於標籤）需要重新做... –

「id」在頁面內必須是唯一的。您在標籤和輸入中都使用'id =「radio_21_22_amt」'，所以您的'document.getElementById（）'可能會返回_label_（id的第一次出現）而不是_input_。其他的東西：'el = document.get ...'創建一個_global_變量;使用_var_'var el = document.get ...'。除非你支持_ancient_瀏覽器，否則你現在不需要'if（document.getElementById）'測試。對於現代瀏覽器也使用'el.classList.add（「selected」）'而不是'+ ='字符串。 –

我創建了[這codepen]（http://codepen.io/anon/pen/ozxKRp），它似乎（對我來說）工作正常。我發佈的唯一修改是：1）確保id名稱是唯一的，2）放入第2個單選按鈕，以便測試它，3）不要預先檢查任何單選按鈕，4 ）在'el'上增加了'var' - 但是，我會對此做一個不同的_lot_，部分取決於您的目標瀏覽器受衆。內聯'style ='和inline'onevent ='通常是不好的做法;學習['addEventListener']（http://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener） –

括號是有點過，也許這樣的事情，

function select_radio_item_other_button(text_obj, radio_but) { 
    if (document.getElementById) { 
     el = document.getElementById(radio_but); 

     if (el.checked) { 
      return; 
     } 

     if (text_obj.value != '') { 
      el.checked = true; 
      text_obj.className += " selected"; 
     } 
    } 
}

而且不知道什麼if (document.getElementById)應該返回，但你到底在想在這裏完成？它評估爲真，但這似乎是一個意想不到的目的！

希望這會有所幫助！

來源

2016-09-15 21:32:47 alexmdodge

HTMLElement對象沒有'.valueOf（）'函數; 'el.value'是正確的。 JS _String_對象具有[valueOf（）]（https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String/valueOf），但由onblur處理程序傳遞的this是一個元素，而不是串。 –

啊，是的，我明白了！誤解了正在傳遞的內容。顯然，如果你添加一個類，那麼它將是一個DOM元素。 – alexmdodge

感謝所有 - 我用回覆的組合，而且這是工作：

function select_radio_item_other_button(text_obj, radio_but) 
{ 
    var el = document.getElementById(radio_but); 

    if (text_obj.value != '') { 
     el.checked = true; 
     text_obj.className += " selected"; 
    } 
}

來源

2016-09-15 22:18:59

當輸入有值時，將類名添加到數字輸入

回答

相關問題