Changing the names of radio buttons but they don't change when I run the code-CodePudding

I have this code

<input  value="5" id="star-5" type="radio" name="star" />
<label  value="5" for="star-5"></label readonly=" readonly">
<input  value="4" id="star-4" type="radio" name="star" />
<label  value="4" for="star-4"></label readonly=" readonly">
<input  value="3" id="star-3" type="radio" name="star" />
<label  value="3" for="star-3"></label readonly=" readonly">
<input  value="2" id="star-2" type="radio" name="star" />
<label  value="2" for="star-2"></label readonly=" readonly">
<input  value="1" id="star-1" type="radio" name="star" />
<label  value="1" for="star-1"></label readonly=" readonly">
</div>`);

//output = '<input type="checkbox" value=' dataList ' name="box2">'    '   '   dataList '   ' '<br><br>';
output1 =  '<input  value="1" id="star-1" type="radio" name= "star"' numberOfSubquestion '/>';
numberOfSubquestion  ;
output2 =  '<input  value="2" id="star-2" type="radio" name= "star"' numberOfSubquestion '/>';
numberOfSubquestion  ;
output3 =  '<input  value="3" id="star-3" type="radio" name= "star"' numberOfSubquestion '/>';
numberOfSubquestion  ;
output4 =  '<input  value="4" id="star-4" type="radio" name= "star"' numberOfSubquestion '/>';
numberOfSubquestion  ;
output5 =  '<input  value="5" id="star-5" type="radio" name= "star"' numberOfSubquestion '/>';
numberOfSubquestion  ;

document.getElementById("star-1").innerHTML=output1;
document.getElementById("star-2").innerHTML=output2;
document.getElementById("star-3").innerHTML=output3;
document.getElementById("star-4").innerHTML=output4;
document.getElementById("star-5").innerHTML=output5;

I wonder if I somehow can change the names before they run. Even though I change the names after when I run the code the names are the old ones. Because when I rerun the function the radio buttons act as they are one unit.

CodePudding user response：

Your HTML is invalid and input fields do not have innerHTML

Here is one way of creating what you want

const numberOfSubquestion = 1
document.getElementById("ratingDiv").innerHTML = Array.from({length:5})
 .map((_,i) => `<input  value="${5-i}" id="star-${5-i}" type="radio" name="star${numberOfSubquestion}" />
 <label  for="star-${5-i}"></label>`).join("")

<div id="ratingDiv"></div>

CodePudding user response：

try to put every button in a separate block like a div and then refer to that div "id" when you want to change the contents because right now you are referring to the button itself