CODEWITHSUNDEEP
javascripthtml
Yiannis
Yiannis

Reputation: 121

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

I have this code

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

//output+= '<input type="checkbox" value='+dataList+' name="box2">'  + '   ' + dataList+'   '+'<br><br>';
output1+=  '<input class="star star-1" value="1" id="star-1" type="radio" name= "star"'+numberOfSubquestion+'/>';
numberOfSubquestion++;
output2+=  '<input class="star star-2" value="2" id="star-2" type="radio" name= "star"'+numberOfSubquestion+'/>';
numberOfSubquestion++;
output3+=  '<input class="star star-3" value="3" id="star-3" type="radio" name= "star"'+numberOfSubquestion+'/>';
numberOfSubquestion++;
output4+=  '<input class="star star-4" value="4" id="star-4" type="radio" name= "star"'+numberOfSubquestion+'/>';
numberOfSubquestion++;
output5+=  '<input class="star star-5" 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.

Upvotes: 0

Views: 48

Answers (1)

mplungjan
mplungjan

Reputation: 177795

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 class="star star-${5-i}" value="${5-i}" id="star-${5-i}" type="radio" name="star${numberOfSubquestion}" />
 <label class="star star-${5-i}" for="star-${5-i}"></label>`).join("")
<div id="ratingDiv"></div>

Upvotes: 1

Related Questions