更改與JavaScript不通過工作單選按鈕的顏色循環

Question

我有一個表格：

<form id='form' name='form' action='#' method='get'> 
     <input type="RADIO" name="test" value="1"> 
Yes 
     <br> 
     <input type="RADIO" name="test" value="2"> 
No 

</form> 

與此Javascript：

var amount= document.form.test.length; 
var radioButtons = document.form.test; 

for (var i = 0; i < amount; i++) { 
    var btn = document.createElement("button"); 
    var t = document.createTextNode("dsiable this button"); 
    btn.appendChild(t); 
    btn.setAttribute.onclick = function() { 
     radioButtons[i].disabled = true; 
    };  
    document.form.test[i].parentNode.insertBefore(btn, document.form.test[i].nextSibling); 
} 

這將創建文本按鈕「禁用此按鈕「，但是當點擊它時，沒有任何反應，並且控制檯中沒有顯示錯誤。我究竟做錯了什麼？

如果我在setAttribute部分添加了console.log('test')，它不會顯示出來，因此部分代碼永遠不會運行 - 爲什麼會這樣？

我也試過btn.setAttribute("onClick", "disable(radioButtons[i])")與功能

function disable(radioButtons) { //radioButtons.disabled = red; }

但這產生can't change null of undefined錯誤，我不明白。

我在做什麼錯？更改html不是一個選項。

Answer 1

嘗試使用 -

btn.onclick = function() { 
    radioButtons[i].style.color = red; 
}; 

Answer 2

款式無線電輸入靜態

這是你如何HTML應該是這樣的：

<input class="radio1" type="radio" name="any" id="r1" value="yes" onclick="which(this.value)"><label for="r1" >YES</label> 
<input class="radio1" type="radio" name="any" id="r2" value="no" onclick="which(this.value)" checked><label for="r2" >NO</label> </h2> 

這是你的CSS看起來應該像

input[type=radio] { 
display: none; 
} 

input[type=radio] + label::before { 
content: ''; 
display: inline-block; 
border: 2px solid white; 
border-radius: 50%; 
margin: 0 0.5em; 
} 

input[type=radio]:checked + label::before { 
background-color: #9F5BA4; 
} 

.radio1 + label::before { 
width: 1em; 
height: 1em; 
} 

現在你可以做你的jQuery選擇器，並更改邊框顏色和背景顏色

Answer 3

到事件偵聽器添加到按鈕，使用

btn.addEventListener('click', function() { 
    // some code 
}); 

Answer 4

我建議以下，分配的點擊處理程序的祖先<form>元素：

function disableRadiosByButton(){ 
 

 
    // get all the radio inputs with the name of 'test': 
 
    var radios = document.querySelectorAll('input[type=radio][name=test]'), 
 
    // create a <button> element: 
 
     button = document.createElement('button'), 
 
    // create the textNode for that <button> element: 
 
     text = document.createTextNode('disable the following input?'), 
 
    // initialise a variable for use, later: 
 
     tempButton; 
 

 
    // add the textNode to the <button>: 
 
    button.appendChild(text); 
 
    // set the type of the <button> to 'button': 
 
    button.type = 'button'; 
 
    // add the 'disable' class to the element (for styling and filtering): 
 
    button.classList.add('disable'); 
 

 
    // get the ancestor <form> element, add a click-handling function: 
 
    document.getElementById('form').addEventListener('click', function (e){ 
 
    // 'e' is the automagically-passed in Event-object, 
 
    // e.target is the element upon which the detected event ('click') was first triggered: 
 
    var target = e.target; 
 

 
    // if the target's lowercased tagName is 'button' and it has a class of 'disable': 
 
    if (target.tagName.toLowerCase() === 'button' && target.classList.contains('disable')) { 
 
     // prevent any default events from being triggered (form-submission being one 
 
     // possibility): 
 
     e.preventDefault(); 
 
     // disabling the clicked-element's nextElementSibling: 
 
     target.nextElementSibling.disabled = true; 
 
    } 
 
    }); 
 

 
    // iterating over the array-like NodeList of radio-inputs: 
 
    Array.prototype.forEach.call(radios, function (radio) { 
 
    // 'radio' is the current Node over which the forEach is iterating; 
 
    // cloning the created-<button> (cheaper than re-creating one): 
 
    tempButton = button.cloneNode(true); 
 
    // inserting the newly-cloned <button> before the relevant radio-input: 
 
    radio.parentNode.insertBefore(tempButton, radio); 
 
    }); 
 
} 
 

 
// calling the function: 
 
disableRadiosByButton();

<form id='form' name='form' action='#' method='get'> 
 
    <input type="RADIO" name="test" value="1" />Yes 
 
    <br> 
 
    <input type="RADIO" name="test" value="2" />No 
 

 
</form>

或者，相反，切換無線電INP UTS：

// source: DOM node, the input to be disabled by the created <button>, 
 
// text: String, the text of the created <button> element. 
 
function addButtonBefore(source, text) { 
 
    var button = document.createElement('button'), 
 
    text = document.createTextNode(text); 
 
    button.appendChild(text); 
 

 
    button.addEventListener('click', function(e) { 
 
    e.preventDefault(); 
 
    // caching the current disabled-state (Boolean, true/false): 
 
    var state = source.disabled; 
 
    // inverting the current state, true becomes false, and vice-versa: 
 
    source.disabled = !state; 
 
    }); 
 

 
    source.parentNode.insertBefore(button, source); 
 
} 
 

 
Array.prototype.forEach.call(document.querySelectorAll('input[type=radio][name=test]'), function(radio) { 
 
    addButtonBefore(radio, 'toggle the following button'); 
 
});

<form id='form' name='form' action='#' method='get'> 
 
    <input type="RADIO" name="test" value="1" />Yes 
 
    <br> 
 
    <input type="RADIO" name="test" value="2" />No 
 

 
</form>

參考文獻：

• Array.prototype.forEach()。
• document.createElement()。
• document.createTextNode()。
• Element.classList。
• Element.nextElementSibling()。
• Function.prototype.call()。
• node.insertBefore()。
• String.prototype.toLowerCase()。