Insert multiple elements on specific positions

Question

I'm trying to insert multiple elements on specific positions.

In this exemple (see under) I want to insert ItemA1 always on first place and Item A2 always on second place and so on. The probleme is that with the method parent.insertBefore(newSpan, parent.children[number]), it doesn't work if you check the radios from the end:/

Is there a way to "give an order" to elements that are created?

Thanks for any help:)

 function createItem(x,y){ let result = document.getElementById(x+"Rap") if(typeof(result) == 'undefined' || result == null){ let newSpan = document.createElement("span"); newSpan.setAttribute("id",x+"Rap") let newText = document.createTextNode("."); newSpan.appendChild(newText); document.getElementById("result").insertBefore(newSpan, document.getElementById("result").children[y]); } } function generateItem(x,y){ createItem(x,y); if (document.getElementById("NT"+x).checked === true){ document.getElementById(x+"Rap").remove(); } else{ document.getElementById(x+"Rap").innerHTML = document.querySelector("input[name="+x+"]:checked").value; } }

 #result{ margin-top: 10px; padding: 5px; border: solid black 1px; }

 <div> <div>itemA1 <input id="yesA1" name="A1" type="radio" value="item A1 = yes, " onchange="generateItem('A1',0)"/> <label for="yesA1">yes</label> <input id="noA1" name="A1" type="radio" value="item A1 = no, " onchange="generateItem('A1',0)"/> <label for="noA1">no</label> <input id="NTA1" name="A1" type="radio" value="item A1 = NT, " checked="checked" onchange="generateItem('A1',0)"/> <label for="NTA1">NT</label> </div> <div>itemA2 <input id="yesA2" name="A2" type="radio" value="item A2 = yes, " onchange="generateItem('A2',1)"/> <label for="yesA2">yes</label> <input id="noA2" name="A2" type="radio" value="item A2 = no, " onchange="generateItem('A2',1)"/> <label for="noA2">no</label> <input id="NTA2" name="A2" type="radio" value="item A2 = NT, " checked="checked" onchange="generateItem('A2',1)"/> <label for="NTA2">NT</label> </div> <div>itemB1 <input id="yesB1" name="B1" type="radio" value="item B1 = yes, " onchange="generateItem('B1',2)"/> <label for="yesB1">yes</label> <input id="noB1" name="B1" type="radio" value="item B1 = no, " onchange="generateItem('B1',2)"/> <label for="noB1">no</label> <input id="NTB1" name="B1" type="radio" value="item B1 = NT, " checked="checked" onchange="generateItem('B1',2)"/> <label for="NTB1">NT</label> </div> <div>itemB2 <input id="yesB2" name="B2" type="radio" value="item B2 = yes." onchange="generateItem('B2',3)"/> <label for="yesB2">yes</label> <input id="noB2" name="B2" type="radio" value="item B2 = no." onchange="generateItem('B2',3)"/> <label for="noB2">no</label> <input id="NTB2" name="B2" type="radio" value="item B2 = NT." checked="checked" onchange="generateItem('B2',3)"/> <label for="NTB2">NT</label> </div> <div id="result">Results: </div> </div>

Answer 1

This was mentioned in a comment by Kinglish , but here is an example of how you could loop through all of the radios and create your result output line any time a radio is clicked.

 document.querySelectorAll("input[type='radio']").forEach(radio => { radio.addEventListener("click", e => { let result = [] document.querySelectorAll("input[type='radio']:checked").forEach(c => result.push(`item ${c.name} = ${c.value}`)) document.querySelector("#result").innerHTML = `Results: ${result.filter(f =>.f.includes("NT")),join(", ")}` }) })

 #result{ margin-top: 10px; padding: 5px; border: solid black 1px; }

 <div> <div>itemA1 <label><input name="A1" type="radio" value="yes">yes</label> <label><input name="A1" type="radio" value="no">no</label> <label><input name="A1" type="radio" value="NT" checked>NT</label> </div> <div>itemA2 <label><input name="A2" type="radio" value="yes">yes</label> <label><input name="A2" type="radio" value="no">no</label> <label><input name="A2" type="radio" value="NT" checked>NT</label> </div> <div>itemB1 <label><input name="B1" type="radio" value="yes">yes</label> <label><input name="B1" type="radio" value="no">no</label> <label><input name="B1" type="radio" value="NT" checked>NT</label> </div> <div>itemB2 <label><input name="B2" type="radio" value="yes">yes</label> <label><input name="B2" type="radio" value="no">no</label> <label><input name="B2" type="radio" value="NT" checked>NT</label> </div> <div id="result">Results:</div> </div>

Following the logic of what you seemed to have before, we loop through all of the radio buttons and attach a click event listener first. When clicked, it will then loop through all of the :checked radio buttons and get the name and value of those radio buttons. Lastly, it concatenates all of the values and displays them.

Any checked radios with a value of 'NT' are ignored (which seems to currently be the case). Values are displayed in the order they appear on the page (which seems to fit the specific example you gave but may return mixed results if anything changes).

EDIT

While the above works just fine, below is a modified version of the JavaScript that uses map() to get the output of all of the checked radio buttons, rather than build an array via forEach() .

document.querySelectorAll("input[type='radio']").forEach(radio => {
  radio.addEventListener("click", e => {
    document.querySelector("#result").innerHTML = `Results : ${Array.from(document.querySelectorAll("input[type='radio']:checked")).map(m => `item ${m.name} = ${m.value}`).filter(f => !f.includes("NT")).join(", ")}`
  })
})