英文:
How do I make the label text of an element bold in javascript?
问题
我的 HTML ：
```html
<div id="PDF">
<input type="checkbox" id="pdf" name="pdf" value="pdf">
<label for="pdf">PDF</label>
</div>
我的 JS ：
document.addEventListener('change',function(event){
if(event.target.id == "pdf"){
if(event.target.checked == true){
event.target.nextElementSibling.style.fontWeight = "bold";
}
else{
event.target.nextElementSibling.style.fontWeight = "normal";
}
}
});
遗憾的是，当我执行此代码时，我收到以下错误：
Uncaught TypeError: Cannot read properties of undefined (reading 'style')
如何修复此问题？
<details>
<summary>英文:</summary>
**My HTML :**
<div id="PDF">
<input type="checkbox" id="pdf" name="pdf" value="pdf">
<label for="pdf">PDF</label>
</div>
**My JS :**
document.addEventListener('change',function(event){
if(event.target.id == "pdf"){
if(event.target.checked == true){
event.target.label.style.fontWeight = "bold";
}
else{
event.target.label.style.fontWeight = "normal";
}
}
});
To my utter dismay, when I execute the code, I am greeted with this error:
> Uncaught TypeError: Cannot read properties of undefined (reading
> 'style')
How do I fix this issue?
</details>
# 答案1
**得分**: 2
这里有两个主要问题。首先，事件目标没有label属性。你应该明确选择label并更改样式。其次，我建议将事件侦听器添加到`#pdf` div而不是整个文档。这样，你就不需要检查ID，事件侦听器也不会在每次更改时触发。例如：
```javascript
document.getElementById("pdf").addEventListener("click", event => {
const label = document.querySelector("label[for=pdf]");
if(event.target.checked == true){
label.style.fontWeight = "bold";
}
else{
label.style.fontWeight = "normal";
}
})
英文:
There are two main issues here. Firstly, the event target has no attribute of label. You should just select the label explicitly and change the styles. Secondly, I would recommend adding the event listener to only the #pdf div rather than the whole document. This way, you won't need to check for the ID and the event listener won't be fired on every change. For example:
document.getElementById("pdf").addEventListener("click", event => {
const label = document.querySelector("label[for=pdf]");
if(event.target.checked == true){
label.style.fontWeight = "bold";
}
else{
label.style.fontWeight = "normal";
}
})
答案2
得分: 0
I hope this finds you well..
let divid = document.getElementById('PDF');
let checkid = document.getElementById('pdf');
let labelid = document.getElementById('label');
checkid.addEventListener("change", () => {
if(checkid.checked){
label.style.fontWeight='bold';
}
else{
label.style.fontWeight='normal';
}
});
<div id="PDF">
<input type="checkbox" id="pdf" name="pdf" value="pdf">
<label for="pdf" id="label"> PDF</label>
</div>
英文:
I hope this finds you well..
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
let divid = document.getElementById('PDF');
let checkid = document.getElementById('pdf');
let labelid = document.getElementById('label');
checkid.addEventListener( "change", () => {
if(checkid.checked){
label.style.fontWeight='bold';
}
else{
label.style.fontWeight='normal';
}
});
<!-- language: lang-html -->
<div id="PDF">
<input type="checkbox" id="pdf" name="pdf" value="pdf">
<label for="pdf" id="label"> PDF</label>
</div>
<!-- end snippet -->
答案3
得分: 0
尝试这段代码，实际上目标可以有多个标签。
所以属性不是 label，而是 labels。
<div id="PDF">
<input type="checkbox" id="pdf" name="pdf" value="pdf">
<label for="pdf">PDF</label>
</div>
<script>
document.addEventListener('change', function (event) {
if (event.target.id == "pdf") {
if (event.target.checked == true) {
event.target.labels[0].style.fontWeight = "bold";
} else {
event.target.labels[0].style.fontWeight = "normal";
}
}
});
</script>
英文:
Try this code actually target can have multiple labels.
So property is not label it is labels.
<div id="PDF">
<input type="checkbox" id="pdf" name="pdf" value="pdf">
<label for="pdf">PDF</label>
</div>
<script>
document.addEventListener('change', function (event) {
if (event.target.id == "pdf") {
if (event.target.checked == true) {
event.target.labels[0].style.fontWeight = "bold";
} else {
event.target.labels[0].style.fontWeight = "normal";
}
}
});
</script>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论