I am at the end of my wits, for some reasons end of the options has a trailing comma….
its not in the template not sure where its coming from.
Really not sure where this is coming from, at first i thought it was some script, but even after isolation the issue seems to persists.
const options = [
"Easy to use",
"Loading",
"Fast",
"Others (Mention below)"
];
const template = `
<div class="question-title">sdjhaskjdhakjs</div>
<div class="question-options">${options?.map((option, i) => {
return `
<div class="question-option">
<input class="${"id"}-feedback-question-option" type="radio" id="${"id"}-${option}" name="option" value="${option}" ${
options.length === i - 1 ? "checked" : ""
} />
<label for="${"id"}-${option}">${option}</label>
</div>`;
})}</div>
`;
document.getElementById("app").innerHTML = template;.question-title {
position: relative;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
font-weight: normal;
font-size: 16px;
}
.question-options {
position: relative;
display: flex;
align-items: center;
justify-content: center;
font-weight: normal;
font-size: 12px;
gap: 10px;
flex-warp: warp;
}
.question-option {
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
}
.question-option>label {
margin-bottom: unset;
}
input[type=radio]::after {
content: '';
}<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<div id="app"></div>
</body>
</html>
>Solution :
Arrays converted to string are automatically joined with ,
Use .join('') to bypass this behaviour
const options = [
"Easy to use",
"Loading",
"Fast",
"Others (Mention below)"
];
const template = `
<div class="question-title">sdjhaskjdhakjs</div>
<div class="question-options">${options?.map((option, i) => {
return `
<div class="question-option">
<input class="${"id"}-feedback-question-option" type="radio" id="${"id"}-${option}" name="option" value="${option}" ${
options.length === i - 1 ? "checked" : ""
} />
<label for="${"id"}-${option}">${option}</label>
</div>`;
}).join('')}</div>
`;
document.getElementById("app").innerHTML = template;.question-title {
position: relative;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
font-weight: normal;
font-size: 16px;
}
.question-options {
position: relative;
display: flex;
align-items: center;
justify-content: center;
font-weight: normal;
font-size: 12px;
gap: 10px;
flex-warp: warp;
}
.question-option {
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
}
.question-option>label {
margin-bottom: unset;
}
input[type=radio]::after {
content: '';
}<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<div id="app"></div>
</body>
</html>