英文:
Where are the training commas coming from in these radio butons?
问题
由于某些原因，选项的末尾有一个尾随逗号。这不在模板中，我不确定它是从哪里来的。
起初，我以为是某个脚本的问题，但即使在隔离后，问题似乎仍然存在。
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>
英文:
For some reasons end of the options has a trailing comma. It's not in the template, I am not sure where its coming from.
At first I thought it was some script, but even after isolation the issue seems to persists.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
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;
<!-- language: lang-css -->
.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: '';
}
<!-- language: lang-html -->
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<div id="app"></div>
</body>
</html>
<!-- end snippet -->
答案1
得分: 5
Arrays converted to string are automatically joined with ,
Use .join('') to bypass this behavior
英文:
Arrays converted to string are automatically joined with ,
Use .join('') to bypass this behaviour
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
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;
<!-- language: lang-css -->
.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: '';
}
<!-- language: lang-html -->
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<div id="app"></div>
</body>
</html>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论