这行js代码有什么问题:newTask.innerHTML = '${任务}<li class="delete-item secondary-content"><i class="fa fa-remove></li></a>';
时间: 2024-06-11 10:07:50 浏览: 10
这行js代码有两个问题:
1. 在`${任务}`中缺少反引号(``)或单引号('')或双引号("")将任务变量包裹起来。
2. `<i class="fa fa-remove>`标签没有被正确地关闭,应该在其后添加一个`</i>`标签。
正确的代码应该是:
```
newTask.innerHTML = `${任务}<li class="delete-item secondary-content"><i class="fa fa-remove"></i></li></a>`;
```
相关问题
function renderData() { let tbody = document.querySelector('tbody'); tbody.innerHTML = ''; contacts.forEach((contact, index) => { let tr = document.createElement('tr'); tr.innerHTML = ` <td>${contact.name}</td> <td>${contact.phone}</td> <td>${contact.email}</td> <td> <button class="edit-btn" data-index="${index}">编辑</button> <button class="delete-btn" data-index="${index}">删除</button> </td> `; tbody.appendChild(tr); }); }帮我添加一个确认是否删除的提示
好的,可以在删除按钮的点击事件中添加确认提示框。可以按照如下代码进行修改:
```
function renderData() {
let tbody = document.querySelector('tbody');
tbody.innerHTML = '';
contacts.forEach((contact, index) => {
let tr = document.createElement('tr');
tr.innerHTML = `
<td>${contact.name}</td>
<td>${contact.phone}</td>
<td>${contact.email}</td>
<td>
<button class="edit-btn" data-index="${index}">编辑</button>
<button class="delete-btn" data-index="${index}">删除</button>
</td>
`;
tbody.appendChild(tr);
});
// 为删除按钮添加点击事件
let deleteBtns = document.querySelectorAll('.delete-btn');
deleteBtns.forEach((btn) => {
btn.addEventListener('click', (e) => {
let index = e.target.dataset.index;
let contact = contacts[index];
if (confirm(`确定要删除 ${contact.name} 吗?`)) {
contacts.splice(index, 1);
renderData();
}
});
});
}
```
这样,当用户点击删除按钮时,会弹出一个确认提示框,询问用户是否确定删除该联系人。如果用户点击确认按钮,则执行删除操作;否则,不执行任何操作。
<div class="popup-content"> <div class="popup-row"> <div class="popup-item">5</div> <div class="popup-item">10</div> <div class="popup-item">20</div> </div> <div class="popup-row"> <div class="popup-item">50</div> <div class="popup-item">100</div> <div class="popup-item">200</div> </div> <div> <div><van-button round type="info">确认提现</van-button></div> </div> </div>点击确认提现弹出选中的div中对应的数字并示范一下
好的,以下是示例代码:
HTML 代码:
```html
<div class="popup-content">
<div class="popup-row">
<div class="popup-item" id="popup-item-1">5</div>
<div class="popup-item" id="popup-item-2">10</div>
<div class="popup-item" id="popup-item-3">20</div>
</div>
<div class="popup-row">
<div class="popup-item" id="popup-item-4">50</div>
<div class="popup-item" id="popup-item-5">100</div>
<div class="popup-item" id="popup-item-6">200</div>
</div>
<div>
<div><van-button round type="info" id="confirm-button">确认提现</van-button></div>
</div>
</div>
```
JavaScript 代码:
```javascript
// 获取确认提现按钮元素
var confirmButton = document.getElementById("confirm-button");
// 添加点击事件处理程序
confirmButton.onclick = function() {
// 获取所有选项元素
var popupItems = document.getElementsByClassName("popup-item");
// 遍历选项元素
for (var i = 0; i < popupItems.length; i++) {
// 判断当前选项元素是否被选中
if (popupItems[i].classList.contains("selected")) {
// 提取选项元素中的数字并弹出提示框
var selectedNumber = popupItems[i].innerHTML;
alert("您选中了:" + selectedNumber);
break;
}
}
}
// 获取所有选项元素
var popupItems = document.getElementsByClassName("popup-item");
// 遍历选项元素
for (var i = 0; i < popupItems.length; i++) {
// 添加点击事件处理程序
popupItems[i].onclick = function() {
// 取消所有选中状态
for (var j = 0; j < popupItems.length; j++) {
popupItems[j].classList.remove("selected");
}
// 添加选中状态
this.classList.add("selected");
}
}
```
示例代码中,我们给每个选项元素添加了一个唯一的 ID,然后在确认提现按钮的点击事件中,遍历所有选项元素,找到被选中的元素,提取其中的数字,并弹出提示框。
同时,我们也给每个选项元素添加了一个点击事件处理程序,当用户点击一个选项时,我们会取消所有选中状态,然后将当前选项设为选中状态。这样,用户就可以通过点击选项来选择要提现的金额。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)